共计 3235 个字符，预计需要花费 9 分钟才能阅读完成。
前言：
组件设计是通过对性能及视觉表白中元素的拆解、演绎、重组，并基于可被复用的目标，造成规范化的组件，通过多维度组合来构建整个设计方案，將这些组件整顿在一起，便造成组件库。本文咱们次要讲述基于 VantCLI 的自建组件库。VantCLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 VantCLI 能够疾速搭建一套性能齐备的 Vue 组件库。
建设组件库的意义
首先组件库能够给咱们降本提效，其次能够放弃视觉格调对立以及交互统一，能够帮忙咱们疾速构建应用场景，便于多个我的项目后续迭代降级。
视觉格调对立以及交互的一致性，能够缩小用户学习老本造就用户习惯，让产品领有良好的用户体验。比方一个四级地址的抉择组件，在整个产品中应该就一种交互方式，如果一会是滚动抉择，一会是点击抉择，会让用户操作起来比拟焦躁，对立交互能够缩小用户学习老本。
新产品上线后，还须要一直的去欠缺，在迭代过程中可能会新增其余性能，这时候咱们就能够只批改组件库一套代码，所有不同我的项目雷同组件就能够达到了迭代降级的成果。
如何创立组件库
一、梳理组件清单
首先梳理出我的项目中款式雷同的模块，和产品探讨将来会有哪些布局，现有的组件是否可能满足需要，是否须要补充设计方案，清单整顿结束后，将每一个组件建成一个独立工作，像日常需要那样，不便随时更新应用。
二、场景整合
把本人变成产品的深度用户，把现有线上产品残缺体验一遍，绘制用户行为门路，并和需求方沟通了解后续打算，将组件的所有的以后 / 潜在利用场景总结进去，尽可能不脱漏场景。
三、组件库框架选型
看了开源的 Vue3 组件库，总结了一些前端目前风行的趋势，列出来多个版本和框架的，本文只探讨 Vue3 版本。
1、element-plus：经典中的经典，全面反对 Vue3
2、tdesign-vue-next：鹅厂优质 UI 组件，配套工具完美，设计工整，文档清晰
3、arco-design-vue：字节跳动开源 UI 组件库，大厂逻辑，设计文档完满
4、ant-design-vue：蚂蚁前端 UI 库，面向企业级中后盾
5、naive-ui：宝藏 VueUI 库，VueUI 新星，从 Vue3 起步
6、vant：有赞团队开源挪动 UI 组件库，全面反对 Vue3
7、nutui：京东出品，挪动端敌对，面向电商业务场景
8、vuetify：老牌 VueUI，基于谷歌的 MaterialDesign 款式开发
9、varlet-Varlet：一个基于 Vue3 开发的 Material 格调挪动端组件库，全面拥抱 Vue3 生态，由社区建设起来的组件库团队进行保护。
四、组件库搭建
咱们以 VantCLI 为例来具体分析具体搭建过程:
1、首先确保本地 node 版本 ^12.13.0||^14.15.0||>=16.0.0
2、执行以下命令能够疾速创立一个基于 VantCLI 的我的项目
yarn create vant-cli-app
3、手动装置
| # 通过 npm | |
| npm i @vant/cli -D | |
| # 通过 yarn | |
| yarn add @vant/cli -D | |
| # 通过 pnpm | |
| pnpm add @vant/cli -D |
4、手动配置
| { | |
| "scripts": { | |
| "dev": "vant-cli dev", | |
| "test": "vant-cli test", | |
| "lint": "vant-cli lint", | |
| "build": "vant-cli build", | |
| "prepare": "husky install", | |
| "release": "vant-cli release", | |
| "build-site": "vant-cli build-site" | |
| }, | |
| "nano-staged": { | |
| "*.md": "prettier --write", | |
| "*.{ts,tsx,js,vue,less,scss}": "prettier --write", | |
| "*.{ts,tsx,js,vue}": "eslint --fix" | |
| }, | |
| "eslintConfig": { | |
| "root": true, | |
| "extends": ["@vant"] | |
| }, | |
| "prettier": {"singleQuote": true}, | |
| "browserslist": ["Chrome >= 51", "iOS >= 10"] | |
| } |
5、本地启动
npm run dev 启动我的项目，页面如下：
注：介绍、疾速上手、定制主题、编码标准、开发指南是依据本人组内的标准编写。
6、如何开发组件库
目录构造
・仓库的组件代码位于 src 下，每个组件一个文件夹
・ docs 目录下是文档网站的代码，本地开发时能够在目录下运行 npm run dev 开启文档网站
我的项目次要目录如下：
| m-tetris | |
| ├─ build # 构建 | |
| ├─ docs # 文档 | |
| ├─ es # 打包 | |
| ├─ lib # 打包 | |
| ├─ site # 动态站点资源 | |
| ├─ src # 组件 | |
| ├─ test # 单测 | |
| └─ static # 图片等资源 |
增加新组件
增加新组件时，请依照上面的目录构造组织文件，并在 vant.config.js 中配置组件名称。
| src | |
| └─ button | |
| ├─ demo # 示例代码 | |
| ├─ test # 单元测试 | |
| ├─ index.vue # 组件入口 | |
| ├─ index.less # 组件款式 | |
| └─ README.md # 组件文档阐明 |
本地测试
| # 打包, 生成 lib es 文件夹 | |
| npm run build | |
| # 生成压缩包 | |
| npm pack | |
| # 在我的项目中装置测试包 | |
| npm install 压缩包的绝对路径（例如：/Users/ 用户名 /work/XXX/XXX.0.tgz） |
五、如何公布到公司 npm 官网
所有公司内网用户都可能公布包到 jnpm 库。
如果你之前没有公布包的教训，请先查看 npm 官网文档。
| # 拉取最新的 master | |
| # 构建 npm 包 | |
| npm run build | |
| # 登录（如已登录，请疏忽）npm login | |
| # 公布 | |
| # 如果是公司私服、请保障源是公司源 | |
| npm publish |
六、如何在我的项目中应用组件
形式一：主动按需引入组件(举荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法主动转换为按需引入的形式。
| # 装置插件 | |
| npm i babel-plugin-import -D |
| // 在.babelrc 中增加配置 | |
| // 留神：webpack 1 无需设置 libraryDirectory | |
| { | |
| "plugins": [ | |
| ["import", { | |
| "libraryName": "xxx-vant", | |
| "libraryDirectory": "es", | |
| "style": true | |
| }] | |
| ] | |
| } | |
| // 对于应用 babel7 的用户，能够在 babel.config.js 中配置 | |
| module.exports = { | |
| plugins: [ | |
| ['import', { | |
| libraryName: 'xxx-vant', | |
| libraryDirectory: 'es', | |
| style: true | |
| }, 'xxx-vant'] | |
| ] | |
| }; |
| // 接着你能够在代码中间接引入 xxx-vant 组件 | |
| // 插件会主动将代码转化为形式二中的按需引入模式 | |
| import {IndexBar} from 'xxx-vant'; |
形式二：手动按需引入组件
在不应用插件的状况下，能够手动引入须要的组件。
| import Button from 'xxx-vant/lib/index-bar'; | |
| import 'xxx-vant/lib/index-bar/style'; |
形式三：导入所有组件
xxx-vant 反对一次性导入所有组件，引入所有组件会减少代码包体积，因而不举荐这种做法。
| import Vue from 'vue'; | |
| import Jdxxx from 'xxx-vant'; | |
| import 'xxx-vant/lib/index.css'; | |
| Vue.use(Jdxxx); |
