guava-ui

Statement

guava-ui guava 前端工程（vue3）历史版本记录
Author: andy.ten@tom.com & xukaixing@hotmail.com
Docs API：http://www.ccexpert.top:8888/guava/

Preorder

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

Version - last >= 3

v0.5.9 2026.09.10

优化GvAIDesigner模式下的兼容性

v0.5.7 2026.08.10

优化Guide组件

v0.5.6 2026.08.10

实现guide引导组件 优化GvNarBar组件 新增GvHeaderMessage组件

v0.5.4 2026.07.30

解决detail表格翻页数据刷新问题 实现菜单的top、topLeft布局 vite的版本由6升级为8 eslint版本升级为最新稳定版

v0.5.3 2026.07.25

样式优化 弹窗组件优化 表格组件增加合计、多级表头功能

v0.5.2 2026.07.22

增加水印 crypto-js组件更换为：crypto-es

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 类型

AI Coding

安装插件

/plugin marketplace add /Users/andyhsu/Workspace/guava-claude-plugins
/plugin install guava-plugins@guava-tools

命令

示例：/guava-plugins:code-front src/pages/sysMng/userMng.md

HomePage

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