# admin-vue3-element3-vite2

**Repository Path**: BluesYoung-web/admin-vue3-element3-vite2

## Basic Information

- **Project Name**: admin-vue3-element3-vite2
- **Description**: 基于Vue3，Element Plus，TypeScript的后台管理系统(使用 Vite2)
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 21
- **Forks**: 4
- **Created**: 2021-03-08
- **Last Updated**: 2025-04-26

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

<!--
 * @Author: zhangyang
 * @Date: 2021-02-24 11:28:17
 * @LastEditTime: 2022-11-30 15:13:24
 * @Description: 项目说明
-->
# 后台管理系统

## 配套后端程序

- [admin-server正在开发中...](https://gitee.com/BluesYoung-web/admin-server.git)

## node 版本

- 根据 `.nvmrc` 内的配置自动切换(Linux)
- 环境需求：
  - 安装 `nvm`
  - 使用 `nvm install *` 安装某个版本的node
  - 命令行：
    - `bash` 在 `~/.bashrc` 内新增以下内容：
    - [其他](https://github.com/nvm-sh/nvm#deeper-shell-integration)

```bash
# 加载 nvm 命令，如存在请忽略
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# 自动切换 node 版本(重载 cd 命令，根据目录下的.nvmrc 自动(安装)切换)
cdnvm() {
  command cd "$@";
  nvm_path=$(nvm_find_up .nvmrc | tr -d '\n')
  # 如果项目目录下不存在对应的 .nvmrc 配置文件，则使用默认的版本
  if [[ ! $nvm_path = *[^[:space:]]* ]]; then
    declare default_version;
    # 获取默认的 node 版本
    default_version=$(nvm version default);
    # 如果没有设置默认的 node 版本，则将最新版作为默认的 node 版本
    if [[ $default_version == "N/A" ]]; then
      nvm alias default node;
      default_version=$(nvm version default);
    fi
    # 如果不存在配置文件并且当前版本不等于默认的版本，则切换为默认的 node 版本
    if [[ $(nvm current) != "$default_version" ]]; then
      # echo "使用默认的 node 版本： $default_version";
      nvm use "$default_version";
    fi
  # 如果存在配置文件则使用配置文件中的 node 版本
  elif [[ -s $nvm_path/.nvmrc && -r $nvm_path/.nvmrc ]]; then
    declare nvm_version
    # 取出配置文件中的 node 版本
    nvm_version=$(<"$nvm_path"/.nvmrc)
    declare locally_resolved_nvm_version
    # 检测对应的 node 版本是否安装
    locally_resolved_nvm_version=$(nvm ls --no-colors "$nvm_version" | tail -1 | tr -d '\->*' | tr -d '[:space:]')
    if [[ "$locally_resolved_nvm_version" == "N/A" ]]; then
      # echo "未安装，安装并使用: $nvm_version";
      nvm install "$nvm_version";
      # 全局安 yarn
      npm i -g yarn;
    elif [[ $(nvm current) != "$locally_resolved_nvm_version" ]]; then
      # echo "已安装，直接使用: $nvm_version";
      nvm use "$nvm_version";
    fi
  fi
}
alias cd='cdnvm'
cd "$PWD"
```

## 权限管理

- 所有用户必须登录
- 后端权限管理 + 前端权限管理

## 前置条件(本地运行)

- 在项目根目录下新建 `.env.local` 文件，内容如下:

```bash
# ！！！ 变量名必须以 VITE_ 开头
# 使用 import.meta.变量名 获取

VITE_TITLE = '小黑管理后台'

# 后端使用 nginx 代理来跨域时，使用绝对路径
# 模拟与真实共存，路径不能重复，不然就无法发出真实请求
VITE_BASE_HTTP = '/mockapi'
# websocket 连接地址，使用NGINX代理时为绝对路径，其他情况需要使用带协议的完整路径
VITE_BASE_WS = '/wss'

# 真实地址(树莓派内网穿透)
VITE_PI_HTTP = 'http://frp.104300.xyz:15151/api/admin'
VITE_PI_WS = 'ws://frp.104300.xyz:15151/wss/admin'
# 是否启用真实请求混入(关闭时无需设置)
# VITE_ENABLE_PI = true
```

## 注意事项

- `yarn build`**因生产需要，将 node 运行内存设为了 1G(1024)**
- `yarn build:prod` 无内存限制

## 运行 | 打包

- 推荐使用(`yarn build | yarn build:prod | yarn build:prod.nginx`)
- 生产模式下包的体积最小(各种摇树优化)

```bash
# 装依赖
yarn
# 升级最新依赖(同时更新 yarn.lock 和 package.json)
yarn upgrade-interactive --latest
# 手动升级特定版本
yarn upgrade package-name@version

# 本地运行(请求真实开发服服务器)
yarn dev
# 本地运行(使用自定义vite插件注入的中间件实现 mock，可以在控制台看到真实的请求)
yarn dev:mock
# 本地运行(请求测试服务器)
yarn dev:test
# 本地运行(请求正式服务器)
yarn dev:prod

# ------ 本地运行及打包 ------
# --- 依赖 .env.{MODE}.local 内部的环境变量 ---
# 打mock包
yarn build:mock
# 打开发服包
yarn build:dev
# 打开发服包(后端配置了 nginx 代理，请求'/api/dev')
yarn build:dev.nginx
# 打测试服包
yarn build:test
# 打测试服包(后端配置了 nginx 代理，请求'/api/test')
yarn build:test.nginx
# 打正式服包
yarn build:prod
# 打正式服包(后端配置了 nginx 代理，请求'/api/prod')
yarn build:prod.nginx
# 本地预览打包后的页面
yarn pre

# ------ 服务器打包 ------
# 1. 注入环境变量
# VITE_BASE_HTTP = '接口请求地址(必须)'
# VITE_TITLE = '后台标题(可选)'
# 2. 打包
yarn build
```

## 代码格式化

`yarn format`

使用 [rome](https://rome.tools/) 作为格式化工具

**请在 Linux 系统下使用，目前 window 系统下存在 bug，无法使用**

## <span style="color: red">定制化命令行脚本</span>

- 快捷指令 `yarn cli`
  - `createNewTemplate` 自动创建页面模板所需的文件并更新模板配置
  - `createNewPage`：
    - 自动创建页面并生成路由配置
    - 拥有数个常用的模板页面，可以根据需要随意选择

## 项目说明

- [在线预览(Mock)](https://bluesyoung-web.gitee.io/admin-vue3-element3-vite2)
- [在线预览(树莓派内网穿透服务器，可能不在线)](http://frp.104300.xyz:15151/)
- 本项目创意源自 Vue-Element-Admin
- 主用技术栈：Vue3 Element-Plus TypeScript
- 此版本为 admin-vue3-element3 的改进版：
  - [x] 采用全新的 vite2.0
  - [x] 加入了 polyfill，兼容性(**国产浏览器的极速模式及所有的现代浏览器**)
  - [x] 方法自动按需导入(基于[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import))
  - [x] 组件自动按需导入(基于[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components))
  - [x] 图标自动按需导入(基于[unplugin-icons](https://github.com/antfu/unplugin-icons))
  - [x] 防抖与节流的自定义指令
  - [x] 二次封装常用组件
    - 表格(配套导出为Excel表的方法)
    - 表单(用JSON配置书写表单项)
    - 右键菜单
    - 弹出层
    - 富文本编辑器
    - 分页
    - tab
    - ...
- **使用 windicss，零配置自动 css 摇树优化**
- **拥有自动创建页面的 node 脚本，实现页面创建及路由注册自动化**