Vue.js作為目前最熱門最具前景的前端框架之一赌渣，其提供了一種幫助我們快速構建并開發(fā)前端項目的新的思維模式徊件。本文旨在幫助大家認識Vue.js，了解Vue.js的開發(fā)流程准潭，并進一步理解如何通過Vue.js來構建一個中大型的前端項目者铜，同時做好相應的部署與優(yōu)化工作腔丧。

文章將以PPT圖片附加文字介紹的形式展開，不會涉及知識點的具體代碼作烟，點到為止愉粤。有興趣的同學可以查看相應的文檔進行了解。

01-

Vue.js簡介

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

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

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

02-

Vue實例

在一個html文件中，我們直接可以通過script標簽引入Vue.js箭跳，然后就可以在頁面里寫Vue.js代碼了晨另。上圖中我們通過new Vue()構建了一個Vue的實例，在實例中谱姓，可以包含掛在元素（el），數(shù)據(jù)（data）刨晴，模板（template）屉来，方法（methods）與生命周期鉤子（created等）等選項。不同的實例選項擁有不同的功能狈癞，如：

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

03-

Vue常用指令

在Vue項目的開發(fā)中脐雪，我們使用的最多的應該就屬Vue的指令了。通過Vue提供的常用指令恢共，我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅動的強大功能战秋。以下便是圖中常用指令的簡單介紹：

1. v-text: 用于更新綁定元素中的內容，類似于jQuery的text()方法
2. v-html: 用于更新綁定元素中的html內容讨韭，類似于jQuery的html()方法
3. v-if: 用于根據(jù)表達式的值的真假條件渲染元素脂信，如果上圖P3為false則不會渲染P標簽
4. v-show: 用于根據(jù)表達式的值的真假條件顯示隱藏元素，切換元素的 display CSS 屬性
5. v-for: 用于遍歷數(shù)據(jù)渲染元素或模板透硝，如圖中P6為[1,2,3]則會渲染3個P標簽狰闪，內容依次為1，2濒生，3
6. v-on: 用于在元素上綁定事件埋泵，圖中在P標簽上綁定了showP3的點擊事件

關于更多的Vue指令可以查看Vue2.0文檔，地址：https://vuefe.cn/api/#指令

04-

Vue.js技術棧

以上我們講到可以直接在一個html頁面里通過引入Vue.js來直接寫Vue代碼甜攀，但是這樣的方式并不常用秋泄。因為如果我們的項目比較大，項目中會存在很多頁面规阀，一旦每個頁面都引入一個Vue.js或者聲明一個Vue實例恒序，這樣非常不利于后期的維護和代碼的公用，也會存在實例名沖突的情況谁撼，所以我們需要用到Vue提供的技術棧來構建強大的前端項目歧胁。

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

1. vue-cli：Vue的腳手架工具滋饲，用于自動生成Vue項目的目錄及文件。
2. vue-router： Vue提供的前端路由工具喊巍，利用其我們實現(xiàn)頁面的路由控制屠缭，局部刷新及按需加載，構建單頁應用崭参，實現(xiàn)前后端分離呵曹。
3. vuex：Vue提供的狀態(tài)管理工具，用于同一管理我們項目中各種數(shù)據(jù)的交互和重用何暮，存儲我們需要用到數(shù)據(jù)對象奄喂。
4. ES6：Javascript的新版本，ECMAScript6的簡稱海洼。利用ES6我們可以簡化我們的JS代碼跨新，同時利用其提供的強大功能來快速實現(xiàn)JS邏輯。
5. NPM：node.js的包管理工具坏逢，用于同一管理我們前端項目中需要用到的包域帐、插件、工具是整、命令等肖揣，便于開發(fā)和維護。
6. webpack：一款強大的文件打包工具贰盗，可以將我們的前端項目文件同一打包壓縮至js中许饿，并且可以通過vue-loader等加載器實現(xiàn)語法轉化與加載。
7. Babel：一款將ES6代碼轉化為瀏覽器兼容的ES5代碼的插件

利用以上等技術舵盈，我們便可以開始構建我們的Vue項目了陋率。

05-

構建大型應用

在構建我們的中大型Vue項目中，我們主要介紹如何利用vue-cli來自動生成我們項目的前端目錄及文件秽晚，了解Vue中一切皆組件的概念及父子組件的通信問題瓦糟，講解在Vue項目中我們如何使用第三方插件，最后利用webpack來打包及部署我們的項目赴蝇。

06-

vue-cli構建

