主流组件库学习

SerendipityM

已于 2022-11-16 17:17:21 修改

阅读量1.1k

点赞数 1

文章标签： vue.js 组件库

于 2022-11-16 17:14:58 首次发布

本文链接：https://blog.csdn.net/qq_45225759/article/details/127889089

版权

主流组件库差异性对比

NutUI - 京东研发的移动端 UI 组件库，支持 Vue3、Taro 多端适配，面向电商业务场景
Vant - 有赞研发的移动端 UI 组件库，支持 Vue3、微信小程序、支付宝小程序
TDesign Mobile - 腾讯研发的移动端组件库，适合在 Vue3 技术栈项目中使用
Ant Design Mobile - 蚂蚁金服研发的移动端组件库，支持 React
Mand Mobile - 滴滴研发的面向金融场景的 UI 组件库，支持 Vue3
Varlet - Vue3 开发的 Material 风格移动端组件库，由社区的小伙伴开发和维护
element - 饿了么公司前端团队开发的一套基于VUE2.0的桌面端组件库，提供了丰富的 PC 端组件
iview - 一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面
ViewUIPIus - View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库
mint-ui -
Material-UI - 基于 GoogleMaterial Design设计语言开发的移动端 UI 组件库，支持 React

初步了解与对比

组件库	技术栈	组件数量	Npm下载量	Github Star	包管理
Vant	Vue	68+	4,129,547	20.3k
element	Vue	55个，分为六大类		52.7k
element-plus					pnpm workspace（实现了monorepo）
iview	Vue	43+		150
View UI Plus	Vue	80+
mint-ui	Vue	30+		16.5k
Ant Design Mobile	React	53	4,947,714	82.2k
material-ui	React		2,316	81.9k

组件库	技术栈	Fork次数	Github Star	样式	包管理	单元测试	构建	代码风格
element-plus	TypeScript、Vue SFC（Vue 单文件组件）	6.5k	17.4k	Scss、CSS var	pnpm workspace（实现了monorepo）	Jest、Vitest	Rollup、esbuild、TypeScript、Gulp	ESLint、Prettier

本文章基于 Element Plus v2.1.4。

（注：Npm 下载量统计的截止时间为：2022年6月20日）

分析的这些组件库都是基于几大前端的生态来实现的，在设计上都已经形成了自己的风格和规范，也有自己的沉淀。他们的优点是已经发展的很成熟了，基本上可以cover大多数的业务场景，缺点是组件库在跨框架迁移上的成本较大。

jest*+testing-*library/react 单元测试

element-plus

Element Plus 源码分析——构建与代码风格

element-ui

Element-UI 技术揭秘（2）- 组件库的整体设计

四大优势：

丰富的 feature：丰富的组件，自定义主题，国际化。
1. 组件共分成了 6 大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好地满足大部分 PC 端 to B 业务开发需求。
文档 & demo：提供友好的文档和 demo，维护成本小，支持多语言
安装 & 引入：支持 npm 方式和 cdn 方式，并支持按需引入。
工程化：开发，测试，构建，部署，持续集成。
- 开发阶段：
  1. 为了保证大家代码风格的一致性，使用了 ESLint，甚至专门写了 eslint-config-elemefe 作为 ESint 的扩展规则配置；
  2. 为了方便本地开发调试，借助了 webpack 并配置了 Hot Reload；
  3. 利用模块化开发的思想把组件依赖的一些公共模块放在了 src 目录，并依据功能拆分出 directives、locale、mixins、transitions、utils 等模块。
- 测试阶段：
  1. 使用了 karma 测试框架，为每一个组件编写了单元测试，并且利用 Travis CI 集成了测试。
- 构建方面：
  1. element-ui 编写了很多 npm scripts
    
    以 dist 这个 script 为例：
```
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
```
    它的内部会依次执行多个命令，最终生成 lib 目录和打包后的文件。
    
    这里介绍一下build:file这个script做的事情：
