无论是vue2全家桶还是vue3+vite+TypeScript，组件库几乎人人都会用，但开发独立组件库却不是人人都能掌握，因为搭建组件库的基础开发环境会让很多同学望而却步。一个组件库至少应该包括三个方面：组件库的开发与打包；组件库文档开发和打包；用于快速创建新组件的命令行工具cli。这几天程序员优雅哥搭建了一个组件库的基础脚手架：vue3-component-library-archetype基于这个脚手架，可以使用内置的cli快速新建组件，开发组件和文档按照惯例。脚手架大大简化了环境搭建、包配置、类型定义抽取等工具。开箱即用，您可以专注于组件本身的开发。脚手架采用monorepo风格，使用pnpm作为包管理工具。1组件库脚手架内容组件库开发、打包、发布组件库文档编写、打包、一套代码编写和演示Demo快速创建组件命令行cli组件库搭建示例demo2组件库脚手架技术栈Vite3Vue3TypeScriptVitepress1.0ESLint3使用说明3.1将代码克隆到本地gitclonegit@github.com:HeroCloudy/vue3-component-library-archetype.git3.2安装依赖如果没有安装pnpm，需要按照pnpmnpminstall-gpnpminstallation依赖：pnpmi3.3本地开发开发示例中的组件，使用命令：pnpmrundev:dev访问地址为http://localhost:3000/开发组件库文档中的组件，使用命令：pnpmrundocs:dev访问地址为http://localhost:3100/component库文档界面如下：3.4新建组件pnpmrungen:componentFol下方提示输入组件名称、组件中文名称、组件类型（.tsx或.vue）。执行命令创建组件后，组件会自动注册到组件库中，文档中的文档模板和demo会自动生成，无需任何手动配置。3.5构建文档pnpmrunbuild:docs打包构建文件位于docs/.vitepress/dist目录下3.6构建示例pnpmrunbuild:dev打包构建文件位于dist目录下3.7发布组件库组件库包：pnpmrunbuild：libin你可以在发布npm之前在本地私有服务器上测试它。启动本地私服：pnpmrunstart:verdaccio启动成功后，在浏览器访问http://localhost:4873/。如果您是第一次使用它，则需要创建一个用户。发布组件库到本地私服：pnpmrunpub:local4组件库命令可以看到，组件库的命令入口在根目录下的package.json中的scripts中。由于monorepo方法，大多数命令都在自己的模块中实现。所有命令如下：-dev:dev-dev:uat-dev:prod-build:dev-build:uat-build:prod-preview:example-build:lib-docs:dev-docs:build-docs:preview-gen:component-start:verdaccio-pub:localpnpmrundev:dev本地开发实例，使用dev环境配置，访问地址为http://localhost:3000/pnpmrundev:uat本地开发实例，使用uat环境配置，访问地址本地开发示例为http://localhost:3000/pnpmrundev:prod，使用prod环境配置，访问地址为http://localhost:3000/pnpmrunbuild:devpackagedev环境示例，打包生成的文件位于项目根目录的dist目录下pnpmrunbuild:uatpackageuat环境示例，打包后的文件位于项目根目录的dist目录下pnpmrunbuild:prodpackageprod环境示例，打包后的文件为位于项目根目录dist目录下pnpmrunpreview:example预览packaged示例，访问地址为：http://localhost:4173/pnpmrunbuild:lib打包组件库，打包后的文件位于项目根目录的lib目录下pnpmrundocs:dev本地开发组件库文档，访问地址为：http://localhost:3100/pnpmrundocs:build组件库文档打包，打包后的文件位于项目根目录下的docs/.vitepress/dist目录下pnpmrundocs:preview预览打包组件库文档，访问地址为：http://localhost:4173/pnpmrungen:component快速创建新组件。依次输入组件名称、组件描述（中文名称）、组件类型（tsx\vue）即可??自动生成组件并完成配置。使用此命令可以避免组件开发人员在创建各种配置、基本目录和文件时分心，让他们专注于组件本身的开发。pnpmrunstart:verdaccio启动verdaccio。在本地开发时，使用verdaccio作为本地npm私服进行测试。使用此命令启动verdaccio私有服务器。启动成功后，在浏览器中访问http://localhost:4873/。如果需要首次创建用户，可以搜索_verdaccio_查看其具体用法。pnpmrunpub:local将组件库发布到本地私服。如果你有任何疑问，请联系我。下面的专题将分享这个脚手架的实现过程，和大家一步一步的实现这个脚手架，并基于这个脚手架实现JSONSchema表单、列表等组件，并在示例中开发一个通用的后台管理系统。感谢您阅读本文。如果本文对您有一点帮助或启发，请三连支持，点赞、关注、收藏。程序员丫丫会持续为大家分享更多干货
