前言： 组件设计是通过对功能和视觉表达中的元素进行拆解、归纳、重组，形成基于可复用性目的的标准化组件。将维度组合起来构建整个设计解决方案，并将这些组件组织在一起形成一个组件库。在本文中，我们主要讲述基于VantCLI的自建组件库。VantCLI是一个基于Vite的Vue组件库构建工具。通过VantCLI，你可以快速构建一套功能完备的Vue组件库。 构建组件库的意义 首先，组件库可以为我们降低成本，提高效率，其次，它可以保持统一的视觉风格和一致的交互，可以帮助我们快速构建使用场景和方便后续多个项目的迭代升级。 统一的视觉风格和一致的交互，可以降低用户学习成本，培养用户习惯，让产品有良好的用户体验。比如一个四级地址选择组件，在整个产品中应该有交互模式。如果一会儿是滚动选择，一会儿是点击选择，会让用户操作起来比较烦躁，统一的交互可以降低用户的学习成本。 新产品推出后，需要不断完善。在迭代过程中可能会添加其他功能。这时候我们只需要修改组件库中的一组代码，不同项目的所有相同组件都可以实现迭代升级。影响。 如何创建组件库 1.整理组件列表 先把项目中风格相同的模块整理出来，跟产品商量以后有什么规划，是否现有组件是否能满足需求，是否需要补充设计规划和清单梳理后，将每个组件构建为一个独立的任务，方便随时更新使用，就像日常需求一样。 2.场景融合 把自己变成产品的深度用户，完整体验现有线上产品，画出用户行为路径，与需求方沟通了解后续计划，以及将组件当前/潜在的所有应用场景进行汇总，尽量不遗漏场景。 3。组件库框架选择 看了开源的Vue3组件库，总结了目前前端的一些流行趋势，列举了多个版本和框架。本文只讨论Vue3版本。 1、element-plus：经典中的经典，全面支持Vue3 2、tdesign-vue-next：鹅厂优质UI组件，配套工具齐全，设计工整，文档清晰 3、arco-design-vue：字节跳动开源UI组件库，大厂逻辑，完善设计文档 4、ant-design-vue：Ant前端UI库，面向企业级中后台 5、naive-ui：宝藏VueUI库，VueUI新星，从Vue3开始 6.vant：有赞团队开源移动端UI组件库，全面支持Vue3 7、nutui：京东出品，移动友好，面向电商业务场景 8、vuetify：老VueUI，基于Google的MaterialDesign风格开发 9、varlet-Varlet：基于Vue3开发的material风格移动端组件库，全面拥抱Vue3生态，由社区成立的组件库团队维护。 4。组件库搭建 下面以VantCLI为例详细分析一下具体的搭建过程： 1.首先确保本地节点版本^12.13.0||^14.15.0||>=16.0.0 2.执行以下命令快速创建一个基于VantCLI的项目 yarncreatevant-cli-app 3.手动安装#vianpmnpmi@vant/cli-D#viayarnyarnadd@vant/cli-D#viapnpmpnpmadd@vant/cli-D 4.手动配置{"scripts":{"dev":"vant-clidev","test":"vant-clitest","lint":"vant-clilint","build":"vant-clibuild","prepare":"huskyinstall","release":"vant-clirelease","build-site":"vant-clibuild-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.本地启动npmrundev启动项目，页面如下： 注：Introduction,QuickStart,CustomThemes,CodingSpecifications,DevelopmentGuide是按照自己组内的specification写的 6.如何开发组件库 目录结构 ?仓库的组件代码位于src下，每个组件docs目录下有一个文件夹 ?文档网站的代码，在本地开发的时候，可以在该目录下运行npmrundev打开文档网站 项目的主目录如下：m-tetris├─build#Build├─docs#Documentation├─es#Package├─lib#Package├─site#staticsiteresource├─src#Component├─test#单机测试└─static#Imagesandotherresources 添加新组件 添加新组件时，请按照以下目录结构组织文件，并放置在vantConfig确定.config.js中的组件名称。src└─按钮├─demo#示例代码├─test#单元测试├─index.vue#组件入口├─index.less#组件样式└─README.md#组件文档说明 本地测试#打包，生成libes文件夹npmrunbuild#生成压缩包npmpack#在项目中安装测试包npminstall压缩包的绝对路径（例如：/Users/用户名/work/XXX/XXX.0.tgz） 5.如何发布到公司npm官网 所有公司内网用户都可以发布包到jnpm库。 如果之前没有发布包的经验，请先查看npm官方文档#拉取最新master#构建npm包npmrunbuild#登录（如果已经登录请忽略）npmlogin#发布#如果是公司私服，请确保来源是公司源npmpublish 六、如何添加到项目中使用的组件 方法一：按需自动导入组件（推荐） babel-plugin-import是一个babel插件，在编译过程中自动将导入方式转换为按需导入方式。#安装插件npmibabel-plugin-import-D//在.babelrc中添加配置//注意：webpack1不需要设置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组件即可//插件会自动转换方法2中的代码import{IndexBar}from'xxx-vant'; 方法二：按需手动导入组件 无需使用插件即可手动导入所需组件。从'xxx-vant/lib/index-bar'导入按钮；导入'xxx-vant/lib/index-bar/style'； 方法三：导入所有组件 xxx-vant支持一次导入所有组件，引入所有组件会增加代码包的体积，所以不推荐这种方式。从“vue”导入Vue；从“xxx-vant”导入Jdxxx；导入“xxx-vant/lib/index.css”；Vue.use(Jdxxx)；
