摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開發(fā)和維護(hù)。

Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通過Vue.js來構(gòu)建一個中大型的前端項(xiàng)目，同時(shí)做好相應(yīng)的部署與優(yōu)化工作

Vue.js簡介

從上圖的介紹中我們不難發(fā)現(xiàn)Vue.js是一款輕量級的以數(shù)據(jù)驅(qū)動的前端JS框架，其和jQuery最大的不同點(diǎn)在于jQuery通過操作DOM來改變頁面的顯示，而Vue通過操作數(shù)據(jù)來實(shí)現(xiàn)頁面的更新與展示。下面便是Vue數(shù)據(jù)驅(qū)動的概念模型：

Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個相當(dāng)于監(jiān)聽器的東西。

當(dāng)View層的視圖發(fā)生改變時(shí)，Vue會通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)。相反，當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)，其也會通過Data Bingings來監(jiān)聽并改變View層的展示。這樣便實(shí)現(xiàn)了一個雙向數(shù)據(jù)綁定的功能，也是Vue.js數(shù)據(jù)驅(qū)動的原理所在。

在一個html文件中，我們直接可以通過script標(biāo)簽引入Vue.js，然后就可以在頁面里寫Vue.js代碼了。上圖中我們通過new Vue()構(gòu)建了一個Vue的實(shí)例，在實(shí)例中，可以包含掛在元素（el），數(shù)據(jù)（data），模板（template），方法（methods）與生命周期鉤子（created等）等選項(xiàng)。不同的實(shí)例選項(xiàng)擁有不同的功能，如：

（1）el表明我們的Vue需要操作哪一個元素下的區(qū)域，"#demo"表示操作id為demo的元素下區(qū)域。
（2）data表示Vue 實(shí)例的數(shù)據(jù)對象，data 的屬性能夠響應(yīng)數(shù)據(jù)的變化。
（3）created表示實(shí)例生命周期中創(chuàng)建完成的那一步，當(dāng)實(shí)例已經(jīng)創(chuàng)建完成之后將調(diào)用其方法。

Vue.js技術(shù)棧

以上我們講到可以直接在一個html頁面里通過引入Vue.js來直接寫Vue代碼，但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大，項(xiàng)目中會存在很多頁面，一旦每個頁面都引入一個Vue.js或者聲明一個Vue實(shí)例，這樣非常不利于后期的維護(hù)和代碼的公用，也會存在實(shí)例名沖突的情況，所以我們需要用到Vue提供的技術(shù)棧來構(gòu)建強(qiáng)大的前端項(xiàng)目。

除了Vue.js我們還需要用到：

（1）vue-cli：Vue的腳手架工具，用于自動生成Vue項(xiàng)目的目錄及文件。
（2）vue-router： Vue提供的前端路由工具，利用其我們實(shí)現(xiàn)頁面的路由控制，局部刷新及按需加載，構(gòu)建單頁應(yīng)用，實(shí)現(xiàn)前后端分離。
（3）vuex：Vue提供的狀態(tài)管理工具，用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用，存儲我們需要用到數(shù)據(jù)對象。
（4）ES6：Javascript的新版本，ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS代碼，同時(shí)利用其提供的強(qiáng)大功能來快速實(shí)現(xiàn)JS邏輯。
（5）NPM：node.js的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等，便于開發(fā)和維護(hù)。
（6）webpack：一款強(qiáng)大的文件打包工具，可以將我們的前端項(xiàng)目文件同一打包壓縮至js中，并且可以通過vue-loader等加載器實(shí)現(xiàn)語法轉(zhuǎn)化與加載。
（7）Babel：一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件

利用以上等技術(shù)，我們便可以開始構(gòu)建我們的Vue項(xiàng)目了。

構(gòu)建大型應(yīng)用

在構(gòu)建我們的中大型Vue項(xiàng)目中，我們主要介紹如何利用vue-cli來自動生成我們項(xiàng)目的前端目錄及文件，了解Vue中一切皆組件的概念及父子組件的通信問題，講解在Vue項(xiàng)目中我們?nèi)绾问褂玫谌讲寮?，最后利用webpack來打包及部署我們的項(xiàng)目。

vue-cli構(gòu)建

在使用vue-cli之前我們需要安裝node.js，利用其提供的npm命令來安裝vue-cli。安裝node.js只需去其官網(wǎng)下載軟件并安裝即可，地址為：https://nodejs.org/en/

安裝完成之后我們打開電腦的cmd命令行工具依次輸入上圖中的命令：

（1）npm install -g vue-cli：全局安裝vue-cli
（2）vue init webpack my-project: 利用vue-cli在目錄地址生成一個基于webpack的名為’my-project‘的Vue項(xiàng)目文件及目錄
（3）cd my-project：打開剛剛創(chuàng)建的文件夾
（4）npm intall：安裝項(xiàng)目所依賴的包文件
（5）npm run dev：利用本地node服務(wù)器在瀏覽器中打開并瀏覽項(xiàng)目頁面

這樣我們的一個基于webpack的vue項(xiàng)目目錄就構(gòu)建好了。

單文件組件

在剛剛構(gòu)建好的vue項(xiàng)目中，我們會發(fā)現(xiàn)一個App.vue和Hello.vue的文件，那么像這樣的以.vue后綴結(jié)尾的文件便是我們Vue項(xiàng)目中常見的單文件組件。單文件組件包含了一個功能或模塊的html、js及css。在.vue文件中，我們可以在template標(biāo)簽中寫html，在script標(biāo)簽中寫js，在style標(biāo)簽中寫css。這樣一個功能或模塊就是一個.vue組件，對于組件公用和后期的維護(hù)也非常便捷。

父子組件通信

父子組件通信
那么像這樣在以單文件組件為核心的項(xiàng)目開發(fā)中，我們一定會想到一個問題，就是.vue父子組件之間是如何交換數(shù)據(jù)來實(shí)現(xiàn)通信的呢？在Vue2.0中提供了props來實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)，通過$emit來實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)。當(dāng)然如果是較為復(fù)雜和普遍的數(shù)據(jù)交互，建議大家使用vuex來同一管理數(shù)據(jù)。詳情請見vue官網(wǎng)

插件使用

接下來我們介紹下在基于webpack的vue項(xiàng)目中我們是如何使用插件的，主要有兩種情況：

（一）全局使用

（1）在index.html引入：這樣的方式不推薦使用，因?yàn)榇嬖谙群蠹虞d順序的問題，有些插件不支持這一方式。
（2）通過webpack配置文件引入：主要通過plugin配置項(xiàng)的webpack.ProvidePlugin()方法實(shí)現(xiàn)，不過只適合支持CommonJs規(guī)范并提供一個全局變量的插件，如jQuery中的$。
（3）通過import + Vue.use()引入：這種方式需要在全局.vue文件中import需要加載的插件，然后通過Vue.use("插件變量名")來實(shí)現(xiàn)，不過此方法只支持遵循Vue.js插件編寫規(guī)范的插件使用，如vue-resourece。

（二）單文件使用

（1）通過import直接引入：這種方式可以在需要調(diào)用插件的.vue文件中使用，不過需要注意和實(shí)例的創(chuàng)建順序問題，或者也可以通過require引入。

（2）import + components注冊：此方式為Vue組件的使用方式，可以在一個組件中注冊并使用一個子組件。

部署及優(yōu)化

當(dāng)我們搞定整個Vue項(xiàng)目的前端編碼階段后，我們需要對我們的前端項(xiàng)目文件進(jìn)行部署和優(yōu)化工作，主要的幾個方式如下：

（1）使用webpack的DefinePlugin指定生產(chǎn)環(huán)境：通過plugin中的DefinePlugin配置，我們可以聲明"process.env"屬性為"development"(開發(fā)環(huán)境)或者"production"(生產(chǎn)環(huán)境)，結(jié)合npm配置文件package.json中scripts的命令來切換環(huán)境模式十分方便。

（2）使用UglifyJs自動刪除代碼塊內(nèi)的警告語句：一般在生產(chǎn)環(huán)境的webpack配置文件中使用，通過new webpack.optimize.UglifyJsPlugin()來進(jìn)行配置，刪除警告語句可以縮減文件的體積。

（3）使用Webpack hash處理緩存：當(dāng)我們需要對發(fā)布到線上的文件進(jìn)行修改時(shí)，重新編譯的文件名如果和之前版本的相同會引起瀏覽器無法識別而加載緩存文件的問題。這樣我們需要自動的生成帶hash值的文件名來阻止緩存。詳見：https://segmentfault.com/a/11...

（4）使用v-if減少不必要的組件加載：v-if指令其實(shí)很有用處，它可以讓我們項(xiàng)目中暫時(shí)不需要的組件不進(jìn)行渲染，等需要用到的時(shí)候在渲染，比如某個彈窗組件等。這樣我們可以減少頁面首次加載的時(shí)間和文件量。

除了以上幾點(diǎn)的優(yōu)化，還有很多優(yōu)化選擇，有興趣的童鞋可以好好地了解下webpack的API文檔，畢竟webpack的功能十分強(qiáng)大。

總結(jié)

本次教程介紹的形式簡單介紹了Vue.js的知識點(diǎn)及開發(fā)流程，并將前端自動化、組件化、工程化的理念貫穿其中，簡單的介紹了Vue.js，以后還會寫一些關(guān)于vue全家桶的文章跟大家一起探討和學(xué)習(xí)。