[toc]
Vue.js 在設計思想上追求的是盡可能的靈活。它本身只是一個界面庫，并不強制使用哪種架構。這對于快速原型開發很有用，但是對于經驗欠缺的開發者，用 Vue.js 構建大型應用可能會是一個挑戰。在這里我會針對在使用 Vue.js 時如何組織大型的項目提供一些略帶個人偏好的建議。
## 模塊化
雖然獨立構建的 Vue.js 可以被用作一個全局變量，但是它通常更適合配合一個模塊化構建系統使用，這可以讓你更好地組織代碼。我的建議是用 CommonJS 模塊格式編寫源代碼 (這是 Node.js 使用的格式，也是 Vue.js 源代碼使用的格式)，并通過 Webpack 或 Browserify 把它們打包起來。
更重要的是，Webpack 和 Browserify 不僅僅是模塊打包工具。兩者都提供源碼轉換的 API，允許你將你的源碼用其他的預處理程序進行轉換。例如，你可以用 babel-loader 或 babelify 直接在你的模塊中使用 ES6/7 的語法。
## 單文件組件
在一個典型的 Vue.js 項目里，我們會希望將我們的代碼拆分成許多的組件，并且在一個組件里把它所包含的 CSS 樣式、HTML 模板、JavaScript 邏輯封裝在一起。就像上面提到的那樣，借助 Webpack 或 Browserify，并配以相應的源碼轉換插件，我們就可以這樣編寫組件了：
如果你喜歡預處理器，你甚至可以這樣寫：
你可以用 Webpack + vue-loader 或 Browserify + vueify 來編譯這些單文件的 Vue 組件。如果你同時使用預處理器，則推薦用 Webpack 來進行構建，因為 Webpack 的插件 API 提供了更好的文件依賴追蹤和緩存支持。
在 GitHub 上可以找到上面所描述的工作流的代碼示例：
- Webpack + vue-loader
- Browserify + vueify
## 路由
> 官方路由模塊 vue-router 正在活躍開發中，即將發布。
你可以手動監聽 hashchange 時間并利用一個動態的 <component> 來實現一些基本的路由邏輯。
**示例：**
~~~
<div id="app">
<component is="{{currentView}}"></component>
</div>```
```Vue.component('home', { /* ... */ })
Vue.component('page1', { /* ... */ })
var app = new Vue({
el: '#app',
data: {
currentView: 'home'
}
})
// Switching pages in your route handler:
app.currentView = 'page1'
~~~
利用這種機制我們可以很容易地接入獨立的路由庫，比如 Page.js 或是 Director。
## 服務器通信
所有的 Vue 實例都可以直接通過 JSON.stringify() 序列化得到它們原始的 $data，并不需要做任何額外的工作。社區已經貢獻了 vue-resource 插件，提供了與 RESTful API 協作的功能。你也可以使用任何你喜歡的 Ajax 組件，比如 $.ajax 或是 SuperAgent。Vue.js 也可以和諸如 Firebase 和 Parse 這樣的 BaaS 服務完美配合。
## 單元測試
任何兼容 CommonJS 構建系統的測試工具都可以。建議使用 Karma 配合其 CommonJS 預處理插件 對你的代碼進行模塊化測試。
最佳實踐是暴露出模塊內的原始選項/函數。參考如下示例：
~~~
// my-component.js
module.exports = {
template: '<span>{{msg}}</span>',
data: function () {
return {
msg: 'hello!'
}
}
created: function () {
console.log('my-component created!')
}
}
~~~
你可以在你的入口模塊中如下使用這個文件：
~~~
// main.js
var Vue = require('vue')
var app = new Vue({
el: '#app',
data: { /* ... */ },
components: {
'my-component': require('./my-component')
}
})
~~~
然后你可以如下測試該模塊：
~~~
// Some Jasmine 2.0 tests
describe('my-component', function () {
// require source module
var myComponent = require('../src/my-component')
it('should have a created hook', function () {
expect(typeof myComponent.created).toBe('function')
})
it('should set correct default data', function () {
expect(typeof myComponent.data).toBe('function')
var defaultData = myComponent.data()
expect(defaultData.message).toBe('hello!')
})
})
~~~
> 因為 Vue.js 的指令異步響應數據的更新，當你需要在數據更新后斷言 DOM 的狀態時，你需要在一個 Vue.nextTick 回調里做這件事。
## 發布至生產環境
為了縮小體積，最小化后的獨立版 Vue.js 已去除所有的警告信息，但當你用像 Browserify、Webpack 這樣的工具構建 Vue.js 應用時，并沒有一個明顯的辦法來去除這些警告。
從 0.12.8 開始，可以采用如下的方式配置你的構建工具來優化最后生成的代碼體積：
### Webpack
使用 Webpack 的 DefinePlugin 來定義生產環境參數，這樣警告相關的代碼會變得永遠不會被執行，從而在 UglifyJS 壓縮的時候會被自動丟掉。比如：
~~~
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
~~~
### Browserify
只需要在打包命令中把 NODE_ENV 設置成 "production" 即可。Vue 會自動應用 envify 轉換并跳過警告處理。比如：
~~~
NODE_ENV=production browserify -e main.js | uglifyjs -c -m > build.js
~~~
## 應用示例
Vue.js Hackernews Clone 是一個應用的例子，它用 Webpack + vue-loader 代碼組織、Director.js 做路由、HackerNews 官方的 Firebase API 為后端。這不算什么特別大的應用，但它結合并展示了本頁面討論到的各方面概念。
