Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。

在公司的开发过程中，经常会需要开发管理后台的需求，经过一段时间的尝试和摸索，发现 vben 框架基本满足业务的需求，并且封装了丰富的组件，开发十分高效，在这里和大家介绍如何上手该框架的使用，本文主要讲述常用的使用流程，供快速上手开发进行学习，具体的应用还需要开发者到官方文档进行查看，

官方网址

https://doc.vvbin.cn/

代码下载

注意：

- 存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

- 不同地址下载的代码，会存在依赖包，项目代码不一致的情况，可能存在逻辑缺陷。

1、gitee获取

完整版：git clone https://gitee.com/annsion/vue-vben-admin.git
Gitee的代码可能不是最新的

2、github获取

完整版：git clone https://github.com/vbenjs/vue-vben-admin.git
简化版：git clone https://github.com/vbenjs/vben-admin-thin-next
精简了 views 文件夹内 demo 页面

项目运行

首选推荐使用 pnpm 包管理工具，下载依赖包成功率较高，npm和yarn经常出现各种奇怪的错误。

nodejs 版本目前发现 14.x 和 16.x 都是支持的，其他版本可以研究一下。

安装pnpm：
npm install -g pnpm

安装依赖：
pnpm install

运行：
pnpm serve
npm run dev
yarn serve

打包：
pnpm build
pnpm run build

注意：早期拉取的框架代码，打包是会 husky 插件报错，如有遇到相同问题，安装对应依赖包即可：pnpm install husky --save-dev（务必在单独安装依赖包的时候，使用的指令和 install 时使用的保持一致）

项目使用的相关资源

1、CSS样式库：https://www.tailwindcss.cn/docs/responsive-design

在框架中，响应式CSS样式大多采用该库类名实现，需要添加新的样式可优先在此进行查找。

2、icon图标库：https://iconify.design/

在路由图标，表格操作栏图标中使用该库名称进行实现，可以进行查找。

环境配置

env

# port
VITE_PORT = 3100
运行端口，一般本地运行使用到
# spa-title
VITE_GLOB_APP_TITLE = Vben Admin
网站标题和进入网页加载中显示文字，如下截图红色框位置
# spa shortname
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin
简称，用于配置文件名字 不要出现空格、数字开头等特殊字符，一般不使用到，没有明显作用

env.development

此文件一般只关注下方三个配置即可。
接口跨域，代理配置
使用数组形式，不要换行代码。第一项为代理替换的标识符，非上传接口与 VITE_GLOB_API_URL 一致即可
VITE_PROXY = [["/api","http://hello-teacher.t.haikevr.com/api/"],["/api/file","http://hello-teacher.t.haikevr.com/api/file"]]
接口地址
VITE_GLOB_API_URL=/api
上传文件接口
VITE_GLOB_UPLOAD_URL=/api/file/upload

env.production

此文件一般只关注下方三个配置即可。
mock数据是否启用，上线版本务必关闭，否则上传接口会有错误
VITE_USE_MOCK = false
接口地址
VITE_GLOB_API_URL=http://hello-teacher.t.haikevr.com/api
上传文件接口
VITE_GLOB_UPLOAD_URL=api/file/upload

根据开发情况进行调整的配置项

1、主题色配置

用于有设计稿需求的项目，为减少样式操作，可先修改主题色，再对单个位置进行调整，根据实际情况考虑是否使用。

默认全局主题色配置位于 build/config/glob/themeConfig.ts 内，只需要修改 primaryColor 为您需要的配色，然后重新启动代码即可。

（PS：路由页面可能大部分存在缓存，修改之后发现页面样式没变化，可以切换登录页面，刷新后重新进入查看）

export const primaryColor = '#0960bd';

2、代码提交检测配置

框架自带对代码提交备注进行检测，确保规范的统一，如不需要检测，可对配置进行修改。

.husky 目录下
    - commit-msg 
注释如下代码：
npx --no-install commitlint --edit "$1"

    - pre-commit
此文件删除

3、接口结构配置

接口返回结果相关配置

src - enums - httpEnum.ts

export enum ResultEnum {
  SUCCESS = 200, 成功状态返回码
  ERROR = 1,
  TIMEOUT = 401, 登录过期返回码（配置此处，登录过期时axios封装代码将会自动跳转登录页，见utils-http/axios-index.ts:line 72）
  TYPE = 'success',
}

src - utils - http - axios - index.ts

line:51
    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
    let { code, data: items, msg, img } = data;
    //如果是列表请求，即list（items）存在，则result为列表数据和总数，否则为true
    //items instanceof Array===>这一步处理是因为因为返回数据直接为数组，不是对象
    let result = items?.rows ? { items: items.rows, total: items.total } : items instanceof Array ? items : items ;
    //对验证码进行处理
    result = img ? data : result;

table 组件列表配置

src - settings - componentSetting.ts

table: {
    fetchSetting: {
      列表接口页面数字段名，根据后端字段调整
      pageField: 'pageNum',
      列表接口分页记录数字段名，根据后端字段调整
      sizeField: 'pageSize',
      接口返回列表数据读取的字段名，需要注意看 axios 拦截器返回的格式，而不是直接看接口返回的
      listField: 'items',
      列表接口总记录条数字段名，根据后端字段调整
      totalField: 'total',
    },
}

vben框架-快速上手开发