建站
咨詢
售后
建站咨詢
新聞中心
作者：京東零售 陳艷春
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供慈利網(wǎng)站建設(shè)、慈利做網(wǎng)站、慈利網(wǎng)站設(shè)計(jì)、慈利網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、慈利企業(yè)網(wǎng)站模板建站服務(wù)，10余年慈利做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
前言：
組件設(shè)計(jì)是通過(guò)對(duì)功能及視覺(jué)表達(dá)中元素的拆解、歸納、重組，并基于可被復(fù)用的目的，形成規(guī)范化的組件，通過(guò)多維度組合來(lái)構(gòu)建整個(gè)設(shè)計(jì)方案，將這些組件整理在一起，便形成組件庫(kù)。本文我們主要講述基于Vant CLI的自建組件庫(kù)。Vant CLI 是一個(gè)基于 Vite 實(shí)現(xiàn)的 Vue 組件庫(kù)構(gòu)建工具，通過(guò) Vant CLI 可以快速搭建一套功能完備的 Vue 組件庫(kù)。
建立組件庫(kù)的意義
首先組件庫(kù)可以給我們降本提效，其次可以保持視覺(jué)風(fēng)格統(tǒng)一以及交互一致，可以幫助我們快速構(gòu)建使用場(chǎng)景，便于多個(gè)項(xiàng)目后續(xù)迭代升級(jí) 。
視覺(jué)風(fēng)格統(tǒng)一以及交互的一致性，可以減少用戶學(xué)習(xí)成本培養(yǎng)用戶習(xí)慣，讓產(chǎn)品擁有良好的用戶體驗(yàn)。比如一個(gè)四級(jí)地址的選擇組件，在整個(gè)產(chǎn)品中應(yīng)該就一種交互方式，如果一會(huì)是滾動(dòng)選擇，一會(huì)是點(diǎn)擊選擇，會(huì)讓用戶操作起來(lái)比較煩躁，統(tǒng)一交互可以減少用戶學(xué)習(xí)成本。
新產(chǎn)品上線后，還需要不斷的去完善，在迭代過(guò)程中可能會(huì)新增其他功能，這時(shí)候我們就可以只修改組件庫(kù)一套代碼，所有不同項(xiàng)目相同組件就可以達(dá)到了迭代升級(jí)的效果。
如何創(chuàng)建組件庫(kù)
一、梳理組件清單
首先梳理出項(xiàng)目中樣式相同的模塊，和產(chǎn)品討論未來(lái)會(huì)有哪些規(guī)劃，現(xiàn)有的組件是否能夠滿足需求，是否需要補(bǔ)充設(shè)計(jì)方案，清單整理完畢后，將每一個(gè)組件建成一個(gè)獨(dú)立任務(wù)，像日常需求那樣，方便隨時(shí)更新使用。
二、場(chǎng)景整合
把自己變成產(chǎn)品的深度用戶，把現(xiàn)有線上產(chǎn)品完整體驗(yàn)一遍，繪制用戶行為路徑，并和需求方溝通了解后續(xù)計(jì)劃，將組件的所有的當(dāng)前/潛在應(yīng)用場(chǎng)景總結(jié)出來(lái)，盡可能不遺漏場(chǎng)景。
三、組件庫(kù)框架選型
看了開源的 Vue3 組件庫(kù)，總結(jié)了一些前端目前流行的趨勢(shì)，列出來(lái)多個(gè)版本和框架的，本文只討論 Vue3 版本。
1.element-plus - 經(jīng)典中的經(jīng)典，全面支持 Vue 3
2.tdesign-vue-next - 鵝廠優(yōu)質(zhì) UI 組件，配套工具完滿，設(shè)計(jì)工整，文檔清晰
3.arco-design-vue- 字節(jié)跳動(dòng)開源 UI 組件庫(kù)，大廠邏輯，設(shè)計(jì)文檔完美
4.ant-design-vue - 螞蟻前端 UI 庫(kù)，面向企業(yè)級(jí)中后臺(tái)
5.naive-ui - 寶藏 Vue UI 庫(kù)，Vue UI 新星，從 Vue 3 起步
6.vant - 有贊團(tuán)隊(duì)開源移動(dòng) UI 組件庫(kù)，全面支持 Vue 3
7.nutui - 京東出品，移動(dòng)端友好，面向電商業(yè)務(wù)場(chǎng)景
8.vuetify - 老牌 Vue UI ，基于谷歌的 Material Design 樣式開發(fā)
9.varlet - Varlet 是一個(gè)基于 Vue3 開發(fā)的 Material 風(fēng)格移動(dòng)端組件庫(kù)，全面擁抱 Vue3 生態(tài)，由社區(qū)建立起來(lái)的組件庫(kù)團(tuán)隊(duì)進(jìn)行維護(hù)。
四、組件庫(kù)搭建
我們以Vant CLI為例來(lái)詳細(xì)剖析具體搭建過(guò)程:
（1）首先確保本地node版本^12.13.0 || ^14.15.0 || >=16.0.0
（2）執(zhí)行以下命令可以快速創(chuàng)建一個(gè)基于 Vant CLI 的項(xiàng)目
yarn create vant-cli-app
（3）手動(dòng)安裝
# 通過(guò) npm
npm i @vant/cli -D
# 通過(guò) yarn
yarn add @vant/cli -D
# 通過(guò) pnpm
pnpm add @vant/cli -D
（4）手動(dòng)配置
{
"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）本地啟動(dòng)
npm run dev啟動(dòng)項(xiàng)目，頁(yè)面如下：
??
注：介紹、快速上手、定制主題、編碼規(guī)范、開發(fā)指南是根據(jù)自己組內(nèi)的規(guī)范編寫。
（6）如何開發(fā)組件庫(kù)
目錄結(jié)構(gòu)
?倉(cāng)庫(kù)的組件代碼位于 src 下，每個(gè)組件一個(gè)文件夾
?docs 目錄下是文檔網(wǎng)站的代碼，本地開發(fā)時(shí)可以在目錄下運(yùn)行 npm run dev 開啟文檔網(wǎng)站
項(xiàng)目主要目錄如下：
m-tetris
├─ build # 構(gòu)建
├─ docs # 文檔
├─ es # 打包
├─ lib # 打包
├─ site # 靜態(tài)站點(diǎn)資源
├─ src # 組件
├─ test # 單測(cè)
└─ static # 圖片等資源
添加新組件
添加新組件時(shí)，請(qǐng)按照下面的目錄結(jié)構(gòu)組織文件，并在 vant.config.js 中配置組件名稱。
src
└─ button
├─ demo # 示例代碼
├─ test # 單元測(cè)試
├─ index.vue # 組件入口
├─ index.less # 組件樣式
└─ README.md # 組件文檔說(shuō)明
本地測(cè)試
# 打包,生成lib es文件夾
npm run build
# 生成壓縮包
npm pack
# 在項(xiàng)目中安裝測(cè)試包
npm install 壓縮包的絕對(duì)路徑（例如：/Users/用戶名/work/XXX/XXX.0.tgz）
五、如何發(fā)布到公司npm私服或者npm官網(wǎng)
所有公司內(nèi)網(wǎng)用戶都能夠發(fā)布包到 jnpm 庫(kù)。
如果你之前沒(méi)有發(fā)布包的經(jīng)驗(yàn)，請(qǐng)先查看 npm 官方文檔 npm publish 。
# 拉取最新的master
# 構(gòu)建npm包
npm run build
# 登錄（如已登錄，請(qǐng)忽略）
npm login
# 發(fā)布
# 如果是公司私服、請(qǐng)保證源是公司源
npm publish
六、如何在項(xiàng)目中使用組件
方式一. 自動(dòng)按需引入組件 (推薦)
?babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過(guò)程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式。
# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無(wú)需設(shè)置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "xxx-vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'xxx-vant',
libraryDirectory: 'es',
style: true
}, 'xxx-vant']
]
};
// 接著你可以在代碼中直接引入 xxx-vant 組件
// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { IndexBar } from 'xxx-vant';
方式二. 手動(dòng)按需引入組件
在不使用插件的情況下，可以手動(dòng)引入需要的組件。
import Button from 'xxx-vant/lib/index-bar';
import 'xxx-vant/lib/index-bar/style';
方式三. 導(dǎo)入所有組件
xxx-vant 支持一次性導(dǎo)入所有組件，引入所有組件會(huì)增加代碼包體積，因此不推薦這種做法。
import Vue from 'vue';
import Jdxxx from 'xxx-vant';
import 'xxx-vant/lib/index.css';
Vue.use(Jdxxx);
參考資料：vant-cli官網(wǎng)：??https://github.com/youzan/vant/blob/HEAD/packages/vant-cli/README.zh-CN.md??
新聞名稱：如何從0開始搭建Vue組件庫(kù)
轉(zhuǎn)載來(lái)源：http://m.5511xx.com/article/cdojdjs.html
