使用插件
全局方法
// 调用 new Vue() 启动应用之前完成
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
//传参
Vue.use(MyPlugin, { someOption: true })
开发插件
Vue.js 的插件应该暴露一个 install 方法。
这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
MyPlugin.install = function (Vue, options) {}
1. 添加全局属性和方法
Vue.myGlobalMethod = function () {
// 逻辑...
}
在外面通过Vue实例调用，如
Vue.myGlobalMethod() 2. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
在组件里调用, 如
this.$myMethod()3. 通过全局混入来添加一些组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
混入对象的钩子在组件自身钩子之前调用
// 定义一个混入对象
var myMixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
},
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 使用混入
new Vue({
mixins: [myMixin]
})
4. 添加全局资源：指令/过滤器/过渡等
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//组件内定义
directives: {
focus: {}
}
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus="" />
过滤器
全局定义过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
组件内定义
filters: {
capitalize: function (value) {
}
}
使用场景
{{ message | capitalize }}
使用配置文件，按需加载
*.config.js：vant的按需加载配置
import { Toast, Button} from 'vant'
const components = { Toast, Button}
const componentsHandler = {
install(Vue){
Object.keys(components).forEach(key => Vue.use(components[key]))
}
}
export default componentsHandler
按需加载的常用插件
babel-plugin-import：按需加载
参考: