1. 前言
插件听起来高大上,好难呀,好怕呀,那就干它,越来越喜欢这种感觉
可以自己先通过vue add axios安装插件,来看下安装后的axios文件
2. 概念
插件通常用来为 Vue 添加全局功能。
插件的功能范围没有严格的限制——一般有下面几种：
1.添加全局方法或者 property。如：vue-custom-element
2.添加全局资源：指令/过滤器/过渡等。如 vue-touch
3.通过全局混入来添加一些组件选项。如 vue-router
4.添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5.一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
3. 应用场景
插件可以放到
githubnpm上,供他人使用
use语法
Vue.use( plugin )
参数
{Object | Function} plugin
用法：
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
4. 插件基础结构
Vue.js 的插件应该暴露一个 install 方法。
这个方法的第一个参数是 Vue 构造器，
第二个参数是一个可选的选项对象：
注意这里面还可以混入,因为进行插件编写的时候,通常要在初始化之前做些操作,肯定都在钩子里面进行相关操作
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
5. 插件实例
还是在之前几篇文章标题组件基础上进行修改的
5.1 单独 插件文件 heading.js
一般都是新建 plugins/heading.js
// 插件需要实现 install 方法
const MyPlugin = {
install(Vue,options){
Vue.component("heading", {
props: {
level: {
type: String,
default: "1"
},
title: {
type: String,
default: ""
},
icon: {
type: String
}
},
render(h) {
// 子节点数组
let children = []
// icon处理
if (this.icon) {
children.push(h(
"svg",
{ class: "icon" },
[h("use", {
attrs: { 'xlink:href': '#icon-' + this.icon }
})]
))
}
children = children.concat(this.$slots.default)
const vnode = h("h" + this.level,
{ attrs: { title: this.title } },
children
)
return vnode
}
})
}
}
// 确定是在浏览器,而且挂载了Vue对象
if(typeof window !== "undefind" && window.Vue){
// 使用插件 Vue.use()
window.Vue.use(MyPlugin)
}
6. 使用
- 引用
- 写标签
<body>
<div id="app">
<heading>默认</heading>
<heading level="3" title="标题" icon="xihongshi">洋shou? ?番茄? 西红柿</heading>
</heading>
<svg class="icon">
<use xlink:href="#icon-xihongshi" />
</svg>
</div>
<script src="./vue.js"></script>
<script src="./plugins/heading.js"></script>
<script>
new Vue({
el: "#app",
components: {
}
})
</script>
</body>
7.脚手架项目使用
- main.js引入
import './plugins/axios'
import './plugins/heading'
- 组件内使用
<heading>默认</heading>
<heading level="3" title="标题" icon="xihongshi">洋shou? ?番茄? 西红柿</heading>
8.效果一样
1.png
网友评论