vue开发插件上传npm

插件通常用来为 Vue 添加全局功能，一般有下面几种：

1. 添加全局方法或者属性。
2. 添加全局资源：指令/过滤器/过渡等。
3. 通过全局混入来添加一些组件选项。
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。

更加详细说明查看官网文档 https://cn.vuejs.org/v2/guide...

开发插件

1.简单的插件
创建一个countdown.vue

创建一个index.js

import countDown from './countdown';

//暴露一个 `install` 方法。这个方法的第一个参数是 `Vue` 构造器，第二个参数是一个可选的选项对象
countDown.install = function (Vue) {
  Vue.component(countDown.name, countDown);
};

export default countDown;

目录结构为：

在main.js中引入，页面中就可以使用

import countDown from './components/global/index';
//通过全局方法 `Vue.use()` 使用插件
Vue.use(countDown);

2.添加全局方法或属性

countDown.install = function (Vue) {
  Vue.prototype.$msg = '全局的属性';
  Vue.prototype.$myMethod = function () {
    console.log('全局定义的方法');
  }
  Vue.component(countDown.name, countDown);
};

3.添加全局资源

countDown.install = function (Vue) {
  //全局自定义指令
  Vue.directive('focus', {
    //当节点插入的时候
    inserted: function (el) {
      el.focus();
    }
  })
  Vue.component(countDown.name, countDown);
};

4.注入组件选项

countDown.install = function (Vue) {
  //全局混入
  Vue.mixin({
    created() {
      console.log('i am jello')
    },
  })
  Vue.component(countDown.name, countDown);
};

开发插件进阶

创建一个VsButton.vue

创建VsMsg.vue

创建一个index.js

import VsMsg from '../plugins/msg/VsMsg';
import VsButton from '../plugins/button/VsButton';

let plugin = {};

plugin.install = function (Vue) {
  Vue.component(VsMsg.name, VsMsg);
  Vue.component(VsButton.name, VsButton);
}

export default plugin;

每次使用都需要import和Vue.component()，可采用webpack的require.context()，实现自动导入和注册组件。

1）require.context函数接受三个参数:

• directory {String} -读取文件的路径
• useSubdirectories {Boolean} -是否遍历文件的子目录
• regExp {RegExp} -匹配文件的正则

2）require.context函数执行后返回的是一个函数,并且这个函数有3个属性

• resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
• keys {Function} -返回匹配成功模块的名字组成的数组
• id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept

const requireComponent = require.context('./', true, /\.vue$/); //获取一个特定的上下文,主要用来实现自动化导入模块

const install = (Vue) => { 

  if (install.installed) return;
  install.installed;
  requireComponent.keys().forEach(fileName => {
    //第i个组件
    const config = requireComponent(fileName);
    //组件名
    const componentName = config.default.name;

    Vue.component(componentName, config.default || config);
  })

}

//检测环境
if (typeof window !== undefined && window.Vue) {
  install(Vue);
}

export default install;

在main.js中引入

import index from "./components/plugins/index.js";
Vue.use(index);

页面中使用插件

实现效果如下：