使用vue-cli創(chuàng)建項(xiàng)目
標(biāo)簽（空格分隔）： vueJS
說明：
vue-cli 是一個(gè)官方發(fā)布vueJS項(xiàng)目腳手架：https://github.com/vuejs/vue-cli
我創(chuàng)建的模板項(xiàng)目：https://github.com/Aleczhang1992/my-vue-project/tree/dev
一、步驟
1.要求已安裝Node.js (>=4.x, 6.x preferred) and Git.
可以設(shè)置cnpm可以提升依賴包下載速度：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝vue-cli
sudo npm install -g vue-cli
2.創(chuàng)建模板項(xiàng)目
命令格式：vue init <template-name> <project-name>
其中template-name是可選模板項(xiàng)蔬芥，project-name是創(chuàng)建項(xiàng)目的名稱梆靖。目前提供一下幾種：
也可以使用自定義的模板，可以來自遠(yuǎn)端托管倉庫或本地笔诵。
選用webpack模板項(xiàng)目：
https://github.com/vuejs-templates/webpack
二返吻、Mint_UI框架的使用
1.完整引入
在 main.js 中寫入以下內(nèi)容：
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
render: h => h(App)
})
以上代碼便完成了 Mint UI 的引入。需要注意的是乎婿，樣式文件需要單獨(dú)引入测僵。
2.按需引入
安裝 babel-plugin-component：
npm install babel-plugin-component -D
將 .babelrc 修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
引入方式如下
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或?qū)憺? * Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
render: h => h(App)
})
創(chuàng)建項(xiàng)目過程中有一下幾個(gè)問題：
1.本地開發(fā)狀態(tài)啟動(dòng)項(xiàng)目時(shí)，常會(huì)有代碼空行谢翎、分號(hào)報(bào)錯(cuò)的問題捍靠。 原因：在創(chuàng)建項(xiàng)目時(shí)，選擇了使用eslint語法校驗(yàn)森逮。
2.引入樣式報(bào)錯(cuò)問題榨婆，babel無法編譯css文件。
Module not found: Error: Cannot resolve module 'mint-ui/style.css'
原因：全局引入需要引入樣式褒侧，如果在.babelrc中設(shè)置過按需引入良风，則不要再專門引入css.
3.另外引入的組件要在自定義組件中注冊(cè),組件中嵌套的組件也要進(jìn)行引用和注冊(cè)。
4.非渲染dom組件無需寫在模板內(nèi)闷供，也無需注冊(cè)烟央，可以直接調(diào)用使用。比如load的Indicator
三歪脏、vue-router的使用
github地址：https://github.com/vuejs/vue-router
在入口文件main.js中引入
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//然后實(shí)例化一個(gè)router
const router = new VueRouter({
mode: 'history',
routes: routes
});
rotues是自己分配的路由設(shè)置吊档；
四、使用vuex進(jìn)行狀態(tài)管理
vue的狀態(tài)管理工具 vuex
下面簡單介紹下vuex各個(gè)部分的概念
state是一個(gè)全局的狀態(tài)存儲(chǔ)唾糯，數(shù)據(jù)會(huì)存儲(chǔ)在其中怠硼，vue組件可以直接訪問其中的值鬼贱，但是只可以讀，不可以進(jìn)行寫操作
getter,有些時(shí)候我們需要對(duì)獲取的數(shù)據(jù)進(jìn)行加工香璃，而不是直接獲取state中的數(shù)據(jù)这难，這時(shí)候可以通過getter定義函數(shù)，返回對(duì)應(yīng)的數(shù)據(jù)
mutations是vuex中唯一一個(gè)可以修改數(shù)據(jù)的地方葡秒，mutations可以定義事件函數(shù)姻乓，在vue組件中可以通過commit發(fā)射事件，調(diào)用函數(shù)眯牧。需要注意的是蹋岩，mutations中的操作必須是同步的，不可以存在異步操作的情況学少。
actions和 mutation比較相似剪个，不同的是actions中不直接修改state，而是通過commit調(diào)用mutations修改數(shù)據(jù)版确，而且actions中可以存在異步處理邏輯
使用vuex需要在Vue.use中引入扣囊，然后實(shí)例化一個(gè)Vuex.Store對(duì)象就可以了,對(duì)象中需要定義state,actions,mutations,getters等內(nèi)容，這樣子就可以建立一個(gè)全局的狀態(tài)管理機(jī)制绒疗，可以從應(yīng)用的頂端去處理數(shù)據(jù)侵歇，各個(gè)組件中對(duì)數(shù)據(jù)進(jìn)行操作也是通過事件直接傳遞到Vuex中進(jìn)行數(shù)據(jù)更新，然后再進(jìn)行響應(yīng)到其他使用同個(gè)數(shù)據(jù)的組件中吓蘑，進(jìn)行視圖更新惕虑。
