1. 概述
在实际开发过程中，一般不会采用引用单文件的方式开发，采用脚手架vue-cli开发，更加方便，易扩展和维护。本文介绍脚手架vue-cli的安装，以及采用vue-cli的Demo开发 - TodoList。
2. 安装过程
- node -v，查看node版本
- npm -v，查看npm版本
- npm install -g vue-cli , 安装vue-cli 脚手架构建工具
参考：
vue.js 三种方式安装
https://blog.csdn.net/m0_37479246/article/details/78836686
3. 使用介绍
- vue init webpack firstApp ，初始化一个vue-cli项目
- npm run dev 或者 npm run start ，效果一样，启动了webpeak dev server
对应package.json的scripts配置
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
- 单文件组件
- 使用es6，不再使用es5进行编码 ??
全局样式和局部样式
- scoped决定是否是全局或局部，一般情况下，组件都使用局部组件，便于解耦
<style scoped>
.item {
color: green;
}
</style>
TodoList Demo项目源码
- Dir Tree
$ tree src/
src/
├── assets
│ └── logo.png
├── components
│ └── TodoItem.vue
├── main.js
├── router
│ └── index.js
└── TodoList.vue
- main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TodoList from './TodoList'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { TodoList },
template: '<TodoList/>'
})
- TodoList.vue
<template>
<div>
<input class='input' v-model='todo'/>
<button @click='handleSubmit'>Submit</button>
<ul>
<todo-item
v-for='(item, index) of list'
:key='index'
:content='item'
:index='index'
@delete='handleDelete'
></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
components: {
'todo-item': TodoItem
},
data () {
return {
todo: '',
list: []
}
},
methods: {
handleSubmit () {
this.list.push(this.todo)
this.todo = ''
},
handleDelete (index) {
this.list.splice(index, 1)
}
}
}
</script>
<style>
.input {
color: red;
}
</style>
- ./components/TodoItem.vue
<template>
<li class='item' click='handleClick'>{{content}}</li>
</template>
<script>
export default {
props: ['content', 'index'],
methods: {
handleClick () {
this.$emit('delete', this.index)
}
}
}
</script>
<style scoped>
.item {
color: green;
}
</style>
