1. 概述
在實(shí)際開發(fā)過程中挫望，一般不會(huì)采用引用單文件的方式開發(fā)响巢，采用腳手架vue-cli開發(fā)，更加方便毕骡，易擴(kuò)展和維護(hù)躏哩。本文介紹腳手架vue-cli的安裝劲件，以及采用vue-cli的Demo開發(fā) - TodoList。
2. 安裝過程
- node -v寇仓，查看node版本
- npm -v，查看npm版本
- npm install -g vue-cli , 安裝vue-cli 腳手架構(gòu)建工具
參考：
vue.js 三種方式安裝
https://blog.csdn.net/m0_37479246/article/details/78836686
3. 使用介紹
- vue init webpack firstApp 遍烦，初始化一個(gè)vue-cli項(xiàng)目
- npm run dev 或者 npm run start ，效果一樣服猪，啟動(dòng)了webpeak dev server
對應(yīng)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進(jìn)行編碼 ??
全局樣式和局部樣式
- scoped決定是否是全局或局部罢猪，一般情況下近她，組件都使用局部組件膳帕，便于解耦
<style scoped>
.item {
color: green;
}
</style>
TodoList Demo項(xiàng)目源碼
- 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>
