前言

在對著產品高舉中指怒發心中之憤后，真正能夠解決問題的是自身上的改變，有句話說的好：你雖然改變不了全世界，但是你有機會改變你自己。秉承著“不聽老人言，吃虧在眼前”的優良作風，我還是決定玩火自焚。

問題所在

之前的項目總結為以下內容：

1、AMD模塊規范開發，使用requirejs實現，使用rjs打包，最終導致的結果是，輸出的項目臃腫，腫的就像一坨狗不理……不忍直視

2、使用gulp進行打包，這一點貌似沒有可吐槽的地方，畢竟都是被grunt折磨過來的……

3、數據的渲染使用模板引擎，這就意味著你要手動管理DOM，這樣，你的業務代碼參雜著你的數據處理、DOM管理，滿屏幕的毛線……

4、模塊化不足，雖然使用require進行了模塊管理，但是大部分業務邏輯還是充斥在一個文件里，這與最近流行的組件化概念冰火不容，拒絕落后……

5、諸如 擴展性 、 維護性 我想早已不言而喻，不需贅述，再述就真TM是累贅了。

新框架要解決的問題：

1、要使構建輸出的項目像你鄰家小妹妹一樣、瘦的皮包骨。（也許是營養不良）

2、要實現真正的模塊化、組件化的開發方式，真正去解決維護難、擴展難的問題。（從此不怕產品汪）

3、業務邏輯專注數據處理，手動管理DOM的年代就像……像什么呢？（畢竟成人用品也越來越自動化了）

4、等等…….（其實好處無需贅述，來，往下看）

為了達成以上目標，我們探討一下解決方案：

1、老項目的構建輸出為什么臃腫？

答：因為使用的是require的rjs進行構建打包的，了解rjs的都知道，它會把項目所有依賴都打包在一個文件里，如果項目中有很多頁面依賴這個模塊，那么rjs并不會把這個模塊提取出來作為公共模塊，所以就會有很多復制性的內容，所以項目自然臃腫。

解決方案：使用webpack配合相應的loader，來完成模塊加載和構建的工作。

2、老項目為什么模塊化的不足？

答：老項目的模塊化，僅僅體現在js層面，解決了模塊引用的問題，但在開發方式上，依然可以看做是過程式的，這樣的結果就導致了項目的難擴展和難維護，讓開發人員在與產品汪的對峙中，并不從容。

解決方案：Vue.js能夠很好的解決組件化的問題，配合 Vue.js 官方提供的 vue-loader 能夠很好的結合webpack做組件化的開發架構。

3、如何避免手動管理DOM？

答：如果你在做數據展示這一塊的開發工作，相信你一定體會頗深，發送http請求到服務端，拿到返回的數據后手動渲染DOM至頁面，這是最原始的開發方式，無非再加一個模板引擎之類的，但最終還是避免不了手動渲染，如果頁面邏輯復雜，比如給你來一個翻頁的功能，再來一個篩選項，估計你會覺得世界并不那么美好。

解決方案：MVVM模式能夠很好的解決這個問題，而Vue.js的核心也是MVVM。

webpack

你肯定聽說過webpack，如果直接對你描述什么是webpack你可能感受不到他的好處，那么在這之前，我相信你肯定使用過gulp或者grunt，如果你沒使用過也可以，至少你要聽說過并且知道gulp和grunt是干什么的，假如這個你還不清楚，那么你并不是一個合格的前端開發人員，這篇文章也不適合你，你可以從基礎的地方慢慢學起。

gulp和grunt對于每一個前端開發人員應該是不陌生的，它們為前端提供了自動化構建的能力，并且有自己的生態圈，有很多插件，使得我們告別刀耕火種的時代，但是它們并沒有解決模塊加載的問題，比如我們之前的項目是使用gulp構建的，但是模塊化得工作還是要靠require和rjs來完成，而gulp除了完成一些其他任務之外，就變成了幫助我們免除手動執行命令的工具了，別無它用。

