guava-ui v0.0.1

Statement

guava-ui guava 前端工程（vue3）历史版本记录
Author: andy.ten@tom.com & xukaixing@hotmail.com
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.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 run dev

# 启动构建生产服务
$ pnpm run build

# 本地预览打包后dist目录应用：
$ npm install serve -g 
$ serve -s ./dist

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 -D

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 添加测试
• build 编译相关的修改，对项目构建或者依赖的改动
• ci 持续集成修改
• chore 构建过程或辅助工具的变动
• revert 回滚到上一个版本
• workflow 工作流改进
• mod 不确定分类的修改
• wip 开发中
• types 类型

HomePage

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