在使用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項目文件及目錄
3. cd my-project：打開剛剛創(chuàng)建的文件夾
4. npm intall：安裝項目所依賴的包文件
5. npm run dev：利用本地node服務器在瀏覽器中打開并瀏覽項目頁面

這樣我們的一個基于webpack的vue項目目錄就構建好了劲蜻。

07-

單文件組件

在剛剛構建好的vue項目中，我們會發(fā)現(xiàn)一個App.vue和Hello.vue的文件考余，那么像這樣的以.vue后綴結尾的文件便是我們Vue項目中常見的單文件組件先嬉。單文件組件包含了一個功能或模塊的html、js及css楚堤。在.vue文件中疫蔓，我們可以在template標簽中寫html含懊，在script標簽中寫js，在style標簽中寫css衅胀。這樣一個功能或模塊就是一個.vue組件岔乔，對于組件公用和后期的維護也非常便捷。

08-

父子組件通信

那么像這樣在以單文件組件為核心的項目開發(fā)中滚躯，我們一定會想到一個問題雏门，就是.vue父子組件之間是如何交換數(shù)據(jù)來實現(xiàn)通信的呢？在Vue2.0中提供了props來實現(xiàn)父組件向子組件傳遞數(shù)據(jù)哀九，通過$emit來實現(xiàn)子組件向父組件傳遞數(shù)據(jù)剿配。當然如果是較為復雜和普遍的數(shù)據(jù)交互，建議大家使用vuex來同一管理數(shù)據(jù)阅束。詳情請見：https://vuefe.cn/guide/components.html#使用Props傳遞數(shù)據(jù)

09-

插件使用

接下來我們介紹下在基于webpack的vue項目中我們是如何使用插件的，主要有兩種情況：
（一）全局使用
（1）在index.html引入：這樣的方式不推薦使用茄唐，因為存在先后加載順序的問題息裸，有些插件不支持這一方式。
（2）通過webpack配置文件引入：主要通過plugin配置項的webpack.ProvidePlugin()方法實現(xiàn)沪编，不過只適合支持CommonJs規(guī)范并提供一個全局變量的插件呼盆，如jQuery中的$。
（3）通過import + Vue.use()引入：這種方式需要在全局.vue文件中import需要加載的插件蚁廓，然后通過Vue.use('插件變量名')來實現(xiàn)访圃，不過此方法只支持遵循Vue.js插件編寫規(guī)范的插件使用，如vue-resourece相嵌。

（二）單文件使用
（1）通過import直接引入：這種方式可以在需要調用插件的.vue文件中使用腿时，不過需要注意和實例的創(chuàng)建順序問題，或者也可以通過require引入饭宾。
（2）import + components注冊：此方式為Vue組件的使用方式批糟，可以在一個組件中注冊并使用一個子組件。

10-

部署及優(yōu)化

** 當我們搞定整個Vue項目的前端編碼階段后看铆，我們需要對我們的前端項目文件進行部署和優(yōu)化工作徽鼎，主要的幾個方式如下： **

1. 使用webpack的DefinePlugin指定生產(chǎn)環(huán)境：通過plugin中的DefinePlugin配置，我們可以聲明'process.env'屬性為'development'(開發(fā)環(huán)境)或者'production'(生產(chǎn)環(huán)境)弹惦，結合npm配置文件package.json中scripts的命令來切換環(huán)境模式十分方便否淤。
2. 使用UglifyJs自動刪除代碼塊內的警告語句：一般在生產(chǎn)環(huán)境的webpack配置文件中使用，通過new webpack.optimize.UglifyJsPlugin()來進行配置棠隐，刪除警告語句可以縮減文件的體積石抡。
3. 使用Webpack hash處理緩存：當我們需要對發(fā)布到線上的文件進行修改時，重新編譯的文件名如果和之前版本的相同會引起瀏覽器無法識別而加載緩存文件的問題宵荒。這樣我們需要自動的生成帶hash值的文件名來阻止緩存汁雷。詳見：https://segmentfault.com/a/1190000006178770#articleHeader7
4. 使用v-if減少不必要的組件加載：v-if指令其實很有用處净嘀，它可以讓我們項目中暫時不需要的組件不進行渲染，等需要用到的時候在渲染侠讯，比如某個彈窗組件等挖藏。這樣我們可以減少頁面首次加載的時間和文件量。

除了以上幾點的優(yōu)化厢漩，還有很多優(yōu)化選擇膜眠，有興趣的童鞋可以好好地了解下webpack的API文檔，畢竟webpack的功能十分強大溜嗜。

總結

vue是一個有著獨特魅力簡單卻不失優(yōu)雅宵膨，小巧而不發(fā)大匠的框架！