在前端這個小圈子里充盈著各種各樣的技術(shù)撲牍白，而且他們的更新速度快，讓我作為一個前端小白很難適應(yīng)抖棘，最近恰好趕上公司要換新框架茂腥，而且給我們前端空出了學(xué)習(xí)時間，就研究了一下vue钉答，個人感覺vue相比前面研究的angular2,是簡單了點，學(xué)起來更容易上手杈抢！

vue

Vue.js（ 是一套構(gòu)建用戶界面的漸進式框架数尿。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計惶楼。Vue 的核心庫只關(guān)注視圖層右蹦，它不僅易于上手诊杆，還便于與第三方庫或既有項目整合。

此項目搭建我用了Vue2 + iview, iview是很不錯的一套UI框架何陆，他像bootstrap一樣可以適配各種分辨率晨汹。

一.初始化簡單demo

1.vue2也有自己的腳手架工具vue-cli,首先你得全局安裝vue-cli:

$npm install -g vue-cli

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

$vue init ?webpack-simple myProject

3.上一步執(zhí)行完畢贷盲，進入到你的項目里：

cd myProject

4.然后安裝項目依賴的包淘这，也就是在package.json文件里處在"devDependencies"下的包

$npm i?

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

$npm i --production

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

$npm run dev?

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

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

二.搭建完整的項目

頁面展示

首先得新建一個項目，步驟同簡單demo的初始化佳魔。

搭建項目曙聂，首先構(gòu)建你的整體框架，此項目只有有一個入口頁面鞠鲜，左側(cè)菜單始終顯示在頁面上宁脊，而后根據(jù)理由跳轉(zhuǎn)決定右側(cè)顯示和內(nèi)容

入口頁面代碼

其中menu部分可以根據(jù)權(quán)限動態(tài)生成，而中間變動的部分在<router-view>標簽內(nèi)顯示贤姆。

1.路由

router.js

在調(diào)用時需要寫為:<router-link to='/baseData/dictionary'></router-link>

很多人在這里會想到用懶加載來加載組件榆苞，代碼如下：?

{path:'/medicalSvc',name:'醫(yī)療服務(wù)',component:resolve => require(['../components/medicalData/medicalServe'], resolve),},

但是如果你構(gòu)建的是系統(tǒng)類項目，有上百個路由庐氮，這樣的話 當你用webpack hot進行代碼熱更新的時候语稠，速度就會超級慢，此時解決方法就是讓他在開發(fā)環(huán)境下不要懶加載弄砍，在生產(chǎn)環(huá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下

index.js

另外注意：404頁面一定要最后加載寸士，如果放在constantRouterMap一同聲明了404，它后面的所有頁面都會被攔截到404碴卧，詳細的問題見addRoutes when you've got a wildcard route for 404s does not work

2.權(quán)限控制

main.js

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

1.當其再訪問登錄頁面（to.path === '/login'）時凡人，可直接重定向到首頁名党。

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

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

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

permission.js

permission.js里面代碼只干了一件事情：那就是將用戶獲得的權(quán)限轉(zhuǎn)化成該用戶可以訪問的路由府框。具體的轉(zhuǎn)換方法要看后臺返回什么樣的數(shù)據(jù)。

3.http服務(wù)--axios

先得安裝axios : npm install axios --save

http.js

Axios 是一個基于 promise 的 HTTP 庫讥邻，可以用在瀏覽器和 node.js 中迫靖，我在項目中用Promise對象對其進行了封裝，目的是為了保證異步書寫代碼時兴使，數(shù)據(jù)這間的銜接性系宜。axios既可以通過發(fā)送post，get請求也可以通過API訪問服務(wù)器发魄。

4.vuex

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式盹牧。個人理解vuex就相當于angular里面的service，用來存放狀態(tài)和數(shù)據(jù)

一個項目里面有一個store存儲器,在沒有store以前励幼，我們的vue組件可以理解成由state汰寓、view、action組成苹粟，三者之間的聯(lián)系是@state(data)有滑，驅(qū)動應(yīng)用的數(shù)據(jù)源；@view(template)嵌削，以聲明方式將state映射到視圖毛好；@actions(methods)，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化苛秕。但是當你的好多組件要共享一個數(shù)據(jù)時肌访，你得通過層層嵌套的父子組件來獲取并修改數(shù)據(jù)，這樣做太繁瑣了艇劫，所以就想到要將多個組件共享的數(shù)據(jù)提出來吼驶，以一個全局單例模式管理，這便有了vuex。

store存儲器里包含

new Vuex.Store({ ? ? ? ? ? ? ? state:{...},mutations:{...},actions:{...},getters:{...} ? ? ? ? ? ? ? });

但是由于使用單一狀態(tài)樹旨剥，當你的項目足夠大時，所有的狀態(tài)都集中在一起浅缸，會 導(dǎo)致代碼臃腫轨帜，不易維護。于是?Vuex 允許我們將 store 分割成模塊（module）衩椒。每個模塊擁有自己的 state蚌父、mutation、action毛萌、getter苟弛。

5.組件之間的傳值

父組件向子組件傳值：通過為子組件綁定屬性

父：<table-hospital :dataTable="dataTable" :multiple="multiple" @changePage='changePage'></table-hospital>

子：

子組件

子組件向父組件傳值：通過向上廣播傳值

子：

子組件

父：<table-hospital :dataTable="dataTable" :multiple="multiple" @changePage='changePage'></table-hospital>

父組件

非父子組件之間通信時，（1）在簡單的場景下阁将，可以使用一個空的 Vue 實例作為：

varbus =newVue()膏秫，

// 觸發(fā)組件 A 中的事件

bus.$emit('id-selected',1)

// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件

bus.$on('id-selected',function(id){.............. ...})

（2）可以通過vuex狀態(tài)管理模式來實現(xiàn)。

6.jQuery的引用

(1).用import的房是引入做盅，那么哪個壓面用到$,哪個頁面就得import jquery;

(2)在index.html頁面用<script>標簽引入缤削，這樣的話人和組件都不需要再次引入，可以直接使用

總結(jié)：vue我也是初次接觸吹榴，說的不正確的地方亭敢，歡迎大家留言指出，讓我們在前端的道路上 互相傷害图筹！

相關(guān)內(nèi)容也可以參考：https://segmentfault.com/a/1190000009506097