如何从0开始搭建 Vue 组件库

京东云开发者
• 阅读 234

作者:京东零售 陈艳春

前言:

组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库。本文我们主要讲述基于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启动项目,页面如下:

如何从0开始搭建 Vue 组件库

注:介绍、快速上手、定制主题、编码规范、开发指南是根据自己组内的规范编写。

(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/vant/blob/HEAD/packages/vant-cli/README.zh-CN.md

点赞
收藏
评论区
推荐文章
Alex799 Alex799
2年前
5款vue前端UI框架
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。实用的Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
徐小夕 徐小夕
3年前
前端组件/库打包利器rollup使用与配置实战
目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/16cb1c297071015523fb08d9e0f
helloworld_40038029 helloworld_40038029
7个月前
Vue3.3 + TS4 ,自主打造媲美 ElementPlus 的组件库
ElementPlus是由Element团队开发的一个全新的组件库,它完全基于Vue3的新特性和API进行开发,充分利用了Vue3的性能优势和组合式API。ElementPlus的组件不仅拥有优秀的设计风格和交互体验,而且支持多种主题定制和国际化,适应不同的场景和需求。ElementPlus还提供了一套完整的Sketch设计资源,方便设计师进行原型设计和视觉稿制作。
Wesley13 Wesley13
2年前
AT
!(https://oscimg.oschina.net/oscnet/9bcf9c4a197687d0f09aa8b0d010e9470c7.jpg)ATUI是一款基于Vue2.x的前端UI组件库,主要用于快速开发PC网站产品。没错,这是又一款基于Vue的前端UI组件库,又双叒叕款UI库~又双叒叕款轮子
Stella981 Stella981
2年前
React TypeScript 从零实现 Popup 组件发布到 npm
本文转载自掘金《从0到1发布一个Popup组件到npm》,作者「海秋」。点击下方阅读原文去点个赞吧!上篇文章\1\中介绍了如何从0到1搭建一个React组件库架子,但为了一两个组件去搭建组件库未免显得大材小用。这次以移动端常见的一个组件Popup为例,以最方便快捷的形式发布一个流程完整的npm包。
helloworld_40038029 helloworld_40038029
9个月前
黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023
Vue3和ElementPlus是一对强大的前端技术组合,帮助开发者构建现代化的用户界面。Vue3作为一种流行的JavaScript框架,提供了响应式数据绑定、组件化开发和虚拟DOM等特性。而ElementPlus是基于Vue3的UI库,提供了丰富的组件和样式,使得开发人员可以轻松地构建漂亮且高效的Web应用。本文将介绍Vue3和ElementPlus的特点、使用方法和核心功能。
程昱 程昱
1个月前
Vue3.3 + TS4,自主打造媲美 ElementPlus 的组件库(超清完结)
Vue3.3TS4,自主打造媲美ElementPlus的组件库(超清完结)download》quangneng.com/3674/Vue3.3TypeScript4打造媲美ElementPlus的组件库详细介绍一、背景介绍在Vue.js生态系统中,构建
乐和 乐和
1星期前
React18+TS+Vite 从0自定义组件库实战复杂项目
React18TSVite从0自定义组件库实战复杂项目download》chaoxingit.com/3927/项目概述:项目名称:自定义组件库开发目标:开发一个基于React18、TypeScript和Vite的自定义组件库,用于构建复杂的前端项目。
乐和 乐和
5天前
高级前端进阶必修,自主打造高扩展的业务组件库
高级前端进阶必修,自主打造高扩展的业务组件库download》chaoxingit.com/246/高级前端进阶必修:自主打造高扩展的业务组件库在前端开发的进阶之路上,构建一个高效、可复用的业务组件库是每个开发者必备的技能。本文将为你揭示如何自主打造一个高
乐和 乐和
4天前
前端框架及项目面试-聚焦Vue、React、Webpack
前端框架及项目面试-聚焦Vue、React、Webpackdownload》shanxueit.com/461/什么是Vue组件?如何创建一个Vue组件?Vue组件是Vue.js中可复用的、独立的模块,用于封装特定功能的HTML、CSS和JavaScrip