# vue3-default-setting-template

**Repository Path**: time-xby/vue3-default-setting-template

## Basic Information

- **Project Name**: vue3-default-setting-template
- **Description**: vue3基础后台模板 ，基于v3-admin-vite的 js 版本，集成了electron , pwa
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-20
- **Last Updated**: 2025-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 技术栈

- **Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
- **Element Plus**：Element UI 的 Vue3 版本
- **vxe table**: 可编辑单元格table组件
- **Pinia**: 传说中的 Vuex5
- **Vite**：vite5版本构建
- **Vue Router**：页面跳转，路由的前置守卫进行登录拦截的控制
- **PNPM**：更快速的，节省磁盘空间的包管理工具
- **Scss**：和 Element Plus 保持一致
- **normalize.css** ： 格式化 css 基础样式
- **CSS 变量**：主要控制项目的布局和颜色
- **ESlint**：代码校验
- **Prettier**：代码格式化
- **Axios**：发送网络请求（已封装好）
- **兼容移动端**: 布局兼容移动端页面分辨率
- **screenfull** ： 全屏放大
- **sortablejs** ： 拖拽排序
- **keyboardjs** ： 键盘事件监听
- **vue-i18n** ：国际化
- **vue-print-nb** ：打印

## 开发

```bash
# 配置
1. 一键安装 .vscode 目录中推荐的插件
2. node 版本 18.x 或 20+  推荐18.18.0
3. pnpm 版本 8.x 或最新版

# 安装 pnpm
npm install -g pnpm

# 配置pnpm 镜像源
pnpm config set registry https://registry.npmmirror.com

# 验证 安装
pnpm -v

# 安装依赖
pnpm i

# 启动服务
pnpm run dev
```

## 多环境打包

```bash
# 构建测试环境
pnpm run build:test

# 构建正式环境
pnpm build:prod
```

## 代码检查

```bash
# 代码格式化修复
pnpm run lint:fix

# 检查代码格式
pnpm run lint

# 使用prettier格式
pnpm run format
```

## electron 桌面端开发

```bash
# 启动electron 开发环境
pnpm run electron:dev

# 启动electron 打包环境
pnpm run electron:build
```

## 目录结构

```bash
├── .husky                     # git提交前代码检查钩子
├── .vscode                    # vscode项目所使用的插件及代码片段
├── dist                       # 最终打包结果
├── dist_electron              # electron最终打包exe文件
├── electron                   # electron 配置文件
├── node_modules               # 项目依赖包
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── app-loading.css        # 空白时加载状态
├── src                        # 源代码
│   ├── api                    # 所有请求接口
│   ├── assets                 # 图片 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── config                 # 项目配置文件
│   ├── constants              # 项目 枚举类文件
│   ├── directives             # 全局 指令
│   ├── hooks                  # 全局hooks 文件
│   ├── icons                  # 项目所有 svg icons
│   ├── languages              # 项目国际化文件
│   ├── layouts                # layout 布局文件
│   ├── plugins                # 全局公共插件库 包含element-plus
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
├── vite                       # vite所使用的插件
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .prettierrc.js             # prettier 配置项
├── buildVersion.js            # 打包自动生成版本号和时间
├── commitlint.config.js       # git 提交类型
├── index.html                 # 项目静态模板
├── package.json               # package.json
└── vite.config.mjs            # vite配置文件
```

## 生产环境所使用的依赖包

| "@element-plus/icons-vue": "^2.3.1" | "@vxe-ui/plugin-render-element": "4.0.7" |
| :---------------------------------- | ---------------------------------------- |
| "axios": "^1.7.7"                   | "dayjs": "^1.11.13",                     |
| "element-plus": "^2.8.6",           | "js-cookie": "^3.0.5",                   |
| "lodash-es": "^4.17.21",            | "mitt": "^3.0.1",                        |
| "normalize.css": "^8.0.1",          | "nprogress": "^0.2.0",                   |
| "path-browserify": "^1.0.1",        | "path-to-regexp": "^8.2.0",              |
| "pinia": "^2.2.2",                  | "pinia-plugin-persistedstate": "^3.2.1", |
| "screenfull": "^6.0.2",             | "vue": "^3.5.12",                        |
| "vue-i18n": "^10.0.4",              | "vue-router": "4.4.5",                   |
| "vxe-pc-ui": "4.2.46",              | "vxe-table": "4.8.8"                     |

## 开发环境所使用的依赖包

| "@commitlint/cli": "^19.4.0",                 | "@commitlint/config-conventional": "^19.2.2", |
| --------------------------------------------- | --------------------------------------------- |
| "@types/eslint": "^9.6.1",                    | "@types/node": "22.9.0",                      |
| "@typescript-eslint/eslint-plugin": "6.19.0", | "@typescript-eslint/parser": "6.19.0",        |
| "@vitejs/plugin-vue": "^5.1.2",               | "@vitejs/plugin-vue-jsx": "^4.0.1",           |
| "electron": "^33.0.2",                        | "electron-builder": "^25.1.8",                |
| "eslint": "8.57.1",                           | "eslint-config-prettier": "9.1.0",            |
| "eslint-plugin-prettier": "5.2.1",            | "eslint-plugin-vue": "9.30.0",                |
| "husky": "^8.0.0",                            | "lint-staged": "^15.2.9",                     |
| "postcss": "8.4.21",                          | "prettier": "3.2.4",                          |
| "sass": "1.78.0",                             | "unplugin-auto-import": "^0.18.2",            |
| "vite": "^5.4.8",                             | "vite-plugin-eslint": "^1.8.1",               |
| "vite-plugin-pwa": "^0.20.5",                 | "vite-plugin-svg-icons": "^2.0.1",            |
| "vite-svg-loader": "^5.1.0"                   |                                               |

## Git 提交规范参考

- **build**: 编译相关的修改，例如发布版本
- **feat**: 新增功能或特性
- **fix**: 修复 bug
- **update**: 更新某功能
- **refactor**: 重构代码
- **docs**: 文档更新
- **chore**: 构建过程或辅助工具的变动
- **style**: 代码风格调整，如格式化代码、修改空格等
- **clear**: 清理无用的代码
- **revert**: 撤销 commit,回滚到上一个版本
- **perf**: 性能优化
- **test**: 测试

## 提交格式

```bash
git commit -m <type>[optional scope]: <description> // 注意冒号后面有空格
- type：提交的类型（如新增、修改、更新等）
- optional scope：涉及的模块，可选
- description：任务描述
```

## 示范

```bash
git commit -m 'feat: 增加 xxx 功能'
git commit -m 'fix: 修复 xxx 功能'
```

## 安装遇到的问题

出现安装不了的问题，我们可以打开npm的配置文件

```bash
npm config edit
```

然后会出现一个文本，我们去编辑文本将下面配置添加上去，如果有就这几项配置那就去修改

```bash
registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
```

执行下面命令清除缓存，在安装就好了

```bash
npm cache clean --force
```