基于element UI 二次封装组件库发布到npm使用

总结起来就是四条：
1：打包
2：生产成文件后 npm init -y
3：改版本
4：npm publish 发布

ps:（如果是首次发布，2之后，先npm login 登录。）

一：首先是第一条打包

在package.json 当中加一条打包命令 "package": "vue-cli-service build --target lib ./src/packages/index.js --name domFyh-ui --dest domFyh-ui"

（1）domFyh-ui 这个是组件库的名称，类似element ui。
（2）./src/packages/index.js 这个是路径指向，我们所二次封装的组件都在这里。
（3）现在就是怎么封装配置了。例如我自己封装的ui格式为：
1：在src下面新建一个目录packages，目录下有个index.js。

//package/index.js
import FButton from "./FButton"; // 引入封装好的组件
import FcomTable from "./FcomTable"; // 引入封装好的组件
import FqueryListens from "./FqueryListens"; // 引入封装好的组件
import FdialogsForm from "./FdialogsForm"; // 引入封装好的组件
const coments = [FButton, FcomTable, FqueryListens, FdialogsForm]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
    coments.forEach((com) => {
        Vue.component(com.name, com);
    });
};
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}


export default {
    install,
    FButton,
    FcomTable,
    FqueryListens,
    FdialogsForm
} // 这个方法以后再使用的时候可以被use调用

2：index.js 中引入的就是二次封装的组件，目录层级为：

3：FButton 下面的src下面的vue文件，就是你已经封装过的组件等
4：和src同级的index.js 文件配置为：

import fbuton from './src/fbuton.vue'

fbuton.install = function(Vue) {
  Vue.component(fbuton.name, fbuton)
}

export default fbuton

5：然后就进行上面的打包 npm run package ，打包完成后会生成组件库文件。
二：然后是第二条生成package.json
（1）npm init -y 在打包后生成的文件下输入命令生成package.json 文件。例如：

（2）如果是首次发布，生成文件之后，先npm login 进行登录。

三：然后是第三条改版本
（1）顾名思义就是上面截图中的version，每次发布前改个版本号，首次不用。

四：就是最后一步了，发布
（1）npm publish ，输入这个命令发布到npm上面。
（2）使用的时候：npm install 你的组件库名称。就是下载引入使用等可以参考element ui 是一样的。

奥对了，如果在项目中测试的话，就在main.js 中引入，注册即可。

例如我的：

import DomfyhUi from './packages/index.js';

Vue.use(DomfyhUi);

然后运行项目测试就OK了。ps：(npm login 登录，需要先去npm上面新建属于你自己的账号)