# 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`，修改项目名和版本号

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

### 2.安装依赖

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

### 3.运行

```shell
pnpm dev
```

## 三、代码管理

### 1.配置用户名和邮箱

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

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

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

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

### 3.保存变更文件

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

### 4.提交代码

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

```shell
pnpm cz
```

### 5.推送到仓库

```shell
git push
```

### 6.查看提交记录

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

## 四、部署

### 1.配置镜像

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

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

### 2.打包

```shell
sh deploy.sh
```

### 3.部署

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

```yml
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，代理转发到前端端口

```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](https://cn.vuejs.org/guide/quick-start.html)

### 2.Pinia
[Pinia](https://pinia.vuejs.org/)

[Pinia Demo](./src/store/README.md)

### 3.Arco
[Arco 组件库](https://arco.design/vue/component/button)

### 4.Crco
[Crco 组件库](https://crco.seepine.com)

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