分支自 BSF

编辑 | blame | 历史 | 原始文档

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. 克隆项目
# 克隆项目
git clone [项目地址]

# 进入项目目录
cd BSF
  1. 安装依赖
# 安装依赖
pnpm install

开发环境

# 启动开发服务器
pnpm dev

构建部署

# 开发环境构建
pnpm build:dev

# 测试环境构建
pnpm build:test

# 生产环境构建
pnpm build:pro

构建后的文件位于 dist 目录，可以将该目录下的文件部署到服务器上。

代码检查

# eslint 检测代码
pnpm lint:eslint

# prettier 格式化代码
pnpm lint:prettier

# stylelint 格式化样式
pnpm lint:stylelint

提交代码

# 提交代码（提交前会自动执行 lint:lint-staged 命令）
pnpm commit

服务器部署

  1. 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";
    }
}
  1. Docker 部署
# 构建阶段
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
编辑 | blame | 历史 | 原始文档

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.2.0 (2023-09-15)

Features

  • 🚀 update and optimize project content (17bc017)
  • 🚀 upgrade plugins and add tab functionality (f21a41d)

1.1.0 (2023-07-09)

Features

  • 🚀 add proTable instance type (8262f04)
  • 🚀 optimize code and add VitePWA (523f676)
  • 🚀 optimize code and update plugins (5cff3c7)
  • 🚀 optimize irregular code (d406ef2)
  • 🚀 proTable radio selection example (f58291f)
  • 🚀 proTable search component custom rendering (#189) (89f03db)
  • 🚀 proTable supports static table data (9a3e85d)
  • 🚀 update Gitee address (0608be9)
  • 🚀 update stylelint configuration (d62aae8)
  • 🚀 update theme, modify bugs (7a3a7a3)

Bug Fixes

1.0.0 (2023-04-15)

Features

  • 🚀 升级依赖插件 && 新增树型 ProTbale 示例(更多查看详情) (ed0ea75)
  • 🚀 升级依赖插件 && 修复 bug(查看详情) (4febadc)
  • 🚀 新增路由白名单访问控制 (97dc264)
  • 🚀 优化 ProTable && 面包屑导航 (905d7f1)
  • 🚀 优化代码 (cd333df)
  • 🚀 优化代码和样式细节 (5b4b926)
  • 🚀 优化代码和样式细节 (756094c)
  • 🚀 优化代码逻辑 && 更新微信群二维码 (629e824)
  • 🚀 优化代码细节问题 (a6a6ced)
  • 🚀 优化样式、代码细节 (1b02f45)
  • 🚀 allow nested tree enum data (c2fa2be)
  • 🚀 refactoring project configuration (7ede988)
  • ProTable: 🚀 插槽引入 ElTable 的 scope，可获取$index 等 (4cb7dba)

Bug Fixes

  • 🧩 修复 ImportExcel 组件 bug (ab7e9dd)
  • 🧩 修复 ImportExcel 组件 bug (803ba58)
  • 🧩 修复 ProTable 组件打印功能 bug (a88b7df)
  • 🧩 修复 TreeFilter 组件默认值 bug (8e515f0)
  • 🧩 修复 TreeFilter 组件默认值 bug (f23a94d)
  • 🧩 修复 useDebounceFn 错误使用 (99d4278)
  • 🧩 修复多图片上传预览初始化异常 (d1a917f)
  • 🧩 修复分栏布局路径匹配 bug (b06bd12)
  • 🧩 修复横向布局下最大化失效 (e416ddb)
  • 🧩 修复路由重置 bug (52b7e66)
  • 🧩 修复弱类型检查错误 (b32310e)

0.0.7 (2022-12-28)

Features

  • 🚀 二次封装 wangEditor 富文本编辑器(50%) (4f8e266)
  • 🚀 更新插件、优化代码(请查看详情) (dac6dec)
  • 🚀 更新微信群二维码 (7e890d0)
  • 🚀 请求全局 loading 更改为可配置 (a75d62f)
  • 🚀 升级 element-plus 到 2.25 (e98c035)
  • 🚀 升级 vite、vue 版本 && 优化分栏布局样式 (b2b1b59)
  • 🚀 使用属性透传重构 ProTable 组件 (a428e89)
  • 🚀 添加 wangEditor 组件 (d6d2fa7)
  • 🚀 完成 wangEditor 富文本二次封装 (7362bfb)
  • 🚀 完善按钮、菜单权限示例 (6793f0c)
  • 🚀 新增 主题色、灰色模式、色弱模式 配置 (7821157)
  • 🚀 新增 pro-form (3ab5a5b)
  • 🚀 新增 protable 打印、列对齐方式功能 (c22879e)
  • 🚀 新增 protbale 功能, 请查看详情 (17f2bcd)
  • 🚀 新增 SVG Icons (977602c)
  • 🚀 新增 treeFilter 组件标题属性 (20c755f)
  • 🚀 新增 treeFilter data 参数 (4280766)
  • 🚀 新增暗黑模式 (215e499)
  • 🚀 新增菜单搜索功能 (4aa0eef)
  • 🚀 新增动态路由 (551fefc)
  • 🚀 新增分栏布局 (de37143)
  • 🚀 新增功能 && 修复 bug(查看详情) (1ab183f)
  • 🚀 新增功能 && 修复 bug(查看详情) (4c0bc5f)
  • 🚀 新增功能(查看详情) (cbd8dc2)
  • 🚀 新增横向、纵向、经典布局切换 (1046de4)
  • 🚀 新增界面配置功能 (39ffc5e)
  • 🚀 新增路由相关功能 (9679eed), closes #71 #72 #49
  • 🚀 新增请求示例，参见 loginApi (d49b227)
  • 🚀 新增图标选择组件 (ce5e165)
  • 🚀 新增图片上传组件 (c50c421)
  • 🚀 新增图片上传组件属性 (d7670ed)
  • 🚀 新增系统管理模块 (23748e1)
  • 🚀 新增消息通知 (66836b6)
  • 🚀 新增页面刷新功能 (5223a41)
  • 🚀 新增引导页 (4fb6fb3)
  • 🚀 新增组件参数配置文档 (0e11fc5)
  • 🚀 修改 keepAlive 逻辑 (168ca13)
  • 🚀 修改 pinia 持久化插件 (a7691ae)
  • 🚀 优化代码注释 && 升级 element 到 2.2.6 (b84512b)
  • 🚀 优化注释 && 代码细节问题 (9d0ffa5)
  • 🚀 预定义主题颜色 (8219178)
  • 🚀 增加 SearchForm 属性透传 (eadb89b)
  • 🚀 增加表格 treeFilter、更新整体布局样式 (719b78f)
  • 🚀 增加布局方式切换，样式已完成 (5745b93)
  • 🚀 增加分类筛选器 (c95a1c0)
  • 🚀 增加全局错误拦截 && 修改细节问题 请查看详情 (0496184)

Bug Fixes

  • 🧩 菜单搜索过滤掉 isHide 为 true 的菜单 (c6bab35)
  • 🧩 解决 useTable 查询参数 bug (a86e408)
  • 🧩 去除登陆页默认账号 (3dda3fe)
  • 🧩 删除 protable 组件 image 配置属性 (d699fe7)
  • 🧩 修复 国际化 产生的 bug (ec4f74a)
  • 🧩 修复 axios 请求超时未拦截错误 (856468e)
  • 🧩 修复 bug (3714abd)
  • 🧩 修复 Pro-Tabel 列设置 bug (a3b86a0)
  • 🧩 修复 pro-table 格式报错问题 (2ef11fd)
  • 🧩 修复布局样式 bug (2f1cd64)
  • 🧩 修复打包错误 (243ebfc)
  • 🧩 修复打包失败 (31698fe)
  • 🧩 修复打包失败问题 (1778651)
  • 🧩 修复分栏布局 bug (113274a)
  • 🧩 修复经典布局展示 bug (b95e237)
  • 🧩 修复路由跳转两次不能携带参数问题 (8b583f3)
  • 🧩 修复请求 header 参数丢失 bug (3598dbc)
  • 🧩 修复上传组件细节问题 (8528358)
  • 🧩 修复 BUG (4bf2988)
  • 🧩 修复 BUG (c93aaf7)
  • 🧩 修复 loading 请求 bug (a3270ec)
  • 🧩 修复 vercel 打包失败 (e63dee1)
  • 🧩 修改 Pro-Table 表头渲染方式 (aa57294)
  • 🧩 修改 useTable 存在的 bug (5bb55b3)
  • 🧩 修改 useTable 钩子中的 bug (675aed8)
  • 🧩 修改 useTable 携带默认查询参数 bug (ee585b2)
  • 🧩 修改代码细节 && 优化注释 (d86cb1f)
  • 🧩 修改当菜单设置 isHide=true 时面包屑报错 (66885c5)
  • 🧩 修改文件导出失败 bug (208e720)
  • 🧩 修改 BUG (540048a)
  • 🧩 fix use pinia bug (609aa69)
  • 修复登录后白屏 (f986c5c)
  • el-table: 🧩 修复 el-table 在 safari 浏览器错乱 (b776a48)

0.0.6 (2022-08-22)

Features

  • 🚀 二次封装 wangEditor 富文本编辑器(50%) (4f8e266)
  • 🚀 请求全局 loading 更改为可配置 (a75d62f)
  • 🚀 升级 element-plus 到 2.25 (e98c035)
  • 🚀 添加 wangEditor 组件 (d6d2fa7)
  • 🚀 完成 wangEditor 富文本二次封装 (7362bfb)
  • 🚀 新增 主题色、灰色模式、色弱模式 配置 (7821157)
  • 🚀 新增 pro-form (3ab5a5b)
  • 🚀 新增 protbale 功能, 请查看详情 (17f2bcd)
  • 🚀 新增 SVG Icons (977602c)
  • 🚀 新增 treeFilter data 参数 (4280766)
  • 🚀 新增暗黑模式 (215e499)
  • 🚀 新增菜单搜索功能 (4aa0eef)
  • 🚀 新增界面配置功能 (39ffc5e)
  • 🚀 新增请求示例，参见 loginApi (d49b227)
  • 🚀 新增图标选择组件 (ce5e165)
  • 🚀 新增图片上传组件 (c50c421)
  • 🚀 新增图片上传组件属性 (d7670ed)
  • 🚀 新增引导页 (4fb6fb3)
  • 🚀 新增组件参数配置文档 (0e11fc5)
  • 🚀 修改 pinia 持久化插件 (a7691ae)
  • 🚀 优化代码注释 && 升级 element 到 2.2.6 (b84512b)
  • 🚀 优化注释 && 代码细节问题 (9d0ffa5)
  • 🚀 预定义主题颜色 (8219178)
  • 🚀 增加 SearchForm 属性透传 (eadb89b)
  • 🚀 增加表格 treeFilter、更新整体布局样式 (719b78f)

Bug Fixes

  • 🧩 解决 useTable 查询参数 bug (a86e408)
  • 🧩 去除登陆页默认账号 (3dda3fe)
  • 🧩 删除 protable 组件 image 配置属性 (d699fe7)
  • 🧩 修复 国际化 产生的 bug (ec4f74a)
  • 🧩 修复 axios 请求超时未拦截错误 (856468e)
  • 🧩 修复 Pro-Tabel 列设置 bug (a3b86a0)
  • 🧩 修复 pro-table 格式报错问题 (2ef11fd)
  • 🧩 修复打包失败问题 (1778651)
  • 🧩 修复路由跳转两次不能携带参数问题 (8b583f3)
  • 🧩 修复请求 header 参数丢失 bug (3598dbc)
  • 🧩 修复上传组件细节问题 (8528358)
  • 🧩 修复 loading 请求 bug (a3270ec)
  • 🧩 修改 Pro-Table 表头渲染方式 (aa57294)
  • 🧩 修改 useTable 存在的 bug (5bb55b3)
  • 🧩 修改 useTable 钩子中的 bug (675aed8)
  • 🧩 修改 useTable 携带默认查询参数 bug (ee585b2)
  • 🧩 修改代码细节 && 优化注释 (d86cb1f)
  • 🧩 修改文件导出失败 bug (208e720)
  • 🧩 fix use pinia bug (609aa69)
  • 修复登录后白屏 (f986c5c)

0.0.5 (2022-07-21)

Features

  • 🚀 新增请求示例，参见 loginApi (d49b227)

Bug Fixes

  • 🧩 解决 useTable 查询参数 bug (a86e408)
  • 🧩 修复 axios 请求超时未拦截错误 (856468e)
  • 🧩 修复请求 header 参数丢失 bug (3598dbc)

0.0.4 (2022-07-12)

Features

  • 🚀 新增 主题色、灰色模式、色弱模式 配置 (7821157)
  • 🚀 新增 pro-form (3ab5a5b)
  • 🚀 新增菜单搜索功能 (4aa0eef)
  • 🚀 新增界面配置功能 (39ffc5e)
  • 🚀 预定义主题颜色 (8219178)
  • 🚀 增加 SearchForm 属性透传 (eadb89b)

Bug Fixes

  • 🧩 修复 pro-table 格式报错问题 (2ef11fd)
  • 🧩 修改文件导出失败 bug (208e720)
  • 🧩 fix use pinia bug (609aa69)

0.0.2 (2022-06-29)

0.0.2 (2022-06-20)

Features

  • 🚀 请求全局 loading 更改为可配置 (a75d62f)
  • 🚀 升级 element-plus 到 2.2.5 (e98c035)
  • 🚀 新增暗黑模式 (215e499)
  • 🚀 新增图标选择组件 (ce5e165)
  • 🚀 修改 pinia 持久化插件 (a7691ae)
  • 🚀 优化代码注释 && 升级 element 到 2.2.6 (b84512b)

Bug Fixes

  • 🧩 去除登陆页默认账号 (3dda3fe)
  • 🧩 修复 Pro-Table 列设置 bug (a3b86a0)
  • 🧩 修复 loading 请求 bug (a3270ec)
  • 🧩 修改 Pro-Table 表头渲染方式 (aa57294)
  • 🧩 修改 useTable 存在的 bug (5bb55b3)
  • 🧩 修改 useTable 钩子中的 bug (675aed8)
  • 🧩 修改 useTable 携带默认查询参数 bug (ee585b2)
编辑 | blame | 历史 | 原始文档 
MIT License

Copyright (c) 2022 Halsey

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.