关于前端:分享一个实用的-vite-vue3-组件库脚手架工具提升开发效率

50次阅读

共计 2473 个字符,预计需要花费 7 分钟才能阅读完成。

无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的应用简直大家都会,但本人开发一个独立组件库就不是每个人都把握的,因为搭建组件库的根底开发环境,就会让很多同学望而生畏。一个组件库应该至多要包含三个方面:

  1. 组件库的开发和打包;
  2. 组件库文档的开发和打包;
  3. 命令行工具 cli 疾速创立新组件。

这几天 程序员优雅哥 搭建了一个组件库的根底脚手架:

vue3-component-library-archetype

在这个脚手架的根底上,大家能够应用内置的 cli 疾速创立新组件,依照套路开发组件及文档即可。脚手架很大水平上简化了环境的搭建、打包的配置、类型定义的抽取等工具, 开箱即用 ,大家能够将注意力集中到组件自身的开发上。

脚手架采纳 monorepo 格调,应用 pnpm 作为包管理工具。

1 组件库脚手架内容

  • 组件库开发、打包、公布
  • 组件库文档编写、打包、一套代码编写和演示 Demo
  • 疾速创立组件命令行 cli
  • 组件库搭建的 example 演示

2 组件库脚手架技术栈

  • Vite 3
  • Vue 3
  • TypeScript
  • Vitepress 1.0
  • ESLint

3 应用阐明

3.1 克隆代码到本地

git clone git@github.com:HeroCloudy/vue3-component-library-archetype.git

3.2 装置依赖

如果您没有装置 pnpm,须要先依照 pnpm

npm install -g pnpm

装置依赖:

pnpm i

3.3 本地开发

在 example 中开发组件,应用命令:

pnpm run dev:dev

拜访地址为 http://localhost:3000/

在组件库文档中开发组件,应用命令:

pnpm run docs:dev

拜访地址为 http://localhost:3100/

组件库文档界面如下:

3.4 创立新组件

pnpm run gen:component

依照提醒输出组件名称、组件中文名称、组件类型(.tsx 或 .vue)。

执行命令创立完组件后,会主动在组件库中注册该组件,同时主动生成文档模板及文档中的 demo,无需任何手动配置。

3.5 构建文档

pnpm run build:docs

打包构建后的文件位于 docs/.vitepress/dist 目录

3.6 构建 example

pnpm run build:dev

打包构建后的文件位于 dist 目录

3.7 公布组件库

组件库打包:

pnpm run build:lib

在公布 npm 前能够在本地私服进行测试。
启动本地私服:

pnpm run start:verdaccio

启动胜利后在浏览器中拜访 http://localhost:4873/

如果首次应用,须要创立用户。

公布组件库到本地私服中:

pnpm run pub:local

4 组件库命令阐明

组件库的命令入口均在根目录的 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:local

pnpm run dev:dev

本地开发 example,应用 dev 环境配置,拜访地址为 http://localhost:3000/

pnpm run dev:uat

本地开发 example,应用 uat 环境配置,拜访地址为 http://localhost:3000/

pnpm run dev:prod

本地开发 example,应用 prod 环境配置,拜访地址为 http://localhost:3000/

pnpm run build:dev

打包 dev 环境 example,打包生成的文件位于我的项目根目录的 dist 目录

pnpm run build:uat

打包 uat 环境 example,打包生成的文件位于我的项目根目录的 dist 目录

pnpm run build:prod

打包 prod 环境 example,打包生成的文件位于我的项目根目录的 dist 目录

pnpm run preview:example

预览打包后的 example,拜访地址为:http://localhost:4173/

pnpm run build:lib

打包组件库,打包生成的文件位于我的项目根目录的 lib 目录

pnpm run docs:dev

本地开发组件库文档,拜访地址为:http://localhost:3100/

pnpm run docs:build

组件库文档打包,打包生成的文件位于我的项目根目录下的 docs/.vitepress/dist 目录

pnpm run docs:preview

预览打包后的组件库文档,拜访地址为:http://localhost:4173/

pnpm run gen:component

疾速创立新组件。顺次输出组件名、组件形容(中文名称)、组件类型(tsx \ vue)即可主动生成组件并实现配置。

应用该命令可防止组件开发人员扩散精力到各种配置、根底目录和文件的创立中,能够让其聚焦于组件自身的开发。

pnpm run start:verdaccio

启动 verdaccio。本地开发时,应用 verdaccio 作为测试应用的本地 npm 私服。
应用该命令启动 verdaccio 私服,启动胜利后在浏览器中拜访 http://localhost:4873/

如果首次应用,须要创立用户,能够搜寻 _verdaccio_,查看其具体应用。

pnpm run pub:local

公布组件库到本地私服。


If you have any questions, please contact me

前面的专题将分享这个脚手架的实现过程,和大家一步步实现这个脚手架,并基于该脚手架实现 JSON Schema 表单、列表等组件,并在 example 中开发通用后盾管理系统。

感激你浏览本文,如果本文给了你一点点帮忙或者启发,还请三连反对一下,点赞、关注、珍藏,程序员优雅哥会继续与大家分享更多干货

正文完
 0