如何从0开始搭建组件库

Tech

导读

      本文主要介绍了组件库的意义，并列举了一些常见的组件库框架选型，重点讲述了组件库如何从0开始搭建的过程以及如何发布到npm私服，最后讲述了在具体项目中如何引用组件库的几种方法，方便读者对组件库进行一个系统的了解。

组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，将这些组件整理在一起，便形成组件库。本文主要讲述基于Vant CLI的自建组件库。Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。

首先组件库可以帮助降本提效，其次可以保持视觉风格统一以及交互一致，可以快速构建使用场景，便于多个项目后续迭代升级 。

视觉风格统一以及交互的一致性，可以减少用户学习成本培养用户习惯，让产品拥有良好的用户体验。比如一个四级地址的选择组件，在整个产品中应该就一种交互方式，如果一会是滚动选择，一会是点击选择，会让用户操作起来比较烦躁，统一交互可以减少用户学习成本。

3.1 梳理组件清单

3.3 组件库框架选型

3.4 组件库搭建

yarn create vant-cli-app

# 通过 npmnpm i @vant/cli -D
# 通过 yarnyarn add @vant/cli -D
# 通过 pnpmpnpm add @vant/cli -D

{  "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"]}

m-tetris├─ build     # 构建├─ docs      # 文档├─ es        # 打包├─ lib       # 打包├─ site      # 静态站点资源├─ src       # 组件├─ test      # 单测└─ static    # 图片等资源

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）

3.5 如何发布到公司npm或者npm官网

# 拉取最新的master# 构建npm包npm run build# 登录（如已登录，请忽略）npm login# 发布# 如果是公司私服、请保证源是公司源npm publish

# 安装插件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';

import Vue from 'vue';import Jdxxx from 'xxx-vant';import 'xxx-vant/lib/index.css';
Vue.use(Jdxxx);