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-vuerouter-pinia-scss-elementplus-nprogress-svg还支持：-多环境支持-ElementPlus图标组件封装和全局导入，支持对于ElementUI中图标的使用-使用pinia-plugin-persistedstate实现pinia状态持久化，浏览器刷新时数据不丢失-使用eslint-标准规范进行代码检查-使用githooks规范代码提交vue3组件库project使用yyg-cli创建一个vue3组件库项目，底层基于优雅哥library-archetype编写的开源项目vue3-component-，该项目在上一篇文章中已有介绍。简单来说，它支持以下功能：-pnpm+monorepo-组件库的开发环境和打包，打包时自动提取类型；-组件库文件的开发环境和封装，支持一个demo代码，实现demo展示和代码演示；-示例开发环境和打包构建；-提供cli，通过脚本命令自动创建新组件并自动完成相关配置。-本地启动私服，测试本地发布组件库2为什么要使用yyg-cli使用yyg-cli的原因之一：省时、省力、省脑。如果使用vite创建vue3全家桶项目，需要手动集成tsx、路由、状态管理等，属于重复性的手工工作，没有价值。通过yyg-cli创建vue3项目，大大简化了各种库的集成。关于底层创建使用的vue3-vite-archetype是如何从创建项目开始一步一步完成的，优雅哥在上一篇文章中已经详细介绍过了。如果你不愿意使用yyg-cli，可以按照上一篇文章一步步来。.文章：基于Vite3创建Vue3全家桶项目Vite2封装SVG图标组件-基于Vite3创建Vue3全家桶项目（续）Vite3多环境配置-基于Vite3创建Vue3全家桶项目（续）Vue3vite3Pinia基本使用和持久化，在路由守卫中的使用——基于vite创建vue3全家桶项目（续）分享一个实用的vite+vue3组件库脚手架工具，提高开发效率如果你使用vite创建vue3组件库项目，就是各种繁琐的依赖和配置，底层脚手架vue3-component-library-archetype雅哥折腾了七八个晚上才搞定。后面会和大家分享从项目的创建到整个组件库脚手架的实现。那为什么不直接使用vue3-component-library-archetype进行二次开发呢？如果直接使用本项目，需要修改组件库名称等信息。如果不小心修改漏了，而且修改的地方很多，大约有20个文件。使用yyg-cli，在创建项目的过程中，会根据输入的项目名称、作者等信息，直接修改相关的地方，做到开箱即用。3如何使用yyg-cli3.1安装pnpmmonorepo是主流趋势，很多开源项目都使用monorepo方式。Lerna是一个优秀的库，支持monorepo，但已经停止维护一段时间了。大多数企业使用pnpm。pnpm不仅是一个包管理工具，还支持monorepo。此外，它还具有速度快、节省磁盘空间等诸多优点。于是丫丫也从yarn换成了pnpm。全局安装pnpmnpminstall-gpnpm3.2安装yyg-cli使用pnpm或者yarn全局安装yyg-cli：pnpminstallyyg-cli-g或者yarnglobaladdyyg-cli安装完成后查看版本号：yyg--version是最新版本是1.1.03.3创建vue3全家桶项目。在控制台输入yygcreate项目名称，如：yygcreateops-admin回车后，控制台会提示选择项目类型，选择vue3全家桶项目，回车输入项目描述，版本号,author,本地开发的端口号，等待项目创建成功，会提示是否立即安装依赖，如果需要直接安装依赖，回车，选择包管理工具，然后开始安装依赖。如果出现如下提示，说明依赖安装成功。可以使用IDE打开工程，运行工程pnpmrundev:dev。自动创建生成的vue3全家桶结构比较简单，这里不再赘述。3.4创建vue3组件库项目在控制台输入yygcreatecomponentlibrary名称，如：yygcreateops-ui回车后，控制台提示选择项目类型，选择vue3组件库项，回车，填入在组件库中的组件名称依次（例如element加组件前缀是el，antdesign组件前缀是a，这里输入yyg表示所有组件前缀都是yyg），组件库中文描述，作者，等等为要创建的组件库。如下图：组件库创建成功后，仍然会提示是否安装依赖，回车直接使用pnpm安装依赖（因为组件库脚手架使用的是pnpmmonorepo，所以不再有提示选择包管理工具，这也是本节开头全局安装pnpm的原因）。组件库创建成功后，用IDE打开。关键目录结构和文件说明如下：1）example模块是一个普通的vue3项目，可以在该目录下开发业务功能。在开发业务功能的过程中，如果有新的公共组件，可以在组件库中方便地进行开发。待组件库稳定后，即可将实例抽取出来作为一个独立的工程。（业务驱动组件库开发）2）packages目录存放组件库，组件库包含多个模块。第一次创建项目成功时，有三个目录：scss目录，存放样式相关的文件。组件库的风格参考了ITCSS+ACSS架构模型，在该模型的基础上进行了简化。base目录存放一些重置样式和变量；tools目录对应一些样式工具函数，比如BEM等；components目录存放组件的样式，每个组件对应该目录下的一个scss文件。使用cli自动创建组件时，会在该目录下生成对应组件的scss文件。acss持有原子CSS。foomodule该目录包含一个示例组件。通过cli自动创建新组件时，会自动生成与foo相同的目录文件结构。foo/index.ts是组件的入口文件；foo/src/目录存放组件的源代码和props等类型定义。ops-ui模块该模块是自动生成的。与创建工程时输入的元件库名称/工程名称相同。它是组件库的一个聚合项目，引入了所有的组件库，也是组件库打包时的入口。使用cli创建新的组组件时，会自动将新创建的组件带入该模块。3)docs模块组件库的文档，使用vitepress1.0开发。.vitepress目录存放vitepress的通用配置和主题配置，.vitepress/theme/index.ts中自动引入组件库packages/ops-ui。index.md是首页，你可以修改index.md中的配置，根据自己的具体信息做相应的修改，比如组件库的名称、LOGO、功能特性等。components目录存放的是每个组件的描述页面，并可以在其中显示演示和演示源代码。demos目录存放组件描述页面中介绍的demo。使用cli新建组件时，会在demos目录下自动生成该组件的demo代码，并在components目录下生成对应组件的md描述文档页面，生成的demo会在医学博士。4）cli模块该模块是辅助工具，帮助我们快速创建组件模块，完成packages/组件库模块、docs等配置，以上所有模块的脚本都聚合在根目录的package.json中目录，使用时可以从根目录进行操作。至于里面的脚本以及开发、打包、发布等操作，在之前的文章《vue3-component-library-archetype》中已经有详细的介绍，这里不再赘述。如果您有任何问题，请留言讨论。后续文章将进入Vue3企业级优雅实践，从创建项目开始，打包组件库脚手架，从cli开始，到JSONSchema组件打包，权限管理系统开发，最后是微前端升级。感谢您阅读本文。如果本文对您有一点帮助或启发，请三连支持，点赞、关注、收藏。程序员丫丫会持续为大家分享更多干货
