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