Statement

guava-ui guava 前端工程（vue3）历史版本记录
Author: &
API Url：

Preorder

1. 安装全局nodejs 请使用v20.18.0及以上版本，建议使用nvm管理 nodejs 多个版本
2. 建议使用pnpm管理 npm 依赖
3. 前端开发 ide 建议使用vscode:latest, 必要的插件列表:
- Vite : vue3 打包工具，开发环境使用vite运行
- Vue - Official : vscode的vue3支持工具
- Prettier : 代码格式化工具，无 lint 检查代码语法能力
- Eslint : 校验脚本语言语法工具
- Stylelint : 校验css语法工具

Version - last >= 3

> v0.0.6 : 2025.08.08.
>> 新增left menus 组件，layout布局组件
>> 调整left menus 左侧栏布局样式
>> 调整header right item 样式
>> 新增GvTheme 主题切换组件.
>> 新增header right item - GvUserInfo组件
>> 新增GvExpandMenu & GvExpandList组件
>> 新增pinyin-pro组件
>> 新增GvGlobalSearch全局检索组件

---

> v0.0.5 : 2025.06.09.
>> pnpm add unocss -S 使用unocss样式.
>> pnpm add @unocss/transformer-variant-group -D UnoCSS语法扩展插件.
>> 新增 GvHamburger组件.

---

> v0.0.4 : 2025.04.02
>> 新增GvLangSelect组件.
>> 新增SvgIcon组件.
>> vite.config.js编译与打包优化.
>> pnpm add @vueuse/core -S 基于 Vue 3 的 组合式 API 工具库.
>> 新增style样式.
>> 新增GvConfigProvider组件，设置全局配置信息.
>> 新增axios封装组件.
>> 新增hooks/useCrud和hooks/useNotify.

---

> v0.0.3 : 2025.03.19.
>> 按需导入element-plus组件和样式.
>> 引入国际化多语言i18n.
>> vite.config.js编译与打包优化.

---

> v0.0.2 : 2024.11.29.
>> pnpm add vite-plugin-svg-icons -D.

---

> v0.0.1 : 2024.11.24
>> 使用 pnpm create vue@latest 脚手架创建工程
>> pnpm add sass-embedded -D 添加nodejs解析scss依赖
>> 在vite.config.ts中配置css解析
>> 定义目录结构，在@/assets/styles中，新增app.scss、main.scss、variables.scss样式表
>> pnpm add postcss -D 用JavaScript编写的工具转换CSS代码
>> pnpm add postcss-html -D 将html文件中的样式块中的CSS代码提取出来进行处理
>> pnpm add postcss-scss -D 将scss代码转换成CSS代码
>> pnpm add autoprefixer -D 自动添加CSS浏览器前缀的插件
>> pnpm add vite-plugin-progress -D Vite 构建工具的插件，提供构建进度条显示功能
>> pnpm add vite-plugin-eslint -D
>> pnpm add terser -D

Exec

$3

``bash


安装依赖

$ pnpm install

启动开发服务

$ pnpm dev

启动构建生产服务

