一、安装脚手架，运行项目
1.1 安装，运行
首先安装 16.0 或更高版本的 Node.js
然后在cmd安装并执行 create-vue 它是 Vue 官方的项目脚手架工具
npm init vue@latest可以选装一些功能组件，或者不装，在项目被创建后，通过以下步骤安装依赖并启动开发服务器
依次执行上面的命令，然后一个vue项目就运行起来了，可以通过链接访问
如果要发布到生产环境，执行此命令会在 ./dist 文件夹中为应用创建一个生产环境的构建版本
npm run build1.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>
<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>
