共计 3142 个字符,预计需要花费 8 分钟才能阅读完成。
作者:京东批发 陈艳春
前言:
组件设计是通过对性能及视觉表白中元素的拆解、演绎、重组,并基于可被复用的目标,造成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整顿在一起,便造成组件库。本文咱们次要讲述基于 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…