| | |
|---|
| | | ## BSF |
|---|
| | | # BSF 项目 |
|---|
| | | |
|---|
| | | 定位平台前端 |
|---|
| | | ## 项目架构 📖 |
|---|
| | | |
|---|
| | | ### 技术栈 |
|---|
| | | |
|---|
| | | - **前端框架**：Vue3.4 + TypeScript |
|---|
| | | - **构建工具**：Vite5 |
|---|
| | | - **状态管理**：Pinia |
|---|
| | | - **UI框架**：Element-Plus |
|---|
| | | - **路由**：Vue Router |
|---|
| | | - **HTTP请求**：Axios（二次封装） |
|---|
| | | - **代码规范**：ESLint + Prettier + Stylelint |
|---|
| | | - **Git提交规范**：husky + lint-staged + commitlint |
|---|
| | | |
|---|
| | | ### 项目结构 |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | BSF |
|---|
| | | ├─ .husky # husky 配置文件 |
|---|
| | | ├─ .vscode # VSCode 推荐配置 |
|---|
| | | ├─ build # Vite 配置项 |
|---|
| | | ├─ public # 静态资源文件（该文件夹不会被打包） |
|---|
| | | ├─ src |
|---|
| | | │ ├─ api # API 接口管理 |
|---|
| | | │ ├─ assets # 静态资源文件 |
|---|
| | | │ ├─ components # 全局组件 |
|---|
| | | │ ├─ config # 全局配置项 |
|---|
| | | │ ├─ directives # 全局指令文件 |
|---|
| | | │ ├─ enums # 项目常用枚举 |
|---|
| | | │ ├─ hooks # 常用 Hooks 封装 |
|---|
| | | │ ├─ languages # 语言国际化 i18n |
|---|
| | | │ ├─ layouts # 框架布局模块 |
|---|
| | | │ ├─ routers # 路由管理 |
|---|
| | | │ ├─ stores # pinia store |
|---|
| | | │ ├─ styles # 全局样式文件 |
|---|
| | | │ ├─ typings # 全局 ts 声明 |
|---|
| | | │ ├─ utils # 常用工具库 |
|---|
| | | │ ├─ views # 项目所有页面 |
|---|
| | | │ ├─ App.vue # 项目主组件 |
|---|
| | | │ ├─ main.ts # 项目入口文件 |
|---|
| | | │ └─ vite-env.d.ts # 指定 ts 识别 vue |
|---|
| | | ├─ .editorconfig # 统一不同编辑器的编码风格 |
|---|
| | | ├─ .env # vite 常用配置 |
|---|
| | | ├─ .env.development # 开发环境配置 |
|---|
| | | ├─ .env.production # 生产环境配置 |
|---|
| | | ├─ .env.test # 测试环境配置 |
|---|
| | | ├─ .eslintignore # 忽略 Eslint 校验 |
|---|
| | | ├─ .eslintrc.cjs # Eslint 校验配置文件 |
|---|
| | | ├─ .gitignore # 忽略 git 提交 |
|---|
| | | ├─ .prettierignore # 忽略 Prettier 格式化 |
|---|
| | | ├─ .prettierrc.cjs # Prettier 格式化配置 |
|---|
| | | ├─ .stylelintignore # 忽略 stylelint 格式化 |
|---|
| | | ├─ .stylelintrc.cjs # stylelint 样式格式化配置 |
|---|
| | | ├─ CHANGELOG.md # 项目更新日志 |
|---|
| | | ├─ commitlint.config.cjs # git 提交规范配置 |
|---|
| | | ├─ index.html # 入口 html |
|---|
| | | ├─ LICENSE # 开源协议文件 |
|---|
| | | ├─ lint-staged.config.cjs # lint-staged 配置文件 |
|---|
| | | ├─ package-lock.json # 依赖包包版本锁 |
|---|
| | | ├─ package.json # 依赖包管理 |
|---|
| | | ├─ postcss.config.cjs # postcss 配置 |
|---|
| | | ├─ README.md # README 介绍 |
|---|
| | | ├─ tsconfig.json # typescript 全局配置 |
|---|
| | | └─ vite.config.ts # vite 全局配置文件 |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 核心功能 |
|---|
| | | |
|---|
| | | - 使用 Vue3.4 + TypeScript 开发，单文件组件**＜script setup＞** |
|---|
| | | - 采用 Vite5 作为项目开发、打包工具（配置 gzip/brotli 打包、tsx 语法、跨域代理…） |
|---|
| | | - 使用 Pinia 替代 Vuex，轻量、简单、易用，集成 Pinia 持久化插件 |
|---|
| | | - 使用 TypeScript 对 Axios 整个二次封装（请求拦截、取消、常用请求封装…） |
|---|
| | | - 基于 Element 二次封装 ProTable 组件，表格页面全部为配置项 Columns |
|---|
| | | - 支持 Element 组件大小切换、多主题布局、暗黑模式、i18n 国际化 |
|---|
| | | - 使用 VueRouter 配置动态路由权限拦截、路由懒加载，支持页面按钮权限控制 |
|---|
| | | - 使用 KeepAlive 对页面进行缓存，支持多级嵌套路由缓存 |
|---|
| | | - 常用自定义指令开发（权限、复制、水印、拖拽、节流、防抖、长按…） |
|---|
| | | - 使用 Prettier 统一格式化代码，集成 ESLint、Stylelint 代码校验规范 |
|---|
| | | - 使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息 |
|---|
| | | |
|---|
| | | ## 部署指南 🚀 |
|---|
| | | |
|---|
| | | ### 环境要求 |
|---|
| | | |
|---|
| | | - Node.js >= 16 |
|---|
| | | - pnpm >= 8 |
|---|
| | | |
|---|
| | | ### 安装步骤 |
|---|
| | | |
|---|
| | | 1. **克隆项目** |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # 克隆项目 |
|---|
| | | git clone [项目地址] |
|---|
| | | |
|---|
| | | # 进入项目目录 |
|---|
| | | cd BSF |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 2. **安装依赖** |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # 安装依赖 |
|---|
| | | pnpm install |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 开发环境 |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # 启动开发服务器 |
|---|
| | | pnpm dev |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 构建部署 |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # 开发环境构建 |
|---|
| | | pnpm build:dev |
|---|
| | | |
|---|
| | | # 测试环境构建 |
|---|
| | | pnpm build:test |
|---|
| | | |
|---|
| | | # 生产环境构建 |
|---|
| | | pnpm build:pro |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 构建后的文件位于 `dist` 目录，可以将该目录下的文件部署到服务器上。 |
|---|
| | | |
|---|
| | | ### 代码检查 |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # eslint 检测代码 |
|---|
| | | pnpm lint:eslint |
|---|
| | | |
|---|
| | | # prettier 格式化代码 |
|---|
| | | pnpm lint:prettier |
|---|
| | | |
|---|
| | | # stylelint 格式化样式 |
|---|
| | | pnpm lint:stylelint |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 提交代码 |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # 提交代码（提交前会自动执行 lint:lint-staged 命令） |
|---|
| | | pnpm commit |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 服务器部署 |
|---|
| | | |
|---|
| | | 1. **Nginx 配置示例** |
|---|
| | | |
|---|
| | | ```nginx |
|---|
| | | server { |
|---|
| | | listen 80; |
|---|
| | | server_name your-domain.com; |
|---|
| | | root /path/to/dist; |
|---|
| | | index index.html; |
|---|
| | | |
|---|
| | | # 处理 Vue Router 的 history 模式 |
|---|
| | | location / { |
|---|
| | | try_files $uri $uri/ /index.html; |
|---|
| | | } |
|---|
| | | |
|---|
| | | # 静态资源缓存 |
|---|
| | | location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { |
|---|
| | | expires 1y; |
|---|
| | | add_header Cache-Control "public, immutable"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 2. **Docker 部署** |
|---|
| | | |
|---|
| | | ```dockerfile |
|---|
| | | # 构建阶段 |
|---|
| | | FROM node:16-alpine AS builder |
|---|
| | | |
|---|
| | | WORKDIR /app |
|---|
| | | COPY package*.json ./ |
|---|
| | | RUN npm install -g pnpm |
|---|
| | | RUN pnpm install |
|---|
| | | COPY . . |
|---|
| | | RUN pnpm build:pro |
|---|
| | | |
|---|
| | | # 生产阶段 |
|---|
| | | FROM nginx:alpine |
|---|
| | | COPY --from=builder /app/dist /usr/share/nginx/html |
|---|
| | | COPY nginx.conf /etc/nginx/conf.d/default.conf |
|---|
| | | EXPOSE 80 |
|---|
| | | CMD ["nginx", "-g", "daemon off;"] |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 环境变量配置 |
|---|
| | | |
|---|
| | | 项目支持多环境配置，通过不同的环境文件来区分： |
|---|
| | | |
|---|
| | | - `.env` - 通用配置 |
|---|
| | | - `.env.development` - 开发环境配置 |
|---|
| | | - `.env.test` - 测试环境配置 |
|---|
| | | - `.env.production` - 生产环境配置 |
|---|
| | | |
|---|
| | | ### 浏览器支持 |
|---|
| | | |
|---|
| | | - 本地开发推荐使用 Chrome 最新版浏览器 |
|---|
| | | - 生产环境支持现代浏览器，不再支持 IE 浏览器 |
|---|
| | | |
|---|
| | | | Edge | Firefox | Chrome | Safari | |
|---|
| | | | :--: | :-----: | :----: | :----: | |
|---|
| | | | last 2 versions | last 2 versions | last 2 versions | last 2 versions | |
|---|
