如何封装并发布一个属于自己的ui组件库

以前就一直有个想法自己能不能封装一个类似于elementui一样的组件库，然后发布到npm上去，毕竟前端说白了，将组件v上去，然后进行数据交互。借助这次端午，终于有机会，尝试自己去封装发布组件库了

我这里了只做最简单的按钮和输入框的封装，重在如何将组件发布到npm上去

原材料：
components中两个封装好的组件

在src同级目录下创建一个文件夹packages
以后我们的所有操作都是基于packages这个文件进行的，也就是将它打包成dist

新建一个index.js的同时，将上面两个组件丢进去

1、在index.js中写入以下代码

（全局批量注册组件）

import kButton from './button.vue'
import kInput from './input.vue'const components = [kButton,kInput
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {// 遍历注册全局组件components.forEach(component => {Vue.component(component.name, component)})// 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}}// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
export default {install
}

2、在package.json中加入以下代码

（加入脚本命令）

"private": false,"main": "dist/kejin-ui.umd.min.js" ,"author": {"name": "kjh"}

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

3、然后执行npm run lib

最后在同级目录下生成一个dist包，我们接下来就是将dist发到npm上去

4、上传前的操作

加上一个.npmignore文件

# 忽略目录
examples/
packages/
public/# 忽略指定文件
vue.config.js
babel.config.js
*.map

这个意思就是只上传dist，其他都选择忽略，这个和gitignore有点类似

5、上传到npm上去

注册登录npm就不说了，
输入npm login，会让你输入密码账号，登录成功后
输入npm publish，就可以将你的组件发布到npm上了
这个组件的名字就是package.json里面的name，这里我们设置的是kejin-ui

让我们试一下

新建一个vue-cli的脚手架
在cmd命令行中输入npm install kejin-ui

在main.js中加入

import KejinUI from 'kejin-ui';
import 'kejin-ui/dist/kejin-ui.css';
Vue.use(KejinUI);

在app.vue中写入

<k-button>按钮</k-button>
<k-button type="red">按钮</k-button>
<k-button type="green">按钮</k-button>
<k-input></k-input>

引用成功，我这里就简单给button传入了颜色，没怎么太封装，后期会把重点放在封装上，包括以前自己写的一些组件，都会想怎么去封装，甚至是一些特效
话说npm上只有一百多万个组件库，不知道这里面中国发布了多少

感觉封装组件会对那些诸如elementui更加了解
会更确切地用到父传子，子传父，等组件信息之间的通讯

还是挺有趣的，加油吧！！！！