相信大家對vue.js這個前端框架有了一定的瞭解。想必也想把Vue急切的運用在項目中，看看它的魅力到底有多大？別急，今天我會滿足大家的想法。 我們一起來看看“Webpack+Vue”的開發模式相比以往老項目(Gulp+jQuery)的開發模式的魅力在哪裡。 一、配置開發環境 1、先安裝Node和We ...
相信大家對vue.js這個前端框架有了一定的瞭解。想必也想把Vue急切的運用在項目中，看看它的魅力到底有多大？別急，今天我會滿足大家的想法。
我們一起來看看“Webpack+Vue”的開發模式相比以往老項目(Gulp+jQuery)的開發模式的魅力在哪裡。
一、配置開發環境
1、先安裝Node和Webpack
2、建立一個文件夾為: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"
}3、安裝所需模塊，運行指令
npm install
註：可能由於網路原因，導致某些包不能下載成功。別擔心，我們可以嘗試把npm的鏡像地址切換成淘寶鏡像。運行如下指令:
npm install -g cnpm --registry=https://registry.npm.taobao.org安裝指令跟npm一樣，只不過前面需要添加一個c。
比如：cnpm install xxxx
二、搭建項目結構
可能在我們以前開發一個項目，所搭建的項目結構如下圖所示:
可是現在的項目基本都是基於前端工程化的，包括的東西也很多(前端路由、包管理、配置文件...)。很顯然，從最開始按照單一資源分類，來劃分目錄結構是不可行的。 於是，又得改造項目目錄結構。可能是這樣的 (僅供參考)
俗話說的好:“工欲善其事必先利其器”。一個合理的項目結構，能體現各模塊的職責與分工，減少成員間的溝通成本，更好的管理項目。
三、正式開發
好了，可能有人會說，你前面扯了很多廢話。都還沒談如何開發呢? 別急大兄弟，心急可吃不了熱豆腐，得慢慢來!
運行我們之前添加好的指令
npm run dev訪問
http://localhost:8188
不出意外，你會看到如下圖一樣:
那麼恭喜你，一個Vue+Webpack的初始化項目已經完成了。不妨趕緊修改下文件:
1、看是否能實現熱載入。
2、父組件傳遞數據到子組件,子組件能否收到。
3、ajax能否正常運行 註:(ajax模塊看下圖)
....
於是，我們很愉快的把項目開發完成。那麼怎麼把項目上線呢?
可以運行以下打包命令
npm run build打包成功後，就行生成一個dist文件夾。然後把這個文件夾放到後端的web容器裡面就行了。
看完文章後，可能有些朋友會有一些疑問:
1、前端頁面之前跳轉是如何是實現的？
答：因為Vue提供了一款叫路由的工具Vue-Router，頁面的切換於跳轉就是靠它實現的。
2、組件間的數據傳遞，跨組件通信有什麼方法呢？或者說幾個組件同時共用一份數據!
答：雖然官方提供了事件匯流排來解決，但我個人建議你可以用Vuex(全局狀態管理)來解決。
3、除了用你的項目腳手架(初始化)，還有其它的腳手架可以直接生成項目嗎？
答：官方提供了Vue-cli的工具，也可以幫你完成項目初始化工作。
寫在最後：Vue+webapck的這種開發模式，相對於老項目。我覺得在最大的好處在於:
1、提升了我們的開發效率(通過webpack可以實現組件按需載入、靜態資源打包合併壓縮...)
2、組件化友好(任何一個組件都是一個獨立的模塊,互不影響)
Vue是一個漸進式的框架，你可以把它當成簡簡單單的模板使用。也可以用作SPA(單頁面應用)，進行前後端分離開發。
還猶豫什麼啊，趕緊上車啊!
本文出處:http://www.234music.cn/
