前言：
　　
　　组件设计是通过对性能及视觉表白中元素的拆解、演绎、重组，并基于可被复用的目标，造成规范化的组件，通过多维度组合来构建整个设计方案，將这些组件整顿在一起，便造成组件库。本文咱们次要讲述基于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、手动装置

# 通过 npmnpm i @vant/cli -D# 通过 yarnyarn add @vant/cli -D# 通过 pnpmpnpm 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);