这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

前面写了封装button组件、dialog组件、input组件、switch组件、radio组件、radioGroup组件、form组件和formItem组件，有需要的童鞋请冲~~

这篇来写下如何封装成vue插件~~~

一、整理包内容，修改入口文件

新建packages文件夹放入所有组件以及fonts文件夹。添加vue.config.js文件，修改入口文件，扩展webpack配置，使package加入编译：

const path = require("path");
module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  },
  chainWebpack: config => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "package"))
      .end()
      .use("label")
      .loader("babel-loader")
      .tap(options => {
        return options;
      });
  }
};

二、暴露install方法

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue构造器。
如果使用Vue.use注册插件，则会调用install方法注册所有组件。
为了支持window环境下用户不用手动使用Vue.use()来注册插件,先帮用户调用install方法。

在packages文件夹中新建index.js来暴露install方法:

import Button from "./Button.vue";
import Dialog from "./Dialog.vue";
import Input from "./Input.vue";
import Switch from "./Switch.vue";
import Form from "./Form.vue";
import FormItem from "./FormItem.vue";
import "./fonts/iconfont.css";
// 出错组件列表
const components = [Button, Dialog, Input, Switch, Form, FormItem];

const install = function(Vue) {
  // 全局注册所有组件
  components.forEach(item => {
    Vue.component(item.name, item);
  });
};
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}

export default install;

三、测试组件

1.在examples/main.js中使用组件库：

import ZhUI from "../packages";
Vue.use(ZhUI);

examples文件夹下新建test文件夹放置测试组件，App.vue中使用测试组件即可。

四、打包成库

根目录下的package.json文件添加命令：

"scripts": {
    "lib": "vue-cli-service build --target lib packages/index.js"
}

执行命令行：

npm run lib

五、发布到npm上

1.修改package.json文件

将package.json文件中的private字段改为false,npm包不允许是私有的。
添加main字段，用户安装后没人使用该字段的文件。
添加author字段，署名

"private": false,
  "main": "dist/zh-ui.umd.min.js",
  "author": {
    "name": "鸡血园地"
  }
},

2.添加.npmignore文件

添加.npmignore文件，忽略不需要上传到npm上的文件

#忽略目录
src/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

3.将淘宝源切换到npm源

方法一：直接改

npm config set registry=http://registry.npmjs.org

方法二: 安装nrm修改

cnpm i nrm -g
nrm ls

显示如下：

执行以下命令切换到npm源：

nrm use npm

4.登录npm

如果没有npm账号的，先去官网注册下再过来登录。登录npm:

npm login

填上用户名、密码、邮箱即可。

发布：

npm publish

注意：

如果组件库的名字与别人的包的名字一致或相近，会报错，可以去package.json文件中修改name字段。
后期修改代码后，记得重新打包npm run lib,修改package.json文件中的version字段。

从0搭建Vue2 UI组件库（八）