Vue3--使用脚手架创建一个vue应用，实现todolist
一、安装脚手架，运行项目
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/