```
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"
```
    依次执行 build/bin目录下的一些Node脚本，对 icon、entry、i18n、version 等做了一系列的初始化工作，它们的内容都是根据一些规则做文件的 IO，这么做的好处就是完全通过工具的手段自动化生成文件，比人工靠谱且效率更高。
- 部署阶段
  1. 通过 pub 这个 npm script 完成。主要是通过运行一系列的 bash 脚本，实现了代码的提交、合并、版本管理、npm 发布、官网发布等，让整个发布流程自动化完成
```
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js"
```

项目引入组件库有两种方式：

1. CDN：在线方式直接在页面上引入 Element-ui 的 JS 和 CSS 文件，代码如下：
    <!-- 引入样式 --> 
    <link rel="stylesheet" 
    href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
    <!-- 引入组件库 --> 
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. npm 安装element-ui
	npm install element-ui -S

目录结构解析

在这里插入图片描述

记录一下不常见的一些文件：

.travis.yml：持续集成(CI)的配置文件
CHANGELOG：更新日志，这里Element UI提供了四种不同语言的，也是很贴心了
components.json：标明了组件的文件路径，方便 webpack 打包时获取组件的文件路径。
FAQ.md：ElementUI 开发者对常见问题的解答。
LICENSE：开源许可证，Element UI使用的是MIT协议
Makefile：Makefile 是一个适用于 C/C++ 的工具，在拥有 make 环境的目录下，如果存在一个 Makefile 文件。那么输入 make 命令将会执行 Makefile 文件中的某个目标命令。

package.json

针对几个关键字端分析

main：项目的入口文件

import Element from 'element-ui' 时候引入的就是main中的文件
```
"main": "lib/element-ui.common.js"   // 是commonjs规范
```
files：指定npm publish发包时需要包含的文件/目录

"files": [
    "lib",
    "src",  // 存放入口文件和一些工具辅助函数
    "packages",  // 存放组件源码
    "types"  // 类型声明文件
]

typings：TypeScript入口文件
```
"typings": "types/index.d.ts",
```
home：项目的线上地址
style：声明样式入口文件

 "style": "lib/theme-chalk/index.css",

scripts
- build:theme - 处理样式相关
```
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk"
```
1）build/bin/gen-cssfile

这一步是根据components.json，生成package/theme-chalk/index.scss文件，把所有组件的样式都导入到index.scss。

其实是做了一个自动化导入操作，后面每次新增组件，就不用手动去引入新增组件的样式了。

2）gulp build --gulpfile packages/theme-chalk/gulpfile.js

我们都知道ElementUI在使用时有两种引入方式：全局引入和按需引入。针对两种引入方式，打包时对应的也有两种方案，具体如下：

将packages/theme-chalk下的所有scss文件编译为css，当你需要全局引入时，就去引入index.scss文件；当你按需引入时，引入对应的组件scss文件即可。针对如何将packages/theme-chalk下的所有scss文件编译为css，如果采用gulp基于工作流去处理更方便。gulp相关的处理就在packages/theme-chalk/gulpfile.js中，经过处理，最终就会打包出对应的样式文件。

一些依赖

async-validator:表单异步校验库

eepmerge:一个用于深度(递归)合并Javascript对象的库

发包

elementui采用package.json下的files字段指定npm publish发包时需要包含的文件/目录
在这里插入图片描述

主题构建–构建工具（gulp+Webpack)

05.Element UI 项目工程化剖析之主题构建、自动化测试、代码质量检查、类型声明

"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk"

1）生成入口文件

build/bin/gen-cssfile 找到 components.json，获取组件列表，找到packages/theme-chalk/src目录下对应的各组件的 component-name.scss 文件，以@import "./component-name.scss"的形式，写入packages/theme-chalk/index.scss文件-样式总入口文件。若是组件对应的样式不存在，会自动创建遗漏的样式文件。

2）构建主题

gulp是一种基于流(stream)的自动化构建工具，gulpfile.js 定义两个任务(task):

