共计 3501 个字符，预计需要花费 9 分钟才能阅读完成。
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此外还反对：
- 多环境的反对
- 封装 Element Plus 图标组件并全局引入，反对 Element UI 中的图标的应用形式
- 应用 pinia-plugin-persistedstate 实现 pinia 状态长久化，浏览器刷新时数据不失落
- 应用 eslint-standard 标准进行代码查看
- 应用 git hooks 标准代码提交vue3 组件库我的项目
应用 yyg-cli 创立的 vue3 组件库我的项目，底层基于优雅哥编写的开源我的项目 vue3-component-library-archetype，该我的项目在上一篇文章中曾经叙述过。简略来说，反对如下性能：
- pnpm + monorepo
- 组件库的开发环境和打包构建，打包时主动提取类型；- 组件库文档的开发环境和打包构建，反对一份 demo 的代码实现 demo 展现和代码展现；- example 的开发环境和打包构建；- 提供 cli，通过 script 一个命令主动创立新组件并主动实现相干配置。- 本地启动私服、测试本地公布组件库2 为什么应用 yyg-cli
应用 yyg-cli 就一个起因：省时省力省脑。
如果应用 vite 创立 vue3 全家桶 我的项目，须要手动整合 tsx、路由、状态治理等，是一个反复体力活，没有什么价值。通过 yyg-cli 创立 vue3 我的项目，极大简化了各种库的整合工作。对于底层创立所应用的 vue3-vite-archetype 是怎么从创立我的项目一步步到实现的，优雅哥在之前的文章中已具体叙述，大家如果不违心应用 yyg-cli，能够依据之前的文章一步步操作。
文章：
基于 vite 创立 vue3 全家桶我的项目
vue3 vite2 封装 SVG 图标组件 - 基于 vite 创立 vue3 全家桶我的项目(续篇）
Vue3 Vite3 多环境配置 – 基于 vite 创立 vue3 全家桶我的项目(续篇）
Vue3 Vite3 pinia 根本应用、长久化、路由守卫中的应用 – 基于 vite 创立 vue3 全家桶我的项目(续篇）
分享一个实用的 vite + vue3 组件库脚手架工具，晋升开发效率
如果应用 vite 创立 vue3 组件库 我的项目，则是各种繁琐的依赖、配置，底层脚手架 vue3-component-library-archetype 优雅哥前前后后折腾了七八个早晨才弄完，前面也会分享文章和大家从创立我的项目开始直到实现整个组件库脚手架。那为什么不间接应用 vue3-component-library-archetype 来二次开发呢？如果间接应用该我的项目，须要批改组件库的名称等信息，一不小心就批改脱漏了，而且批改的中央很多，大略有 20 多个文件。应用 yyg-cli，在创立我的项目的过程中就会依据输出的我的项目名、作者等信息间接批改相干中央，实现 开箱即用。
3 怎么应用 yyg-cli
3.1 装置 pnpm
monorepo 是一个支流趋势，很多开源我的项目都应用 monorepo 形式。Lerna 是一个优良的反对 monorepo 的库，但曾经进行保护了一段时间，大多企业应用 pnpm，pnpm 不仅是一个包管理工具，还反对 monorepo，此外还有很多长处，如速度快、节俭磁盘空间等。所以优雅哥也从 yarn 切换到了 pnpm。
全局装置 pnpm
npm install -g pnpm3.2 装置 yyg-cli
应用 pnpm 或 yarn 全局装置 yyg-cli：
pnpm install yyg-cli -g
或
yarn global add yyg-cli装置实现后查看版本号：
yyg --version以后最新版本为 1.1.0
3.3 创立 vue3 全家桶我的项目
在控制台输出 yyg create 我的项目名，如：
yyg create ops-admin回车后，控制台提醒抉择我的项目类型，抉择 vue3 全家桶我的项目，回车
顺次输出我的项目形容、版本号、作者、本地开发运行的端口号，期待我的项目创立
我的项目创立胜利后，会提醒是否立即装置依赖，如果须要间接装置依赖，回车即可，抉择包管理工具，而后便开始依赖装置了。呈现如下提醒，则依赖装置胜利，能够用 IDE 关上我的项目，运行我的项目 pnpm run dev:dev。
主动创立生成的 vue3 全家桶构造比较简单，这里就不形容了。
3.4 创立 vue3 组件库我的项目
在控制台输出 yyg create 组件库名，如：
yyg create ops-ui回车后，控制台提醒抉择我的项目类型，抉择 vue3 组件库我的项目，回车，顺次填写组件库中组件名的前缀（如 element plus 的组件前缀为 el，ant design 的组件前缀为 a，这里输出 yyg，则代表所有组件前缀都是 yyg）、组件库中文形容、作者，而后期待组件库创立。如下图：
组件库创立胜利后，仍然会提醒是否装置依赖，回车就间接应用 pnpm 进行依赖的装置（因为组件库脚手架应用 pnpm monorepo，所以这里不再提醒抉择包管理工具，这也是本节结尾就全局装置 pnpm 的起因）。
组件库创立胜利后，用 IDE 关上，重点的目录构造和文件阐明如下：
1）example 模块
一般的 vue3 我的项目，可在该目录中开发业务性能，在开发业务性能过程中，如果有新的公共组件，可不便的在组件库中开发。组件库稳固后，便能够将 example 抽取为独立的工程。（业务驱动组件库的开发）
2）packages 目录
寄存组件库，外面包含多个模块。我的项目刚创立胜利时，外面有三个目录：
- scss 目录
该目录寄存款式相干的文件，组件库的款式参考 ITCSS + ACSS 架构模式，在该模式根底上进行了简化。base 目录寄存一些重置款式和变量；tools 目录对应一些款式工具函数，如 BEM 等；components 目录寄存组件的款式，每个组件都对应该目录下的一个 scss 文件。应用 cli 主动创立组件时，会在该目录下生成对应组件的 scss 文件。acss 寄存原子 CSS。
- foo 模块
该目录寄存一个示例组件。后续通过 cli 主动创立新组件时，就会主动生成和 foo 雷同的目录文件构造。foo/index.ts 是组件的入口文件；foo/src/ 目录寄存组件的源码和 props 等类型定义。
- ops-ui 模块
该模块是主动生成的，与创立我的项目时输出的 组件库名 / 我的项目名 雷同，为组件库的聚合工程，在外面引入了所有的组件库，同时也是打包组件库时的入口。应用 cli 创立新组组件时，会主动在该模块中引入新创建的组件。
3）docs 模块
组件库的文档，应用 vitepress 1.0 开发。.vitepress 目录寄存 vitepress 的惯例配置及主题配置，在 .vitepress/theme/index.ts 中主动引入了组件库 packages/ops-ui。index.md 是首页，大家能够批改 index.md 中的配置，依照本人的具体信息进行对应批改，如组件库的名称、LOGO、性能特点等。
components 目录寄存每个组件的形容页，并且能够在外面展现 demo 及 demo 源码。demos 目录寄存组件形容页中引入的 demo。在应用 cli 创立新组件时，会主动在 demos 目录中生成组件的 demo 代码，同时在 components 目录中生成对应组件的 md 形容文档页，并在 md 中引入生成的 demo。
4）cli 模块
该模块是一个辅助工具，帮忙咱们疾速创立一个组件模块，并实现 packages/ 组件库模块、docs 等的配置。
下面所有模块的 scripts 都聚合在根目录的 package.json 中，在应用过程中从根目录操作即可。对于外面的 scripts 以及开发、打包、公布等操作，在上一篇文章《vue3-component-library-archetype》曾经具体叙述，这里便不再赘述。
有任何 issue，欢送留言探讨。
前面的文章进入 vue3 企业级优雅实战，从创立我的项目、封装组件库脚手架开始、cli 开始，到 JSON Schema 组件封装、权限管理系统开发，最初再进行 微前端 降级。
感激你浏览本文，如果本文给了你一点点帮忙或者启发，还请三连反对一下，点赞、关注、珍藏，程序员优雅哥会继续与大家分享更多干货
