vue插件开发上传npm

vue插件开发，然后在项目中使用npm install 插件名 安装使用!

一、项目结构

常规的vueCli创建的项目 vue create plugin,创建一个lib文件夹，下面放了一个Button插件，具体结构如下图：

二、插件开发

一个普通的组件，内部代码极其简单。

// lib/Button/lib/index.vue
<template>
  <button>我是插件btn</button>
</template>

<script>
export default {
  name: "VBtn"
};
</script>

需要注意lib/Button/lib/index.js路径下这个install方法比较重要，我们在main.js中引入插件之后都会执行 Vue.use() 这个方法去安装插件，方便全局都可以使用它。

// lib/Button/lib/index.js
import Btn from "./index.vue";

const myBtn = {
  install(Vue, opt = {}) {
    Vue.component("myBtn", Btn);
  }
};
export default myBtn;

此外还需要注意的是，lib/Button/index.js路径下有一个引入和抛出代码，其作用是我们在import Buttom from "Button"的时候去查找插件路径

module.exports = require("./lib");

测试插件

以上都具备之后我们可以把Button文件夹拷贝到node_modules中，使用示例：

// main.js中引入
import Vue from "vue";
import App from "./App.vue";
import myBtn from "Button";
Vue.use(myBtn);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

任何.vue文件中测试插件是不有效，使用示例：

<template>
  <div class="hello">
    <my-btn></my-btn>
  </div>
</template>

三、发布npm

上面的Button插件只能手动拷贝到node_modules文件夹中，不方便他人使用，最终的目的是上传到npm上，在使用的时候使用npm install Button方法安装，然后调用Vue.use(Button)注入到Vue中，全局使用这个Button插件。

在上传npm之前需要注册npm网站账号，邮箱一定要做验证否则上传插件包会失败！接下来是步骤：

第一步：控制台cd src/lib/Button,进入插件内部；
第二步：执行npm init根据提示填入信息，其中 name就是包的名称，也是npm install 插件的名程，这个名称不能和npm网站上已有的包名称重复，可以在npm上去搜索是不是名称重复；
第三步：npm login根据提示填入账号和密码；
第四步：npm publish把插件发布到npm上；

至此已经完成所有流程。