将packages/theme-chalk/src目录下的 scss 文件转换成 css 文件，输出至packages/theme-chalk/src/lib目录下;
将packages/theme-chalk/src/fonts目录下的字体图标文件压缩处理，输出至 packages/theme-chalk/src/lib/fonts 目录下。

3）拷贝至lib/theme-chalk下

通过cp-cli，将packages/theme-chalk/src/lib目录下文件拷贝至lib/theme-chalk目录下。

代码规范

05.Element UI 项目工程化剖析之主题构建、自动化测试、代码质量检查、类型声明

element 使用了 eslint 进行代码风格检测，辅助编码规范执行，有效控制代码质量，实现项目代码风格统一。编写发布了 eslint 的扩展规则配置-- eslint-config-elemefe 。

eslint 所能提供的格式化功能很有限；而 prettier 在格式化代码方面具有更大优势。可以集成 prettier 负责格式限制、自动格式化，详细配置参考代码风格检查和格式化配置（ESlint ＆ Prettier）。

eslint：

项目根目录下创建了.eslintignore 文件。
在这里插入图片描述

项目运行后，若文件格式不符合规范，编辑器窗口有提示出现

在这里插入图片描述

光标移到问题行，会显示问题类型，可以点击快速修复选项来修复问题。
在这里插入图片描述

单元测试

05.Element UI 项目工程化剖析之主题构建、自动化测试、代码质量检查、类型声明

项目通过执行 npm run test npm run test:watch 运行单元测试，使用如下技术：

karma 测试执行过程管理工具(Test Runner)。
Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。
Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库，可以与任何 JavaScript 测试框架便捷配对。
Sinon.JS 用于对 JavaScript 隔离测试 spy, stub 和 mock。适用于任何单元测试框架。

类型声明

types 目录存放组件的 TypeScript 声明文件，以 .d.ts 后缀结尾。提升typescript 项目中引入组件库的开发体验，需要在 package.json 中指定 typing 属性的值，声明的入口文件才能生效。

{
    "typings": "types/index.d.ts",
}

样式自定义 - scss

view-ui-plus

目录结构解析

在这里插入图片描述

package.json分析

采用vue3，支持ts和js，vite和gulp构建工具构建，

uglifyjs-webpack-plugin：使用uglify-js进行js文件的压缩。

uglifyjs-webpack-plugin 中文文档_lianxun0107的博客-CSDN博客_uglifyjsplugin

urlloader将引入的文件进行编码，生成dataURL，base64形式，在将字符串打包到js。

一些依赖

async-validator:表单异步校验库

eepmerge:一个用于深度(递归)合并Javascript对象的库

popper.js:是一款功能强大的JS定位引擎。最近在写tooltip弹窗时,需要用到提示框定位的问题,element和iview都在用

代码规范 - eslint.js

使用eslint，tslint进行代码规范检查。

Lint-staged，仅过滤出Git代码暂存区文件(被committed的文件)，所以速度很快。

module.exports = {
    root: true,   //指定配置文件根目录：表明当前文件为eslint的根配置文件，逐层查找时无需往更上一级的文件目录中进行搜索
    env: { //此项指定环境的全局变量。每种环境都有一组特定的预定义全局变量。比如node环境下有global全局变量，browser环境下有window全局变量，jquery环境下有$全局变量，es6环境下有Set等新特性全局变量。这些环境并不是互斥的，所以你可以同时定义多个。
        node: true  // 当在node环境下使用window变量eslint会报错
    },
    globals: {  //配置全局变量
        $: true,
        'BMap': true
    },
    extends: ['plugin:vue/vue3-essential'],  //用来配置标准的js风格
    parserOptions: {   //此项是用来指定javaScript语言类型和风格
        parser: 'babel-eslint',
        ecmaVersion: 6,
        sourceType: 'module' //指定js的导入方式，module是指通过模块导入，默认值为script（表示通过script标签引入）
    },
    // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
    // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
    // "off" -> 0 关闭规则
    // "warn" -> 1 开启警告规则
    //"error" -> 2 开启错误规则
    rules: {
        'vue/script-setup-uses-vars': 'off'
    }
};