如何從0開始搭建 Vue 元件庫

京東雲開發者發表於2023-02-23
Vue元件
本文參與了SegmentFault 思否寫作挑戰賽，歡迎正在閱讀的你也加入。

作者：京東零售 陳豔春

前言：

元件設計是透過對功能及視覺表達中元素的拆解、歸納、重組，並基於可被複用的目的，形成規範化的元件，透過多維度組合來構建整個設計方案，將這些元件整理在一起，便形成元件庫。本文我們主要講述基於Vant CLI的自建元件庫。Vant CLI 是一個基於 Vite 實現的 Vue 元件庫構建工具，透過 Vant CLI 可以快速搭建一套功能完備的 Vue 元件庫。

建立元件庫的意義

首先元件庫可以給我們降本提效，其次可以保持視覺風格統一以及互動一致，可以幫助我們快速構建使用場景，便於多個專案後續迭代升級 。

視覺風格統一以及互動的一致性，可以減少使用者學習成本培養使用者習慣，讓產品擁有良好的使用者體驗。比如一個四級地址的選擇元件，在整個產品中應該就一種互動方式，如果一會是滾動選擇，一會是點選選擇，會讓使用者操作起來比較煩躁，統一互動可以減少使用者學習成本。

新產品上線後，還需要不斷的去完善，在迭代過程中可能會新增其他功能，這時候我們就可以只修改元件庫一套程式碼，所有不同專案相同元件就可以達到了迭代升級的效果。

如何建立元件庫

一、梳理元件清單

首先梳理出專案中樣式相同的模組，和產品討論未來會有哪些規劃，現有的元件是否能夠滿足需求，是否需要補充設計方案，清單整理完畢後，將每一個元件建成一個獨立任務，像日常需求那樣，方便隨時更新使用。

二、場景整合

把自己變成產品的深度使用者，把現有線上產品完整體驗一遍，繪製使用者行為路徑，並和需求方溝通了解後續計劃，將元件的所有的當前/潛在應用場景總結出來，儘可能不遺漏場景。

三、元件庫框架選型

看了開源的 Vue3 元件庫，總結了一些前端目前流行的趨勢，列出來多個版本和框架的，本文只討論 Vue3 版本。

1.element-plus - 經典中的經典，全面支援 Vue 3

2.tdesign-vue-next - 鵝廠優質 UI 元件，配套工具完滿，設計工整，文件清晰

3.arco-design-vue- 位元組跳動開源 UI 元件庫，大廠邏輯，設計文件完美

4.ant-design-vue - 螞蟻前端 UI 庫，面向企業級中後臺

5.naive-ui - 寶藏 Vue UI 庫，Vue UI 新星，從 Vue 3 起步

6.vant - 有贊團隊開源移動 UI 元件庫，全面支援 Vue 3

7.nutui - 京東出品，移動端友好，面向電商業務場景

8.vuetify - 老牌 Vue UI ，基於谷歌的 Material Design 樣式開發

9.varlet - Varlet 是一個基於 Vue3 開發的 Material 風格移動端元件庫，全面擁抱 Vue3 生態，由社群建立起來的元件庫團隊進行維護。

四、元件庫搭建

我們以Vant CLI為例來詳細剖析具體搭建過程:

（1）首先確保本地node版本^12.13.0 || ^14.15.0 || >=16.0.0

（2）執行以下命令可以快速建立一個基於 Vant CLI 的專案

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私服或者npm官網

所有公司內網使用者都能夠釋出包到 jnpm 庫。

如果你之前沒有釋出包的經驗，請先檢視 npm 官方文件 npm publish 。

# 拉取最新的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);



參考資料：vant-cli官網：https://github.com/youzan/van...

相關文章