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.效果一样
