前端開發之走進Vue.js

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

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

　　Vue.js簡介

　　

 

　　Vue.js簡介

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

　　

 

　　數據模型

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

　　當View層的視圖發生改變時，Vue會通過DOM Listeners來監聽并改變Model層的數據。相反，當Model層的數據發生改變時，其也會通過Data Bingings來監聽并改變View層的展示。這樣便實現了一個雙向數據綁定的功能，也是Vue.js數據驅動的原理所在。

　　Vue實例

　　

 

　　Vue實例

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

　　(1)el表明我們的Vue需要操作哪一個元素下的區域，'#demo'表示操作id為demo的元素下區域。

　　(2)data表示Vue 實例的數據對象，data 的屬性能夠響應數據的變化。

　　(3)created表示實例生命周期中創建完成的那一步，當實例已經創建完成之后將調用其方法。

　　Vue常用指令

　　

 

　　Vue常用指令

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

　　(1)v-text: 用于更新綁定元素中的內容，類似于jQuery的text()方法

　　(2)v-html: 用于更新綁定元素中的html內容，類似于jQuery的html()方法

　　(3)v-if: 用于根據表達式的值的真假條件渲染元素，如果上圖P3為false則不會渲染P標簽

　　(4)v-show: 用于根據表達式的值的真假條件顯示隱藏元素，切換元素的 display CSS 屬性

　　(5)v-for: 用于遍歷數據渲染元素或模板，如圖中P6為[1,2,3]則會渲染3個P標簽，內容依次為1，2，3

　　(6)v-on: 用于在元素上綁定事件，圖中在P標簽上綁定了showP3的點擊事件

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

　　Vue.js技術棧

　　

 

　　Vue.js技術棧

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

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

　　(1)vue-cli：Vue的腳手架工具，用于自動生成Vue項目的目錄及文件。

　　(2)vue-router： Vue提供的前端路由工具，利用其我們實現頁面的路由控制，局部刷新及按需加載，構建單頁應用，實現前后端分離。

　　(3)vuex：Vue提供的狀態管理工具，用于同一管理我們項目中各種數據的交互和重用，存儲我們需要用到數據對象。

　　(4)ES6：Javascript的新版本，ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS代碼，同時利用其提供的強大功能來快速實現JS邏輯。

　　(5)NPM：node.js的包管理工具，用于同一管理我們前端項目中需要用到的包、插件、工具、命令等，便于開發和維護。

　　(6)webpack：一款強大的文件打包工具，可以將我們的前端項目文件同一打包壓縮至js中，并且可以通過vue-loader等加載器實現語法轉化與加載。

　　(7)Babel：一款將ES6代碼轉化為瀏覽器兼容的ES5代碼的插件

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

　　構建大型應用

　　

 

　　構建大型應用

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

　　vue-cli構建

　　

 

　　vue-cli構建

　　在使用vue-cli之前我們需要安裝node.js，利用其提供的npm命令來安裝vue-cli。安裝node.js只需去其官網下載軟件并安裝即可，地址為：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：打開剛剛創建的文件夾

　　(4)npm intall：安裝項目所依賴的包文件

　　(5)npm run dev：利用本地node服務器在瀏覽器中打開并瀏覽項目頁面

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

　　單文件組件

　　

 

　　單文件組件

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

　　父子組件通信

　　

 

　　父子組件通信

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

　　插件使用

　　插件使用

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

　　(一)全局使用

　　(1)在index.html引入：這樣的方式不推薦使用，因為存在先后加載順序的問題，有些插件不支持這一方式。

　　(2)通過webpack配置文件引入：主要通過plugin配置項的webpack.ProvidePlugin()方法實現，不過只適合支持CommonJs規范并提供一個全局變量的插件，如jQuery中的$。

　　(3)通過import + Vue.use()引入：這種方式需要在全局.vue文件中import需要加載的插件，然后通過Vue.use('插件變量名')來實現，不過此方法只支持遵循Vue.js插件編寫規范的插件使用，如vue-resourece。

　　(二)單文件使用

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

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

　　部署及優化

　　

 

　　部署及優化

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

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

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

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

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

　　除了以上幾點的優化，還有很多優化選擇，有興趣的童鞋可以好好地了解下webpack的API文檔，畢竟webpack的功能十分強大。

　　數據驅動實例

　　

 

　　數據驅動實例

　　這是我之前利用Vue.js數據驅動的原理寫的一個拼圖游戲，希望能夠供大家進一步了解Vue數據驅動的理念。

　　演示地址：拼圖游戲(https://luozhihao.github.io/vue-puzzle/index.html#!/)

　　代碼地址：拼圖代碼(https://github.com/luozhihao/vue-puzzle/blob/master/src/App.vue)

　　總結

　　本文以PPT圖片附加文字介紹的形式簡單介紹了Vue.js的知識點及開發流程，并將前端自動化、組件化、工程化的理念貫穿其中，由淺入深地闡述了Vue.js“簡單卻不失優雅，小巧而不發大匠”的獨特魅力。