本文接着之前的todolist例子，通过vue-cli + webpack 搭建项目：针对于vue-cli 2.x版本，更高版本找官网https://cli.vuejs.org/guide/installation.html
1. 环境搭建
检查电脑是否已经安装有npm 和 node ，通过npm -v 或者node -v查看版本
#安装 vue-cli （最好全局安装）
npm install -g vue-cli //安装的是vue-cli2.x
npm install -g @vue/cli //安装的是vue-cli3.x
#使用vue-cli初始化项目（这里假设项目名是 todolist）
vue init webpack todolist
#进到目录
cd todolist
#运行
npm run dev
浏览器访问 http://localhost:8080 （默认打开的是index.html文件）
基本目录结构如图：src 目录下是核心代码
使用webpack打包后默认加载main.js文件并将其引入到index.html文件中
2. main.js文件默认会引入相关模块以及组件，这里引入组件App.vue, 模板也是App
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
// router,
components: { App },
template: '<App/>'
})
App.vue是组件入口，页面的开发都在这里进行，注意template中只允许有一个根元素，所以最外层要用div包起来，
在这个例子中ul中的li拆分成了另一个组件<todo-list>，通过在js中 用 import 组件名 from '组件路径' 引入
<template>
<div>
<input type="text" v-model="inputValue">
<button v-on:click="addItem">Add</button>
<ul>
<todo-list
v-for="(item,index) in list"
:key="index"
:content="item"
:index="index"
@delete="deleteItem"
></todo-list>
</ul>
</div>
</template> <script>
import todoItem from './components/todoItem.vue'; //引入组件
export default {
components:{
"todo-list": todoItem //局部注册的组件起别名
},
data(){ //这里的data写法和vue中不一样，这里data是一个 函数，return返回的是数据
return{
inputValue: '',
list: [ ]
}
},
methods:{
addItem(){
this.list.push(this.inputValue);
this.inputValue = "";
},
deleteItem(index){
this.list.splice(index,1);
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
自定义的组件 /src/components/todoItem.vue, 这里定义了li, props是子组件接收的参数
<template>
<li >{{content}}<button v-on:click="handDel">remove</button></li>
</template> <script>
export default {
name: 'todoItem',
props: ['content','index'],
methods:{
handDel(){
this.$emit('delete',this.index);
}
}
}
</script> <style scoped> //scoped表示style的作用域只在本组件中有效，并不会影响父组件 </style>
至此todolist的代码已经编写完成，vue-cli自动配置好了脚本和依赖，直接运行以下命令
npm run dev //表示开发环境，不会生成打包文件，通过http://localhost:8080访问页面
npm run build //表示生产环境，会默认生成打包文件dist/index.html
3. 页面显示如下：点击remove可移除