一、安装脚手架，运行项目

1.1 安装，运行

首先安装 16.0 或更高版本的 Node.js

然后在cmd安装并执行 create-vue 它是 Vue 官方的项目脚手架工具

npm init vue@latest

可以选装一些功能组件，或者不装，在项目被创建后，通过以下步骤安装依赖并启动开发服务器

依次执行上面的命令，然后一个vue项目就运行起来了，可以通过链接访问

如果要发布到生产环境，执行此命令会在 ./dist 文件夹中为应用创建一个生产环境的构建版本

npm run build

1.2 用IDE打开项目

用ide打开这个项目，主要的目录及文件：

  • node_modules：项目依赖目录
  • src：源代码放置的目录
  • index.html：项目最外层的html文件，里面有id="app"的挂载点

  • src/main.js：整个项目的入口文件，创建了vue实例，并定义了根组件，引入了./App.vue组件(模板)

而App.vue文件里定义了三大块，即三个单文件组件：

  • script：　 组件逻辑，即js
  • template：模板，即网页内容(html)
  • style：      渲染样式，即css

二、实现todolist

先看下目录结构，主要用到TodoList跟TodoItem两个组件

然后依次看各个文件的代码

index.html

没有变更，还是绑定id="app"

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <link rel="icon" href="/favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vite App</title>

  </head>

  <body>

    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>

  </body>

</html>

main.js

import { createApp } from 'vue'     //使用createApp创建一个应用实例

import App from './TodoList.vue'    //从一个单文件组件中导入根组件

createApp(App).mount('#app')    //应用实例必须在调用了 .mount() 方法后才会渲染出来；与index.html中div=app的挂载点进行绑定

TodoList.vue

<script>

import TodoItem from './components/TodoItem.vue'    //引用其他组件

export default {

  components: {

    'todo-item': TodoItem                      //设置标签与组件对应

  },

  data () {         //data : function() vue中data变为一个函数

    return {

      inputValue: '',

      list: []

    }

  },

  methods: {

    handleSubmit () {

      this.list.push(this.inputValue)           //将提交的数据inputValue赋值到list中

      this.inputValue = ''

    },

    handleDelete (index) {

      this.list.splice(index,1)       //接收handleDelete方法传入的index值，并删除list中此下标的值

    }

  }

}

</script>

<template>

  <div>

    <div>

      <input v-model="inputValue"/>               <!--v-model:模板指令，与script中data下的inputValue双向绑定-->

      <button @click="handleSubmit">提交</button>  <!--鼠标点击，引发事件，方法为handleSubmit-->

    </div>

    <ul>

      <todo-item v-for="(item, index) of list"

      :key="index"

      :content="item"

      :index="index"

      @delete="handleDelete"

      ></todo-item>         <!--此标签为script里自定义的标签，即引用的TodoItem组件；传递数值，并监听TodoItem.vue 子组件里的delete事件-->

    </ul>

  </div>

</template>

<style>

</style>

TodoItem.vue

<script>

export default {

  props: ['content','index'],             //接收父组件传递的值

  methods: {

    handleDelete () {

      this.$emit('delete', this.index)    ////向外触发名称为delete的事件，对应值为index，与父组件形成发布--订阅模式

    }

  }

}

</script>

<template>

  <li @click="handleDelete">{{content}}</li>  <!--此组件的数据模板，鼠标点击触发事件-->

</template>

<style>

</style>

访问http://localhost:5173/

Vue3--使用脚手架创建一个vue应用，实现todolist的更多相关文章

  1. 如何利用vue脚手架创建一个vue项目

    1.安装node.js 2.打开命令行查看下npm和node是否都安装好 node -v npm -v 3.安装淘宝镜像cnpm $ npm install -g cnpm --registry=ht ...

  2. vue3官网介绍，安装，创建一个vue实例

    前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...

  3. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  4. 【vue】创建一个vue前端项目，编译，发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  5. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  6. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  7. react用脚手架创建一个react单页面项目，react起手式

    官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10    npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下 ...

  8. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  9. 安装Vue和创建一个Vue脚手架项目

    首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本  如 ...

  10. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

随机推荐

  1. 16个值得推荐的.NET ORM框架（含使用情况统计的投票，欢迎参与）

    什么是ORM? ORM 是 Object Relational Mapping 的缩写,译为"对象关系映射",是一种程序设计技术,用于实现面向对象编程语言里不同类型系统的数据之间的 ...

  2. PTA作业4、5、6及期中考试的总结

    一.前言 本次博客是针对面向对象程序设计课程布置的PTA第4.5.6次作业以及期中考试的编程题而写的总结分析,重点分析了菜单计价系列题目.期中考试的编程题等具有一定难度和特色的问题. 二.PTA第四次 ...

  3. Leetcode旋转图像

    上C语言代码,矩阵先转置再左右对称就是旋转图像的答案啦 void rotate(int** matrix, int matrixSize, int* matrixColSize){ int i,j,n ...

  4. Java核心知识体系7：线程安全性讨论

    Java核心知识体系1:泛型机制详解 Java核心知识体系2:注解机制详解 Java核心知识体系3:异常机制详解 Java核心知识体系4:AOP原理和切面应用 Java核心知识体系5:反射机制详解 J ...

  5. 如何用BI制作图表组合？

    BI(Business Intelligence)是一种通过收集.分析和可视化数据来帮助企业做出决策的技术和工具.在BI中,制作图表组合是一种常见的方式,可以将不同的图表类型组合在一起,以更全面地呈现 ...

  6. ML.NET 3.0 增强了深度学习和数据处理能力

    .NET团队在 2023.11.28 在博客上正式发布了 ML.NET 3.0::https://devblogs.microsoft.com/dotnet/announcing-ml-net-3-0 ...

  7. [NOI online2022普及A] 王国比赛

    题目描述 智慧之王 Kri 统治着一座王国. 这天 Kri 决定举行一场比赛,来检验自己大臣的智慧. 比赛由 \(n\) 道判断题组成,有 \(m\) 位大臣参加.现在你已经知道了所有大臣的答题情况, ...

  8. Java五种设计模式实现奶茶订单生成系统小DEMO

    前言 这是大学时候上设计模式这门课写的程序,当时课程任务是要求结合五个设计模式写一个系统,最近偶然翻到,把系统分享一下. 成品预览 主界面 ​ 功能介绍 订单管理系统,实现了对订单的增删改查.且实现了 ...

  9. Lucas定理 、斯特灵公式

    斯特灵公式是一条用来取n阶乘的近似值的数学公式. 公式为: 用该公式我们可以用来估算n阶乘的值:估算n阶乘的在任意进制下的位数. 如何计算在R进制下的位数:我们可以结合对数来计算,比如十进制就是lg( ...

  10. Pix4Dmapper空间三维模型的应用实例：GIS选址分析

      本文介绍基于无人机影像建模完成后的结果,利用ArcMap软件进行空间选址分析,从而实现空间三维模型应用的方法. 目录 1 空间分析目标确立 2 基于基本约束条件的选址求解 2.1 坡度计算与提取 ...