猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目

1 yyg-cli 是什么

yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月，11月1日进行了大升级，发布 1.1.0 版本：支持创建 vue3 全家桶项目和 vue3 组件库项目。具体如下：

vue3 全家桶项目

使用 yyg-cli 创建的 vue3 全家桶项目，底层基于优雅哥编写的开源项目 vue3-vite-archetype，默认整合如下库：

- vite3、vue3
- typescript、tsx
- vue router
- pinia
- scss
- element plus
- nprogress
- svg
1
2
3
4
5
6
7
8

此外还支持：

- 多环境的支持
- 封装 Element Plus 图标组件并全局引入，支持 Element UI 中的图标的使用方式
- 使用 pinia-plugin-persistedstate 实现 pinia 状态持久化，浏览器刷新时数据不丢失
- 使用 eslint-standard 规范进行代码检查
- 使用 git hooks 规范代码提交
1
2
3
4
5

vue3 组件库项目

使用 yyg-cli 创建的 vue3 组件库项目，底层基于优雅哥编写的开源项目 vue3-component-library-archetype，该项目在上一篇文章中已经叙述过。简单来说，支持如下功能：

- pnpm + monorepo
- 组件库的开发环境和打包构建，打包时自动提取类型；
- 组件库文档的开发环境和打包构建，支持一份 demo 的代码实现 demo 展示和代码展示；
- example 的开发环境和打包构建；
- 提供 cli，通过 script 一个命令自动创建新组件并自动完成相关配置。
- 本地启动私服、测试本地发布组件库
1
2
3
4
5
6

2 为什么使用 yyg-cli

使用 yyg-cli 就一个原因：省时省力省脑。

如果使用 vite 创建 vue3 全家桶项目，需要手动整合 tsx、路由、状态管理等，是一个重复体力活，没有什么价值。通过 yyg-cli 创建 vue3 项目，极大简化了各种库的整合工作。关于底层创建所使用的 vue3-vite-archetype 是怎样从创建项目一步步到完成的，优雅哥在之前的文章中已详细叙述，大家如果不愿意使用 yyg-cli