173 lines
3.3 KiB
Markdown
173 lines
3.3 KiB
Markdown
|
# 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`
|