# 插件
## 開發插件
插件通常會為 Vue 添加全局功能。插件的范圍沒有限制——通常是下面幾種：
1. 添加全局方法或屬性，如 [vue-element](https://github.com/vuejs/vue-element)
2. 添加全局資源：指令/過濾器/過渡等，如 [vue-touch](https://github.com/vuejs/vue-touch)
3. 添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。
4. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 [vue-router](https://github.com/vuejs/vue-router)
Vue.js 的插件應當有一個公開方法 `install`。這個方法的第一個參數是 `Vue` 構造器，第二個參數是一個可選的選項對象：
```
MyPlugin.install = function (Vue, options) {
// 1\. 添加全局方法或屬性
Vue.myGlobalMethod = ...
// 2\. 添加全局資源
Vue.directive('my-directive', {})
// 3\. 添加實例方法
Vue.prototype.$myMethod = ...
}
```
## 使用插件
通過 `Vue.use()` 全局方法使用插件：
```
// 調用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
```
也可以傳入一個選項對象：
```
Vue.use(MyPlugin, { someOption: true })
```
一些插件，如 `vue-router`，如果 `Vue` 是全局變量則自動調用 `Vue.use()`。不過在模塊環境中應當始終顯式調用 `Vue.use()`：
```
// 通過 Browserify 或 Webpack 使用 CommonJS 兼容模塊
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了調用此方法
Vue.use(VueRouter)
```
## 已有插件 & 工具
* [vue-router](https://github.com/vuejs/vue-router)：Vue.js 官方路由。與 Vue.js 內核深度整合，讓構建單頁應用易如反掌。
* [vue-resource](https://github.com/vuejs/vue-resource)：通過 XMLHttpRequest 或 JSONP 發起請求并處理響應。
* [vue-async-data](https://github.com/vuejs/vue-async-data)：異步加載數據插件。
* [vue-validator](https://github.com/vuejs/vue-validator)：表單驗證插件。
* [vue-devtools](https://github.com/vuejs/vue-devtools)：Chrome 開發者工具擴展，用于調試 Vue.js 應用。
* [vue-touch](https://github.com/vuejs/vue-touch)：使用 Hammer.js 添加觸摸手勢指令（已過時）。
* [vue-element](https://github.com/vuejs/vue-element)：使用 Vue.js 注冊自定義元素。
* [用戶貢獻的工具](https://github.com/vuejs/vue/wiki/User-Contributed-Components-&-Tools)
- 教程
- 起步
- 概述
- Vue 實例
- 數據綁定語法
- 計算屬性
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 方法與事件處理器
- 表單控件綁定
- 過渡
- 組件
- 深入響應式原理
- 自定義指令
- 自定義過濾器
- 混合
- 插件
- 構建大型應用
- 對比其它框架
- API
- 示例
- Markdown 編輯器 Example
- GitHub 提交 Example
- Firebase + 驗證 Example
- 表格組件 Example
- 樹狀視圖 Example
- SVG 圖形 Example
- 模態組件 Example
- Elastic Header Example
- 自定義指令 Example
- TodoMVC Example
- HackerNews 克隆 Example