$ pnpm build
`

Modules

- sass-embedded pnpm add sass-embedded -D nodejs环境下使用scss
- postcss pnpm add postcss -D 用JavaScript编写的工具转换CSS代码
- postcss-html pnpm add postcss-html -D 将html文件中的样式块中的CSS代码提取出来进行处理
- postcss-scss pnpm add postcss-scss -D 将scss代码转换成CSS代码
- autoprefixer pnpm add autoprefixer -D 自动添加CSS浏览器前缀的插件
- vite-plugin-progress Vite 构建工具的插件，提供构建进度条显示功能
- vite-plugin-eslint 集成了 ESLint 的能力，在保存或构建时检测到代码中的潜在问题
- eslint-plugin-vue 检查.vue文件中的ts
- eslint pnpm add eslint @vue/eslint-config-typescript eslint-plugin-oxlint eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser -D
- @typescript-eslint/eslint-plugin typescript-eslint检查插件
- @typescript-eslint/parser typescript-eslint插件
- @commitlint/{config-conventional,cli} git commit注视规范检查插件
- lint-staged 对已经通过 git add 暂存的文件运行linters进行检测
- terser JavaScript 压缩工具，它是 UglifyJS 的一个现代分支，支持更新的 JavaScript 特性（如 ES6+）
- stylelint pnpm add stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-order stylelint-prettier stylelint-config-prettier stylelint-config-recommended-vue stylelint-config-recommended stylelint-config-recess-order stylelint-config-recess-order stylelint-scss -D
- dayjs pnpm add dayjs JavaScript 日期库,支持国际化显示和各种格式的日期和时间的解析和格式化
- vite-plugin-style-import 按需加载组件库的样式
- pinia vuex替换组件，管理全局state状态
- pinia-plugin-persistedstate pinia 状态持久化到localStorage或SessionStorage
- vite-plugin-ejs 支持 EJS（Embedded JavaScript Templates） 模板语法。在 HTML 模板中使用动态数据(<%=%>)
- vite-plugin-url-copy Vite 开发服务器启动后，自动复制 URL 到剪贴板，方便你直接粘贴到浏览器或终端中
- vite-plugin-svg-icons Vite 插件，用于自动加载本地 SVG 图标，并将其转换为 SVG Sprite（SVG 精灵图），从而减少 HTTP 请求，提高性能
- vite-plugin-purge-icons Vite 插件，用于按需导入和自动优化 SVG 图标，可以直接使用 Material Icons、FontAwesome、Tabler Icons、Heroicons 等上千个图标库，而不需要手动安装或导入
- vite-plugin-full-reload Vite 插件，用于监听指定文件，并在更改时触发整个页面的刷新（而不仅仅是 HMR 热更新）(修改 vite.config.js 等配置文件后，HMR 不能自动生效)
- rollup-plugin-visualizer Vite 构建体积分析插件.Rollup 插件，用于 Vite、Rollup、Webpack 项目，生成一个 交互式的可视化报告，分析 构建体积、依赖大小、包的嵌套关系
- browserslist 一个工具，用于定义项目要支持的浏览器范围
- @vitejs/plugin-legacy Vite 官方插件，用于让 Vite 项目兼容 旧版浏览器（如 IE11 或较旧的 Chrome、Safari、Firefox 版本）；引入该组件，会生成兼容旧浏览器的polyfill文件，增加代码体积，去掉该依赖；
- @rollup/plugin-commonjs Rollup 官方插件，用于让 Rollup 兼容 CommonJS 模块; 使用该commonjs会导致element-plus打包时提示TimePicker的dayjs引入错误，故去掉该依赖；
- cropper.js 用于实现 图片裁剪 功能;在网页上对图像进行裁剪、缩放、旋转等操作
- vite-plugin-vue-devtools Vite 插件，用于在开发过程中启用和配置 Vue Devtools
- @intlify/unplugin-vue-i18n Vite 默认不支持 vue-i18n 运行时编译，使用 @intlify/unplugin-vue-i18n 插件优化
- @vueuse/core 基于 Vue 3 的 组合式 API 工具库,useMouse() — 获取鼠标坐标;useDark() — 切换深色模式;useLocalStorage() — 本地存储;useFetch() — 网络请求;useClipboard() — 剪贴板;useFullscreen() - 全屏模式
- unocss 使用unocss样式
- pinyin-pro 汉字转拼音组件



Catalog

`text

`

$3

- 安装pnpm

`text
使用npm安装：$ npm install -g pnpm
查看版本：$ pnpm -v
`

- 全局安装eslint

`text
使用npm安装：$ npm install -g eslint babel-eslint
注意： 如果使用nvm管理不同的nodejs版本，需要在当前使用版本上执行命令
`

- 配置镜像加速

`text
配置淘宝的镜像源： $ npm config set registry https://registry.npm.taobao.org
还原npm镜像：$ npm config set registry https://registry.npmjs.org/
清除缓存：$ npm cache clean --force
`

- 切换nodejs版本`

使用nvm命令： nvm alias default 版本号

注意切换完后，重启vscode

Git comments rule

- feat 新功能
- fix 修补 bug
- docs 文档
- style 格式、样式(不影响代码运行的变动)
- refactor 重构(即不是新增功能，也不是修改 BUG 的代码)
- perf 优化相关，比如提升性能、体验
- test 添加测试
- ci 持续集成修改
- chore 构建过程或辅助工具的变动
- revert 回滚到上一个版本
- workflow 工作流改进
- mod 不确定分类的修改
- wip 开发中
- types 类型

HomePage

- 欢迎访问个人 github-xukaixing 主页.
- 欢迎访问个人 gitee-xukaixing 主页.