yyg-cli--Vue3快速创建脚手架

110 阅读2分钟

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 全家桶项目