【Vben Admin】

环境准备

本地环境需要安装 Yarn1.x、Node.js 和 Git

注意
必须使用Yarn1.x，否则依赖可能安装不上。
Node.js 版本要求12.x以上，且不能为13.x版本，这里推荐 14.x 及以上。

如果此项条件没有满足的话，yarn install 的时候会报错
例：

安装依赖

yarn 安装

必须使用 Yarn进行依赖安装（若其他包管理器安装不了需要自行处理）。

如果未安装yarn，可以用下面命令来进行全局安装

全局安装yarn

npm i -g yarn

验证

yarn -v # 出现对应版本号即代表安装成功
#依赖安装命令
在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

目录说明

├── build # 打包脚本相关
│ ├── config # 配置文件
│ ├── generate # 生成器
│ ├── script # 脚本
│ └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│ ├── api # 接口文件
│ ├── assets # 资源文件
│ │ ├── icons # icon sprite 图标文件夹
│ │ ├── images # 项目存放图片的文件夹
│ │ └── svg # 项目存放svg图片的文件夹
│ ├── components # 公共组件
│ ├── design # 样式文件:项目中使用的通用样式都存放于这个下面
│ ├── directives # 指令
│ ├── enums # 枚举/常量
│ ├── hooks # hook
│ │ ├── component # 组件相关hook
│ │ ├── core # 基础hook
│ │ ├── event # 事件相关hook
│ │ ├── setting # 配置相关hook
│ │ └── web # web相关hook
│ ├── layouts # 布局文件
│ │ ├── default # 默认布局
│ │ ├── iframe # iframe布局
│ │ └── page # 页面布局
│ ├── locales # 多语言
│ ├── logics # 逻辑
│ ├── main.ts # 主入口
│ ├── router # 路由配置：且下面的modules用于存放路由模块，此目录 文件会自动注册

【新增路由】
在src/router/routes/modules 内新增一个文件
【路由刷新】
采用重定向

import { useRedo } from '/@/hooks/web/usePage';
import { defineComponent } from 'vue';
export default defineComponent({
 setup() {
   const redo = useRedo();
  // 执行刷新
  redo();
  return {};
},
});

【路由跳转】

import { useGo } from '/@/hooks/web/usePage';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const go = useGo();

// 执行刷新
go();
go(PageEnum.Home);
return {};
},
});

【多标签页】
使用keep-alive 和router-view实现，实现切换后还能保持切换之前的状态

【页面开启缓存】
3个条件：
1）src/setting/projectsetting.ts内将openkeepAlive设置为true
2）路由设置name，且不能重复
3）路由对应组件上加上name，与路由设置的name保持一致
(配置的路由与页面中的name一致)
【页面关闭缓存】
在src/router/routes/modules下面的文件meta下配置
ingoreKeepA live:true;
【更改首页路由】
pageEnum.ts中的BASE_HOME更改你想设置的首页即可

export enum PageEnum {
// basic home path
  // 更改此处即可
  BASE_HOME = '/dashboard',
}

│ ├── settings # 项目配置
│ │ ├── componentSetting.ts # 组件配置：用于配置某些组件的常规配置，而无需修改组件
里面有关于表格的配置
│ │ ├── designSetting.ts # 样式配置：用于修改项目内组件class的统一前缀
│ │ ├── encryptionSetting.ts # 加密配置：对缓存到浏览器的信息进行 AES加密
前提：使用自带的缓存工具 /@/untils/cache
│ │ ├── localeSetting.ts # 多语言配置

│ │ ├── projectSetting.ts # 项目配置：用于配置项目内容、布局文本等效果
│ │ └── siteSetting.ts # 站点配置
│ ├── store # 数据仓库
│ ├── utils # 工具类
│ └── views # 页面
├── test # 测试
│ └── server # 测试用到的服务
│ ├── api # 测试服务器
│ ├── upload # 测试上传服务器
│ └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件

菜单

项目菜单配置存放于 src/router/menus下面

提示:
菜单必须和路由匹配才能显示

新增菜单

直接在 src/router/menus/modules 内新增一个模块文件即可。

不需要手动引入，放在src/router/routes/menus/modules 内的文件会自动被加载。

菜单排序

在菜单模块内，设置 orderNo 变量，数值越大，排序越靠后

接口请求

接口统一存放于src/api下面管理 => {
1)页面交互操作
2）调用统一的api函数
3）使用封装的axios.ts发送请求
4）获取服务端返回数据
5）更新data
}

axios配置

axios 请求封装存放于 src/utils/http/axios 文件夹内部

除index.ts文件内容需要根据项目修改外，其余文件无需修改

├── Axios.ts // axios实例
├── axiosCancel.ts // axiosCancel实例，取消重复请求
├── axiosTransform.ts // 数据转换类
├── checkStatus.ts // 返回状态值校验
├── index.ts // 接口返回统一处理

打包

打包后会生成 一个 dist 文件