前言：
組件設計是通過對功能及視覺表達中元素的拆解、歸納、重組，並基於可被複用的目的，形成規範化的組件，通過多維度組合來構建整個設計方案，將這些組件整理在一起，便形成組件庫。本文我們主要講述基於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 -D4、手動配置
{
"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);