Vue.js前端MVVM框架實戰篇

相信你們對vue.js這個前端框架有了必定的瞭解。想必也想把Vue急切的運用在項目中，看看它的魅力到底有多大？別急，今天我會知足你們的想法。

咱們一塊兒來看看「Webpack+Vue」的開發模式相比以往老項目(Gulp+jQuery)的開發模式的魅力在哪裏。

1、配置開發環境

  一、先安裝Node和Webpack

  二、創建一個文件夾爲:Vue-project，而後初始化生成package.json。運行如下指令:

npm init

 初始化完成後，添加項目開發所依賴的包

"dependencies": { "vue": "^2.2.2", "vue-router": "^2.3.0", "vue-template-compiler": "^2.2.2" }, "devDependencies": { "axios": "^0.15.3", "babel": "^6.3.13", "babel-core": "^6.3.21", "babel-loader": "^6.2.0", "babel-plugin-component": "^0.4.1", "babel-preset-es2015": "^6.3.13", "babel-preset-stage-2": "^6.22.0", "babel-runtime": "^5.8.34", "clean-webpack-plugin": "^0.1.9", "cross-env": "^1.0.6", "css-loader": "^0.16.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.17.0", "moment": "^2.15.1", "node-sass": "^4.5.0", "sass-loader": "^3.2.3", "style-loader": "^0.12.3", "url-loader": "^0.5.6", "vue-loader": "^11.1.4", "vue-hot-reload-api": "^2.0.6", "webpack": "^1.12.0", "webpack-dev-server": "^1.14.0" }

  三、安裝所需模塊，運行指令

npm install

 

   注：可能因爲網絡緣由，致使某些包不能下載成功。別擔憂，咱們能夠嘗試把npm的鏡像地址切換成淘寶鏡像。運行以下指令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

   安裝指令跟npm同樣，只不過前面須要添加一個c。

好比：cnpm install xxxx

 

2、搭建項目結構

   可能在咱們之前開發一個項目，所搭建的項目結構以下圖所示:

   

 

   但是如今的項目基本都是基於前端工程化的，包括的東西也不少(前端路由、包管理、配置文件...)。很顯然，從最開始按照單一資源分類，來劃分目錄結構是不可行的。 因而，又得改造項目目錄結構。多是這樣的 (僅供參考)

  

 

   俗話說的好:「工欲善其事必先利其器」。一個合理的項目結構，能體現各模塊的職責與分工，減小成員間的溝通成本，更好的管理項目。 

   

 

3、正式開發

   好了，可能有人會說，你前面扯了不少廢話。都還沒談如何開發呢? 別急大兄弟，心急可吃不了熱豆腐，得慢慢來! 

   運行咱們以前添加好的指令

npm run dev

   訪問

http://localhost:8188

 

   不出意外，你會看到以下圖同樣:

   

 

   那麼恭喜你，一個Vue+Webpack的初始化項目已經完成了。不妨趕忙修改下文件:

   一、看是否能實現熱加載。

   二、父組件傳遞數據到子組件,子組件可否收到。

   三、ajax可否正常運行  注:(ajax模塊看下圖)

   ....

   

 

   因而，咱們很愉快的把項目開發完成。那麼怎麼把項目上線呢?

   能夠運行如下打包命令

npm run build

  打包成功後，就行生成一個dist文件夾。而後把這個文件夾放到後端的web容器裏面就好了。 

  看完文章後，可能有些朋友會有一些疑問:

   一、前端頁面以前跳轉是如何是實現的？

   答：由於Vue提供了一款叫路由的工具Vue-Router，頁面的切換於跳轉就是靠它實現的。

   二、組件間的數據傳遞，跨組件通訊有什麼方法呢？或者說幾個組件同時共享一份數據!

   答：雖然官方提供了事件總線來解決，但我我的建議你能夠用Vuex(全局狀態管理)來解決。

   三、除了用你的項目腳手架(初始化)，還有其它的腳手架能夠直接生成項目嗎？

   答：官方提供了Vue-cli的工具，也能夠幫你完成項目初始化工做。 

 

寫在最後：Vue+webapck的這種開發模式，相對於老項目。我以爲在最大的好處在於:

   一、提高了咱們的開發效率(經過webpack能夠實現組件按需加載、靜態資源打包合併壓縮...)

   二、組件化友好(任何一個組件都是一個獨立的模塊,互不影響)

Vue是一個漸進式的框架，你能夠把它當成簡簡單單的模板使用。也能夠用做SPA(單頁面應用)，進行先後端分離開發。

   還猶豫什麼啊，趕忙上車啊!

本文出處:http://www.234music.cn/