一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而却步。一个组件库应该至少要包括三个方面:
- 组件库的开发和打包;
- 组件库文档的开发和打包;
- 命令行工具 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 中开发通用后台管理系统。
感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货
一个实用的 vite + vue3 组件库脚手架工具,提升开发效率的更多相关文章
- Vite+TS带你搭建一个属于自己的Vue3组件库
theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...
- 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
- 从0搭建Vue3组件库:button组件
button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...
- 京东 vue3 组件库震撼升级,如约而至!
京东零售开源项目 NutUI 是一套京东风格的轻量级移动端 Vue 组件库,是开发和服务于移动 Web 界面的企业级产品.经过长时间的开发与打磨,NutUI 3.0 终于和大家见面了!3.0 版本在技 ...
- 从0搭建vue3组件库:Shake抖动组件
先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...
- 从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
今天看到一篇文章中提到了一个好用的工具release-it.刚好可以用在我正在开发的vue3组件库.纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组 ...
- 从0搭建vue3组件库: Input组件
本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...
- 京东 Vue3 组件库闪亮登场
京东零售开源项目 NutUI 是一套京东风格的轻量级移动端 Vue 组件库,是开发和服务于移动 Web 界面的企业级产品.经过长时间的开发与打磨,NutUI 3.0 终于要和大家见面了!3.0 版本在 ...
随机推荐
- ZJU-199001 第三周练习 2 数字特征值 位运算算法
题目 对数字求特征值是常用的编码算法,奇偶特征是一种简单的特征值. 对于一个整数, 从个位开始对每一位数字编号, 个位是 \(1\) 号, 十位是 \(2\) 号, 以此类推. 这个整数在第位上的数字 ...
- 【java】学习路径19-Math类、BigDecimal的使用
1--Math类简单的东西 //一些常数 show(Math.PI); show(Math.E); //四舍五入 show(Math.round(3.4)); show(Math.round(3.6) ...
- [SDR] GNU Radio 系列教程(一) —— 什么是 GNU Radio
目录 1.GNU Radio 是什么 2.我为什么要用 GNU Radio 3.数字信号处理 3.1 一点信号理论 3.2 将数字信号处理应用于无线电传输 4.基于流程图的模块化数字信号处理方法 本文 ...
- ASP.NET Core 6框架揭秘实例演示[35]:利用Session保留语境
客户端和服务器基于HTTP的消息交换就好比两个完全没有记忆能力的人在交流,每次单一的HTTP事务体现为一次"一问一答"的对话.单一的对话毫无意义,在在同一语境下针对某个主题进行的多 ...
- 如何使用U盘重装Windows7系统?
一.重装步骤 第一步 将U盘制作为启动盘. 备注:推荐使用比较纯净的制作工具,如开源工具Rufus制作USB启动盘. 第二步 进入BIOS界面,选择U盘启动. 备注:不同的电脑进入BIOS界面的方式不 ...
- Docker 完整版教程
Docker 安装 一.安装前必读 在安装 Docker 之前,先说一下配置,我这里是Centos7 Linux 内核:官方建议 3.10 以上,3.8以上貌似也可. 注意:本文的命令使用的是 roo ...
- 使用Filebeat传送多行日志
文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/106272704 在解决应用程序问题时,多行日志为开发人员提供了宝贵的信息. 堆栈跟踪 ...
- Gitlab注册Runner
1.先启动Gitlab,然后登陆进去,找到项目设置界面 2.部署Runner 这里采用docker安装的方式,也可以采用其他方式安装 # 创建docker镜像使用的数据卷 {20-07-16 16:2 ...
- Windows上Navicat工具远程连接PostgreSQL数据库
首先,在pgdata(也就是在安装pg时指定的存放数据的文件见中)文件夹中,找到pg_hba.conf文件,在文件最后写入下面的内容: host all all 0.0.0.0/0 trust 接着, ...
- 8. 使用Fluentd+MongoDB采集Apache日志
Fluentd+MongoDB,用以实时收集半结构化数据. 背景知识 日志接入Fluentd后,会以json的格式在Fluentd内部进行路由.这就决定了Fluentd处理日志的方式是非常灵活的,它将 ...