这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战
搭建一个组件库
从零开始的新世界
前面的十几篇文章都是在写组件，但是这个系列的主旨是从0到1开发一个组件库，却从没有写一些如何是把他们成库，这是不是不河里？
所以今天，它来了。
十二组件合生效，一朝成库取俊越。
在正式开始先，前做个铺垫。
到底要什么程度才能盘它吗？ 需要精通组件开发吗？需要三年工作五年经验吗？
不，都不用，毕竟我自己也是个菜狗。所以要求挺低的。想写组件库，会写组件，肯钻研。会vue。
就酱紫。
建库三步走
第一步：基础库
首先，来到Vue3的文档，或者如果会的腿腿，直接先创建好的一个Vue3的项目。
当然，如果是想制作一个基于的Vue2的组件库，也可以新建一个Vue2的项目。
第二步：修改文件
创建好项目之后，因为组件库的文件夹和项目还是不用的，所以需要对对基础项目进行文件夹改造。
|-- 重命名src为examples（参考ElementUI），用于测试组件
|-- 新建packages，定义上传的组件库
|-- 新建vue.config.js
第三步：配置vue.config.js
const path = require('path')
const { config } = require('process')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
pages: {
index: {
entry: 'examples/main.js', // 入口文件
template: 'public/index.html',
filename: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add(resolve('packages'))
.end()
.use('babel') // 编译器
.loader('babel-loader')
.tap(option => {
return option
})
}
}
填充组件
在前面的十几篇文章中，都是在写组件，不过仅在其中几篇文章中提及了针对组件库的一些配置，这里大概再说下。
以Button按钮为例，一个组件的文件结构如下
root
|--packages
|--button
|--button.vue
|--index.js
-------------------------------------
// index.js
import ele from './button.vue';
ele.install = function(app){
// 前面的文章都是基于Vue3的Setup-script的，所以ele.name即文件名
// 但是在这里可以重新定义组件名名。
app.component(ele.name, ele)
}
export default ele;
测试
完成以上步骤，就可以简单的制作好一个组件了，但是在可找到的一些组件库中，通常为了易上手都会提供一个组件测试，即前面通过src文件夹改的examples文件夹中的内容、
这里有两种做法， 如果是全局组件，可以main.js引入，注册为全局组件。或者在页面中单独引入作为局部组件。
打包组件
这里的打包组件指的是将组件库打包上传到npm中，可以让其他开发者下载使用。
修改packages.json配置
"private": false,
"main": "lib/ui.umd.min.js", // 可自行决定是否修改
"version": "0.1.3",
"keywords": ["keyName", "keyName2"],
"script": {
"build-lib": "vue-cli-service build --target lib --name tanrj-ui --dest lib packages/index.js"
}
然后执行明命令
npm run build-lib
同时，如同提交到远程仓库一般，配置ignore文件，忽略到一些文件
# 忽略目录
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
最后
执行命令上传到npm
# 设置为默认的官方镜像
npm config set registry https://registry.npmjs.org/
# 登录（未注册去npm.js.com或者通过npm adduser注册一个账户）
npm login
# 发布
npm publish
