pasangkan


Direktori fungsi kepada Vue. Tiada sekatan ketat pada skop fungsi pemalam - secara amnya terdapat jenis berikut:

 1. Tambahkan kaedah atau atribut global. Seperti:

vue-custom-element
 2. Tambahkan sumber global: arahan/penapis/peralihan, dsb. Seperti

vue-touch
  •  3. Tambahkan beberapa pilihan komponen melalui pencampuran global. Seperti vue-router

  •  4. Tambahkan kaedah contoh Vue dengan menambahkannya pada Vue.prototype.
  •  5. Perpustakaan yang menyediakan API sendiri dan satu atau lebih fungsi yang dinyatakan di atas. Seperti vue-router

Gunakan pemalam


Gunakan pemalam melalui kaedah global Vue.use(). Ia perlu dilakukan sebelum anda memanggil Vue() baharu untuk memulakan aplikasi:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
  // ...组件选项
})

Anda juga boleh memasukkan objek pilihan pilihan:

Vue.use(MyPlugin, { someOption: true })
Vue.use secara automatik akan Menghalang berbilang pendaftaran pemalam yang sama, dalam hal ini pemalam hanya akan didaftarkan sekali walaupun dipanggil beberapa kali.

Sesetengah pemalam yang disediakan secara rasmi oleh Vue.js (seperti vue-router) akan secara automatik memanggil Vue.use() apabila mengesan bahawa Vue ialah pembolehubah global yang boleh diakses . Walau bagaimanapun dalam persekitaran modul seperti CommonJS anda harus sentiasa memanggil Vue.use() secara eksplisit:

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了调用此方法
Vue.use(VueRouter)
awesome-vue ialah koleksi pemalam dan perpustakaan yang disumbangkan oleh komuniti.

Bangunkan pemalam


Vue. js Plugins harus mendedahkan kaedah install. Parameter pertama kaedah ini ialah pembina Vue, dan parameter kedua ialah objek pilihan pilihan: Vue.prototype 上实现。

 5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router


使用插件


通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

也可以传入一个可选的选项对象:

rrreee

Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中,你应该始终显式地调用 Vue.use()

rrreee

awesome-vue 集合了大量由社区贡献的插件和库。


开发插件


Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue
rrreee