# vue3-web-base **Repository Path**: Eric1689/vue3-web-base ## Basic Information - **Project Name**: vue3-web-base - **Description**: 基于vue3的web端后台管理系统通用脚手架 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-02-04 - **Last Updated**: 2024-02-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 中后台管理系统模板 ### 技术栈 ##### **Vue3、TypeScript、Vite4、Pinia、Element-Plus、Axios** - 使用 Vue3 + TypeScript 开发，单文件组件**＜ script setup ＞** - 使用 Vite4 作为项目开发、打包工具 - 使用 Pinia 替代 Vuex，轻量、简单、易用，集成 Pinia 持久化插件 - 使用 Element-Plus 组件库 - 使用 Axios 封装请求 ### 项目目录 ```text ├─ .husky # husky 配置文件 ├─ .vscode # VSCode 推荐配置 ├─ build # Vite 配置项 ├─ public # 静态资源文件（该文件夹不会被打包） ├─ src │ ├─ assets # 静态资源文件 │ ├─ components # 全局组件 │ ├─ config # 全局配置项 │ ├─ directives # 全局指令文件 │ ├─ hooks # 常用 Hooks 封装 │ ├─ i18n # 语言国际化 i18n │ ├─ layouts # 框架布局模块 │ ├─ routers # 路由管理 │ ├─ stores # pinia store │ ├─ styles # 全局样式文件 │ ├─ types # 全局 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 样式格式化配置 ├─ commitlint.config.cjs # git 提交规范配置 ├─ index.html # 入口 html ├─ 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 全局配置文件 ``` ### 安装使用 - **Install：** ```text npm install ``` - **Run：** ```text npm run dev ``` - **Build：** ```text # 开发环境 npm build:dev # 测试环境 npm build:test # 生产环境 npm build:pro ``` - **Lint：** ```text # eslint 检测代码 npm lint:eslint # prettier 格式化代码 npm lint:prettier # stylelint 格式化样式 npm lint:stylelint ``` ### 项目功能 1. **自动导入** vue 模块、element-plus 组件使用自动导入功能，无需使用 import 导入。 2. **图标使用方式** - 图标自动导入 Element Plus 中的图标组件名为*i-ep-图标名称*：`` `https://icon-sets.iconify.design/` 中的图标组件名为*i-图标集名-图标名*：`` （注意：需要先在 vite.config.ts 中配置图标集） - 使用 SvgIcon 组件 将图片放于*assets/icons*文件夹下，组件 name 属性为*子文件夹/图标文件名*：`` 3. **全局修改 Element 组件样式及主题色** - 通过覆盖 scss 变量修改，在`/styles/element/var.scss`文件中重写覆盖变量 - 通过选择器覆盖 css 样式修改，在`/styles/element/index.scss`文件中重写覆盖样式 4. **菜单按钮权限配置** - 菜单权限 通过动态获取菜单来实现菜单权限。 - 按钮权限 使用 Hooks 方式绑定权限：`const { userManage } = useAuthButtons(); ` 使用 v-auth 指令绑定权限：` ` 5. **国际化** i18n文件夹下为国际化配置文件，组件库国际化逻辑在App.vue中，Topbar上有语言切换功能。 6. **上传下载文件** - 上传文件：使用`/components/Upload/File`组件上传。 - 下载文件：使用`/hooks/useDownload` hook 下载 7. **ECharts** - 使用`/utils/echarts`中的 ECharts 对象构建图表实例，并使用`/hooks/useEcharts`复用公共逻辑。 8. **自定义指令** - 复制指令：v-copy - 防抖指令：v-debounce - 节流指令：v-throttle ### 项目规范 #### 项目文件、组件命名规范 采用 Vue 官方推荐的风格指南(Vue3)`https://cn.vuejs.org/style-guide` **Components 项目级组件的文件结构** ```text ├─ Component # 组件文件夹，一个组件一个文件夹，首字母大写 │ ├─ components # 子组件，子组件名称首字母大写 │ ├─ types # ts 类型 | ├─ index.scss # 样式可单独文件，也可直接写在vue文件中 | ├─ index.vue # 组件文件 ``` **Views 项目模块文件结构** ```text ├─ Module # 一级菜单文件夹 │ ├─ SubModule # 二级菜单文件夹 │ │ ├─ apis # 接口 │ │ ├─ components # 子组件，子组件名称首字母大写 │ │ ├─ types # ts 类型 │ │ ├─ constant.ts # 静态变量 │ │ ├─ index.vue # 页面文件，首字母小写 ``` **Ts 类型文件规范** - 全局：`/src/types`文件夹下 - 项目组件：每个组件文件夹下创建 types 文件夹 - 项目模块：二级菜单文件夹下创建 types 文件夹 - 页面级别类型：在页面中创建 ts 类型。 - 其他：类似 hooks、stores 中的类型，分别在每个文件夹下创建 types 文件夹 #### 代码规范工具 1. **代码格式化工具 Prettier** `.prettierrc.cjs`文件中查看代码格式规则 2. **代码规范工具 ESlint** `.eslintrc.cjs`文件中查看代码规范规则 3. **样式规范工具 StyleLint** `stylelintrc.cjs`文件中查看样式规范规则 4. **不同编辑器间编码风格统一 EditorConfig** `.editorconfig`文件中配置不同编辑器编码风格统一 #### Git 流程规范 1. Git 提交信息规范 commitlint `commitlint.config.cjs`中配置了提交信息规范 2. 分支管理规定 - dev 开发环境分支 - test 测试环境分支 - main 线上环境分支 **功能开发** 从 main 分支拉 feature 分支，命名为*feature/用户名/功能*，完成后发开发环境合并到 dev 分支，发测试分支合并到 test 分支，发线上合并到 main 分支。禁止直接将 dev 合并到 test，以及 test 合并到 main。 **Bug 修复** 从 main 分支拉 hotfix 分支，命名为*hotfix/用户名/功能*，完成后合并规则同功能开发。