一、安装脚手架,运行项目
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>
仅供参考.....