Statement

guava-ui guava 前端工程（vue3）历史版本记录
Author: [email protected] & [email protected]
API Url：http://211.149.174.199:8888/vpapi/

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

使用 pnpm 命令

# 安装依赖
$ 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

FAQ

• 安装pnpm

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

• 全局安装eslint

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

• 配置镜像加速

  配置淘宝的镜像源： $ 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 主页.