1 yyg-cli 是什么

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

vue3 全家桶项目

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

  1. - vite3vue3
  2. - typescripttsx
  3. - vue router
  4. - pinia
  5. - scss
  6. - element plus
  7. - nprogress
  8. - svg

此外还支持:

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

vue3 组件库项目

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

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

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 的库,但已经停止维护了一段时间,大多企业使用 pnpmpnpm 不仅是一个包管理工具,还支持 monorepo,此外还有很多优点,如速度快、节省磁盘空间等。所以优雅哥也从 yarn 切换到了 pnpm

全局安装 pnpm

  1. npm install -g pnpm

3.2 安装 yyg-cli

使用 pnpmyarn 全局安装 yyg-cli

  1. pnpm install yyg-cli -g

  2. yarn global add yyg-cli

安装完成后查看版本号:

  1. yyg --version

当前最新版本为 1.1.0

3.3 创建 vue3 全家桶项目

在控制台输入 yyg create 项目名 ,如:

  1. yyg create ops-admin

回车后,控制台提示选择项目类型,选择 vue3 全家桶项目,回车

依次输入项目描述、版本号、作者、本地开发运行的端口号,等待项目创建

项目创建成功后,会提示是否立刻安装依赖,如果需要直接安装依赖,回车即可,选择包管理工具,然后便开始依赖安装了。出现如下提示,则依赖安装成功,可以用 IDE 打开项目,运行项目 pnpm run dev:dev

自动创建生成的 vue3 全家桶结构比较简单,这里就不描述了。

3.4 创建 vue3 组件库项目

在控制台输入 yyg create 组件库名 ,如:

  1. 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-uiindex.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 组件封装、权限管理系统开发,最后再进行微前端升级。

开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目的更多相关文章

  1. Vue-cli3脚手架工具快速创建一个项目

    1.首先全局安装一下vue-cli3 npm install -g @vue/cli 或 yarn global add @vue/cli vue -V查看版本(这里注意V是大写哦) 2.vue cr ...

  2. httprunner_安装及利用脚手架工具快速创建项目

    一.安装httprunner 笔者自己安装的版本为2.5.7 安装命令: pip  install httprunner==2.5.7 二.快速创建目录 hrun --startproject dem ...

  3. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  4. 一个实用的 vite + vue3 组件库脚手架工具,提升开发效率

    无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而 ...

  5. 如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  6. 用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具

    用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...

  7. vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03

    目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...

  8. 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

    相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...

  9. 使用aliyun cli工具快速创建云主机

    参考文档: https://help.aliyun.com/document_detail/25484.html?spm=a2c4g.11186623.3.2.b57vQp 步骤 创建AccessID ...

随机推荐

  1. CF600E Lomsat gelral (dfs序+莫队)

    题面 题解 看到网上写了很多DSU和线段树合并的题解,笔者第一次做也是用的线段树合并,但在原题赛的时候却怕线段树合并调不出来,于是就用了更好想更好调的莫队. 这里笔者就说说莫队怎么做吧. 我们可以通过 ...

  2. ELK技术-IK-中文分词器

    1.背景 1.1 简介 ES默认的分词器对中文分词并不友好,所以一般会安装中文分词插件,以便能更好的支持中文分词检索. 本例参考文档:<一文教你掌握IK中文分词> 1.2 IK分词器 IK ...

  3. KingbaseES rownum 与 limit 的 执行计划区别

    数据准备 --创建基础数据表100W行 create table test07 as select * from (select generate_series(1, 1000000) id, (ra ...

  4. CentOS7_K8S安装指南

    https://www.cnblogs.com/liu-shuai/articles/12177298.html 不能完全按照他来装,因为他装的是15.5的,15.5 有部分组件在阿里云镜像上没有,导 ...

  5. docker-compose概述--翻译

    Overview of Docker Compose 译文 Docker Compose 是一个用来定义和执行多Docker容器程序的工具,如果使用Compose,你将可以使用一个YAML文件来配置你 ...

  6. 谣言检测——《MFAN: Multi-modal Feature-enhanced Attention Networks for Rumor Detection》

    论文信息 论文标题:MFAN: Multi-modal Feature-enhanced Attention Networks for Rumor Detection论文作者:Jiaqi Zheng, ...

  7. 《Java基础——线程类》

    Java基础--线程类       一.线程的创建之Thread类: 规则: 通过声明一个新类作为子类继承 Thread 类,并复写 run() 方法,就可以启动新线程并执行自己定义的 run()方法 ...

  8. 使用mtr来判断网络丢包和网络延迟

    转载自:https://mp.weixin.qq.com/s/UsjzMS1_rdxenw0TPlqwyQ 常用的 ping,tracert,nslookup 一般用来判断主机的网络连通性,其实 Li ...

  9. MinIO Server配置指南

    MinIO server在默认情况下会将所有配置信息存到 ${HOME}/.minio/config.json 文件中. 以下部分提供每个字段的详细说明以及如何自定义它们. 配置目录 默认的配置目录是 ...

  10. 第四章:Django表单

    一.HTML表单概述 Django开发的是动态Web服务,而非单纯提供静态页面.动态服务的本质在于和用户进行互动,接收用户的输入,根据输入的不同,返回不同的内容给用户.返回数据是我们服务器后端做的,而 ...