一.初始化簡單demo

1.首先全局安裝vue-cli:

????$npm install -g vue-cli

2.使用vue-cli初始化項(xiàng)目,初始化項(xiàng)目時vue-cli官方(https://www.npmjs.com/package/vue-cli)已經(jīng)給提供了幾種模板供大家選擇，一般就用webpack

????$vue init ?webpack myProject

3.上一步執(zhí)行完畢，進(jìn)入到項(xiàng)目里：

????cd myProject

4.然后安裝項(xiàng)目依賴的包，也就是在package.json文件里處在"devDependencies"下的包

????$npm install

5.再安裝生產(chǎn)環(huán)境下需要用到的包，也就是在package.json文件里處在"dependencies"下的包

????$npm install? xxx (如果同時安裝多個包，中間用空格分開)

例如：

? ???$npm install? vuex?axios (同時安裝vuex和axios)

6.就緊接著再運(yùn)行，這一步依賴于package.json文件里"scripts"下的內(nèi)容

????$npm run dev?

7.就會看到瀏覽器里面自動打開一個頁面本地頁面 localhost：8080

此時一個簡單的vue demo已經(jīng)搭建成功了！

二.搭建完整的項(xiàng)目

1.路由

如果你構(gòu)建的是系統(tǒng)類項(xiàng)目，有上百個路由，這樣的話當(dāng)你用webpack hot進(jìn)行代碼熱更新的時候，速度就會超級慢，此時解決方法就是讓他在開發(fā)環(huán)境下不要懶加載，在生產(chǎn)環(huán)境下再進(jìn)行懶加載。

我們首先要定義一個變量

const _import = require('./_import_' + process.env.NODE_ENV);

process.env是讀取系統(tǒng)環(huán)境變量的，比如你在啟動服務(wù)的時候，設(shè)置環(huán)境變量為production或者development，那么在程序里面就可以通過process.env.NODE_ENV獲取。此時你就需要再寫兩個文件(注意文件的名稱命名)分別導(dǎo)出不同環(huán)境下的文件目錄如：

*_production.js:? ?module.exports = file => () => import('@/pages/' + file + '.vue')

*_develope.js:? ?module.exports = file =>? import('@/pages/' + file + '.vue')

import文件

然后將組件路徑定義為：

{path:'/app/customerSource',component:_import('customerSource')},

那么又是怎么設(shè)置環(huán)境變量為production或者development值的呢，是在配置文件index.js下

config/index.js

2.權(quán)限控制

main.js

這里使用了router.beforeEach注冊一個全局的before鉤子，來在導(dǎo)航觸發(fā)之前判斷是否有權(quán)限進(jìn)入改導(dǎo)航頁面。其中的“token”是用戶登錄成功，有服務(wù)器端返回的標(biāo)識，如果它存在，則證明用戶已經(jīng)登錄，所以

1.當(dāng)其再訪問登錄頁面（to.path === '/login'）時，可直接重定向到首頁。

2.當(dāng)其訪問其他路由時，需要判斷用戶是否具有訪問這些路由的權(quán)限，首先將用戶所有的權(quán)限轉(zhuǎn)換城路由掛載到router上，接著當(dāng)訪問路由上未掛載的頁面時便會定向到404頁面，訪問掛載上的頁面時，則會正常跳轉(zhuǎn)。

3.設(shè)置白名單是避免一些頁面浪費(fèi)時間做重定向，比如404，login.

4.注意：這里還有一個小hack的地方，就是router.addRoutes之后的next()可能會失效，因?yàn)榭赡躰ext()的時候路由并沒有完全add完成，我們簡單的通過next(to)巧妙的避開這個問題

相關(guān)參考：http://www.itdecent.cn/p/87a4fe7bf0b1