FxBootUi

一、开发准备

1.开发工具：VsCode

2.安装插件

打开项目后右下角会有建议安装，选择安装即可，也可自己一个个搜索安装

• Vue.volar
• EditorConfig.EditorConfig
• esbenp.prettier-vscode
• dbaeumer.vscode-eslint
• ravenq.vscode-goto-node-modules
• formulahendry.auto-rename-tag
• mhutchie.git-graph

二、快速入门

1.修改项目信息

配置根目录的package.json，修改项目名和版本号

{
  "name": "fxboot-ui",
  "version": "0.1.0"
}

2.安装依赖

# 若未安装pnpm请先执行npm i -g pnpm
pnpm i

3.运行

pnpm dev

三、代码管理

1.配置用户名和邮箱

将以下命令中 yourName 和 your@email.com 替换为你的用户名和邮箱并执行

git config user.name yourName
git config user.email your@email.com

2.非 windows 系统可能需要先执行命令

chmod 755 .husky/pre-commit
chmod 755 .husky/commit-msg

3.保存变更文件

使用 git add xxx 或 VsCode 左侧的源代码管理面板提交变更文件

4.提交代码

执行命令后，按提示输入内容即可

pnpm cz

5.推送到仓库

git push

6.查看提交记录

通过菜单栏->查看->命令面板（或快捷键打开也可），输入git log，选择建议项Git Graph: View Git Graph (git log)即可

四、部署

1.配置镜像

配置根目录的 deploy.sh 文件，修改 HUB 为你的镜像地址

HUB=registry.cn-hangzhou.aliyuncs.com/rsjst

2.打包

sh deploy.sh

3.部署

配置 dockerSwarm 的 stack 中的 image 为打包的镜像即可，例如

version: '3.7'
services:
  fx-boot-ui:
    image: registry.cn-hangzhou.aliyuncs.com/rsjst/fx-boot-ui:0.1.0
    environment:
      # 配置为服务器的ip地址:后端端口
      PROXY_PASS: http://192.168.1.1:8020/
    ports:
      # 映射为4000端口
      - 4000:80
    # 下述配置实现热更新，不需要可去除
    deploy:
      mode: replicated
      replicas: 1
      update_config:
        delay: 5s
        order: start-first

4.配置 nginx

配置服务器上的nginx，代理转发到前端端口

location / {
  proxy_pass http://127.0.0.1:4000/;
  proxy_set_header Host $host:$server_port;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

五、技术要点

Vue 3 + Typescript + Vite

• 编程语言：TypeScript 4.x + JavaScript
• 构建工具：Vite 3.x
• 前端框架：Vue 3.x
• 路由工具：Vue Router 4.x
• 状态管理：Pinia
• UI 组件库：Arco
• UI 组件库：Crco
• CSS 预编译：Sass
• HTTP 工具：Axios
• Git Hook 工具：husky + lint-staged
• 代码规范：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
• 提交规范：Commitizen + Commitlint

六、相关文档

1.Vue3.X

快速上手｜Vue.js

2.Pinia

Pinia

Pinia Demo

3.Arco

Arco 组件库

4.Crco

Crco 组件库

或从 /src/views 中任意子目录中，皆可查看 crco 的应用案例，例如 /src/views/recruit/resume