相信大家對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/