vue插件发布到npm上

在项目的根目录创建plugins文件夹，里面放各种组件和入口文件index.js；
在Vue组件中一定要提供name属性；

在index.js 中

/* eslint-disable */
/**
 * 动态引入文件
 * 参数1：引入文件的路径
 * 参数2：是否查找子文件
 * 参数3：匹配以.vue结尾的文件
 */
const requireComponent = require.context('./',true,/\.vue$/);

const install = function(Vue){
    if (install.installed ) return
    install.installed
    //requireComponent.keys() 所有符合条件的文件路径组成的数组
    requireComponent.keys().forEach(path => {
        //循环引入然后注册组件
        const config = requireComponent(path)
        Vue.component(config.default.name ,config.default);
    });

}


//确保是正常环境
if(typeof window !== undefined && window.Vue){
    install(window.Vue)
}
//导出的对像一定有个install 方法
export default {
    install
}

在main.js中

import plugins from './plugins/index.js'
Vue.use(plugins)

在组件中使用
直接使用组件的名称name使用即可

<czf-btn></czf-btn>

将插件发布到npm上
在package.json中

"name": "vue-npm-package-guobiinfen",
  "version": "0.1.1",
  "private": false,
  "description": "我的第一个插件",
  "license": "MIT",
  "main": "lib/vue-npm-package-guobinfen.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib":"vue-cli-service build --target lib --name vue-npm-package-guobinfen --dest lib src/plugins/index.js"
  },

scripts lib需要自己配

在终端中输入

npm login

提示输入 Username Password Emai 等（你的npm账号）

npm publish 

发布插件

然后别人就可以下载你的插件和使用你的插件了

在这里插入代码片

npm i vue-npm-package-guobiinfen

在main.js 中

import aaa from "vue-npm-package-guobiinfen";
Vue.use(aaa);

然后在页面中就可以使用了；