而webpack就不同了，webpack的哲學是一切皆是模塊，無論是js/css/sass/img/coffeejs/ttf….等等，webpack可以使用自定義的loader去把一切資源當做模塊加載，這樣就解決了模塊依賴的問題，同時，利用插件還可以對項目進行優化，由于模塊的加載和項目的構建優化都是通過webpack一個”人“來解決的，所以模塊的加載和項目的構建優化并不是無機分離的，而是有機的結合在一起的，是一個組合的過程，這使得webpack在這方面能夠完成的更出色，這也是webpack的優勢所在。

如果你看不懂上面的描述，沒關系，你只需要知道一下幾點：

1、過去使用require和rjs等進行模塊加載的方式，可以替換為webpack提供的指定loader去完成，你也可以自己開發加載特定資源的loader。

2、過去使用gulp和grunt完成項目構建優化的方式，可以替換成webpack提供的插件和特定的配置去完成。

3、由于模塊的加載和項目的構建優化有機的結合，所以webpack能夠更好的完成這項工作

4、并不是說有了webpack就淘汰的gulp等，有些特定的任務，還是要使用gulp去自定義完成的。但是不保證webpack的未來發展趨勢會怎么樣。

Vue.js

Vue.js是一個MVVM模式的框架，如果讀者有angular經驗，一定能夠很快入門Vue的，那么問題來了，為什么使用Vue而不用angular，

首先，Vue的體積小，輕量在移動端開發始終是一個不可忽略的話題，其次，Vue在實現上與angular有本質的區別，讀者可以通過下面兩個鏈接來了解：

1、Vue的變化追蹤和計算屬性的區別等

2、Vue 與 angular 及 react 等框架的對比

3、第三點就是Vue提供了webpack的loader ―-> [vue-loader]，使用它可以讓項目的組件化思想更加清晰

綜上所述，這就是選用Vue的原因

npm 和 nodejs

npm 的全稱是 nodejs包管理，現在越來越多的項目(包)都可以通過npm來安裝管理，nodejs是js運行在服務器端的平臺，它使得js的能力進一步提高，我們還要使用nodejs配合 webpack 來完成熱加載的功能。所以讀者最好有nodejs的開發經驗，如果有express的經驗更好。

讓我們一步一步從零搭建這個項目

首先新建一個目錄，名為 myProject ，這是我們的項目目錄。然后執行一些基本的步驟，比如 npm init 命令，在我們的項目中生成 package.json 文件，這幾乎是必選的，因為我們的項目要有很多依賴，都是通過npm來管理的，而npm對于我們項目的管理，則是通過package.json文件：

 npm init

執行npm init之后，會提示你填寫一些項目的信息，一直回車默認就好了，或者直接執行 npm init -y 直接跳過詢問步驟

然后我們新建一個叫做 app 的目錄，這個是我們頁面模塊的目錄，再在app目錄下建立一個index目錄，假設這個是首頁模塊的目錄，然后再在index目錄下建立一個 index.html 文件和 index.js 文件，分別是首頁入口html文件和主js文件，然后再在index目錄下建立一個components目錄，這個目錄用作存放首頁組件模塊的目錄，因為我們最終要實現組件化開發。這樣，當你完成上面的步驟后，你的項目看上去應該是這樣的：

接下來通過npm安裝項目依賴項：

 npm install/ webpack webpack-dev-server/ vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api/ babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015/ babel-runtime@5/ --save-devnpm install vue --save

這個時候，你的package.json文件看起來應該是這樣的：

 "devDependencies": { "babel-core": "^6.3.17", "babel-loader": "^6.2.0", "babel-plugin-transform-runtime": "^6.3.13", "babel-preset-es2015": "^6.3.13", "babel-runtime": "^5.8.34", "css-loader": "^0.23.0", "vue-hot-reload-api": "^1.2.2", "vue-html-loader": "^1.0.0", "vue-style-loader": "^1.0.0", "vue-loader": "^7.2.0", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0" }, "dependencies": { "vue": "^1.0.13" },

我們安裝了 babel 一系列包，用來解析ES6語法，因為我們使用ES6來開發項目，如果你不了解ES6語法，建議你看一看阮老師的教程，然后我們安裝了一些loader包，比如css-loader/vue-loader等等，因為webpack是使用這些指定的loader去加載指定的文件的。

另外我們還使用 npm install vue