扩展 Vue

Mixins

Mixin (混入) 是一种可以在多个 Vue 组件之间灵活复用特性的机制。你可以像写一个普通 Vue 组件的选项对象一样编写一个 mixin：

// mixin.js
module.exports = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// test.js
var myMixin = require('./mixin')
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

更多细节请参见 API。

使用插件进行扩展

通常插件会为 Vue 添加一个全局的功能。

撰写插件

你可以撰写以下几种典型类型的插件：

添加一个或几个全局方法。比如 vue-element
添加一个或几个全局资源：指令、过滤器、动画效果等。比如 vue-touch
通过绑定到 Vue.prototype 的方式添加一些 Vue 实例方法。这里有个约定，就是 Vue 的实例方法应该带有 $ 前缀，这样就不会和用户的数据和方法产生冲突了。

exports.install = function (Vue, options) {
  Vue.myGlobalMethod = ...          // 1
  Vue.directive('my-directive', {}) // 2
  Vue.prototype.$myMethod = ...     // 3
}

使用插件

假设我们使用的构建系统是 CommonJS，则需要作如下调用：

1
2
3

var vueTouch = require('vue-touch')
// use the plugin globally
Vue.use(vueTouch)

你也可以向插件里传递额外的选项：

1
2
3

Vue.use(require('my-plugin'), {
  /* pass in additional options */
})

现有的插件 & 工具

vue-router:
Vue.js 的官方路由程序。和 Vue.js 核心深度整合，分分钟构建单页面应用。
vue-resource: 一个插件，为用 XMLHttpRequest 或 JSONP 生成网络请求、响应提供服务。
vue-async-data: 一个异步读取数据的插件。
vue-validator: 一个表单验证的插件。
vue-devtools：一个用来调试 Vue.js 应用程序的 Chrome 浏览器开发者工具扩展。
vue-touch：添加基于 Hammer.js 的触摸手势的指令。
vue-element: 用 Vue.js 注册 Custom Elements。
用户贡献的工具列表

下一节: 最佳实践与技巧.

教程

扩展 Vue

Mixins

使用插件进行扩展

撰写插件

使用插件

现有的插件 & 工具