1. yyg-cli 是什么
yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 vue3 组件库项目。具体如下:
vue3 全家桶项目使用 yyg-cli 创建的 vue3 全家桶项目,默认整合如下库:
- vite3、vue3
- typescript、tsx
- vue router
- pinia
- scss
- element plus
- nprogress
- svg
此外还支持:
- 多环境的支持
- 封装 Element Plus 图标组件并全局引入,支持 Element UI 中的图标的使用方式
- 使用 pinia-plugin-persistedstate 实现 pinia 状态持久化,浏览器刷新时数据不丢失
- 使用 eslint-standard 规范进行代码检查
- 使用 git hooks 规范代码提交
2. 为什么使用 yyg-cli
使用 yyg-cli 就一个原因:省时省力省脑。
如果使用 vite 创建 vue3 全家桶项目,需要手动整合 tsx、路由、状态管理等,是一个重复体力活,没有什么价值。通过 yyg-cli 创建 vue3 项目,极大简化了各种库的整合工作。关于底层创建所使用的 vue3-vite-archetype 是怎样从创建项目一步步到完成的,优雅哥在之前的文章中已详细叙述,大家如果不愿意使用 yyg-cli,可以根据之前的文章一步步操作。
3 .怎样使用 yyg-cli
3.1 安装 pnpm
npm install -g pnpm
pnpm -v
3.2 安装 yyg-cli
使用 pnpm 或 yarn 全局安装 yyg-cli:
pnpm install yyg-cli -g
或
yarn global add yyg-cli
安装完成后查看版本号:
yyg --version
3.3 创建 vue3 全家桶项目
yyg create ops-admin
回车后,控制台提示选择项目类型,选择 vue3 全家桶项目,回车
依次输入项目描述、版本号、作者、本地开发运行的端口号,等待项目创建
项目创建成功后,会提示是否立刻安装依赖,如果需要直接安装依赖,回车即可,选择包管理工具,然后便开始依赖安装了。出现如下提示,则依赖安装成功,可以用 IDE 打开项目,运行项目 pnpm run dev:dev。
自动创建生成的 vue3 全家桶结构比较简单,这里就不描述了。
我对优雅哥的文章进行了简化处理, 选取了我觉得最重要的部分,点击链接查看全部详细内容 开箱即用 yyg-cli:快速创建 vue3 组件库和vue3 全家桶项目