ai-manus/chat-client

官方文档

https://vuejs-core.cn/admin-book-2025/ 密码Vabdbsqj或zxwkbf

1.环境要求

node版本要求：16+，node版本22.14.0版本(npm 8.15.0) 可用，其它自行测试。

当电脑存在多node版本时

请使用nvm进行管理及切换

2.依赖安装

1、建议使用腾讯源安装 npm i --registry=http://mirrors.cloud.tencent.com/npm/ 2、打包如遇suport.ts文件 elMessage等简单报错，请前往报错文件手动导入 import { ElMessage, ElMessageBox } from 'element-plus' 3、打包如遇图片报错 请前往config cli.config.js关闭图片压缩 4、用户名与key在邮件邀请函，打包时记得配好 5、如果一定要用cnpm，则必须用cnpm8.2.0版本 cnpm安装教程npm install cnpm@8.2.0 -g --registry=https://registry.npmmirror.com

必须使用 powershell 管理员模式安装

npm install cnpm@8.2.0 -g --registry=https://registry.npmmirror.com

必须使用 powershell 获取管理员权限，选择A

set-ExecutionPolicy RemoteSigned

3.快速删除node_modules

项目根目录执行

cnpm i rimraf -g rimraf node_modules

4.开发工具配置

选择一种常用的开发工具，配置好环境即可规范代码，此页内容十分重要必须全部看完。 必备插件安装（建议 vscode 只保留以下插件，防止自动格式化、自动修复失效） Local History (opens new window)local-history]（强烈推荐，必须安装，可找回丢失代码） Eslint (opens new window)eslint（必须安装） Stylelint (opens new window)stylelint（必须安装） Prettier - Code formatter (opens new window)代码自动格式化（必须安装） Element Plus Helper (opens new window)（vue3 用户强烈推荐，必须安装，vab 官方出品，代码生成等）

Auto Import (opens new window)import 引入自动补全（推荐安装） Import Cost (opens new window)查看你引入的依赖模块大小（推荐安装） Auto Close Tag (opens new window)自动补全 html 标签（推荐安装） Auto Rename Tag (opens new window)自动重命名 html 标签（推荐安装） Docthis (opens new window)注释插件（可不安装） One Monokai Theme (opens new window)vscode 主题包（可不安装） Git History (opens new window)查看 git 提交历史（可不安装） Live Server (opens new window)打包项目可直接预览（可不安装） Svg Preview (opens new window)svg 查看器（可不安装）

5.代码生成

强烈推荐使用代码生成机构建页面，它会为您规避很多坑，执行完代码生成机后记得控制台命令行输入npm run lint规范一下代码格式，部分注意事项如下：

使用时尽量使用简单单词，不要使用驼峰，驼峰会被认定为多层目录 使用时文件命名切勿与已存在的文件重复，否则可能导致文件丢失 如需生成多层目录，使用/间隔即可 #运行代码生成机 npm run template #新增 router 这个不用多说了吧，建完了 view 必须在配置路由才能访问，后端配置参照 mock 文件夹下的 router.js，前端配置在 router 文件夹下的 index.js

#创建 view 不用自己建，已为您提供了模板

npm run template #键盘上下键选择创建view，填入名称会自动为您创建 #创建 api 与 mock 不用自己建，已为您提供了模板

npm run template #键盘上下键选择创建mock，填入名称会自动为您创建 #新增组件 不用自己建，已为您提供了模板

npm run template #键盘上下键选择创建components，填入名称会自动为您创建 #新增 store 不用自己建，已为您提供了模板

npm run template #键盘上下键选择创建vuex，填入名称会自动为您创建 #新增 表格增删改查全部功能 不用自己建，已为您提供了模板

npm run template #键盘上下键选择创建curd，填入名称会自动为您创建 #接下来运行代码修复 npm run lint #最后配置路由启动即可

6.全局配置

vue/cli 配置

位置：src/config/cli.config.js

网络配置

位置：src/config/net.config.js

通用配置

位置：src/config/setting.config.js

主题配置

位置：src/config/theme.config.js

vab 常用封装

说明：vab 常用的原型链封装。 位置：src/vab/plugins/vab.js

vab 常用正则校验

说明：vab 常用的原正则校验。 位置：src/utils/validate.js

7.项目开发必要接口

本项目需要三个必要的接口，联调前务必保证这登录接口、用户信息接口、退出接口无问题，请注意application/x-www-form-urlencoded;charset=UTF-8与 application/json;charset=UTF-8请求的区别，具体可在src/config/settings.js 中配置， 注意：除登录接口外其他接口连接后端后携带 token，格式如下Authorization: Bearer admin-token-24ba1FFF-AcC8-f0AE-ECea-A1EE12d712Ae-后端在登陆时返回给你的token字符串

1）登录接口 /login（post 请求） application/json;charset=UTF-8 请求参数（默认格式）

{ "username": "admin", "password": "123456" } 返回格式：（必须严格按照此格式，不能为空这里返回的 token 会在今后所有的接口中自动通过 headers 的 Authorization 携带到后端，后端注意接收并处理跨域问题）

{
  "code": 200,
  "msg": "success",
  "data": {
    "token": "admin-accessToken-xxxxxx"
  }
}

2）用户信息接口 /userInfo（get 请求）

此接口默认会通过 headers 将 Authorization（token）传递到后端，后端根据 headers 判断用户所包含的权限，并返回相应的数据即可

返回格式：（必须严格按照此格式，不能为空）。

{
  "code": 200,
  "msg": "success",
  "data": {
    "username": "admin",
    "roles": ["Admin"],
    "permissions": ["read:system", "write:system", "delete:system"],
    "avatar": "https://i.gtimg.cn/club/item/face/img/2/16022_100.gif"
  }
}

rbac文档：https://auth0.com/docs/authorization/sample-use-cases-role-based-access-control

3）退出接口 /logout（get 请求）

此接口默认会通过 headers 将 Authorization（token）传递到后端，后端根据 headers 判断用户所包含的权限，退出对应的账号即可 返回格式

{
  "code": 200,
  "msg": "success"
}

其余可配置关闭的接口，如顶部的搜索、通知接口请自行查看mock/controller下的示例

8.前端请求示例

强烈建议：所有请求放到 src/api 文件夹下

// post请求示例
import request from '@/utils/request'

export function getList(data) {
  return request({
    url: '/table/list',
    method: 'post',
    data,
  })
}
// get请求示例
import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/table/list',
    method: 'get',
    params,
  })
}

9.前端请求约定

请求中会在 headers 中自动传入 token，格式如下Authorization: Bearer admin-token-24ba1FFF-AcC8-f0AE-ECea-A1EE12d712Ae-后端在登陆时返回给你的token字符串

/表格中请求参数约定/

{
  "pageNo": 1, //页数
  "pageSize": 10 //每页条数
}

#resultful 的规范，后端返回 JSON 数据的约定

{
"code": 200, //成功的状态码
"msg": "success", //提示信息
"data": { //返回数据
"list": [{}，{}，{}], //返回数组
"total": 238, //总条数（表格中用到，其它接口可以不返回）
}
}

10.目录结构

├── .github # 自动化 ci 配置（可删除） ├── .vscode # vscode 配置（不可删除） ├── mock # 本地 mock 数据 ├── node_modules # 项目依赖模块 ├── library # 核心模块，请勿修改，仅限Plus2022年2月7日后版本 > v3.0.1 │ ├── chainWebpack # cli脚手架相关，请勿修改 │ ├── vuePlugins # vue全自动导入，非专业前端请勿修改 │ |── components # 所有vab组件 | | ├── VabApp # 入口页 | | ├── VabAppMain # 内页 | | ├── VabAvatar # 头像 | | ├── VabBreadcrumb # 面包屑 | | ├── VabCard # el-card封装（支持骨架屏） | | ├── VabColorfulCard # 多彩卡片封装 | | ├── VabErrorLog # 错误日志 | | ├── VabLanguage # 国际化 | | ├── VabFold # 展开合并 | | ├── VabFullScreen # 全屏 | | ├── VabLogo # logo | | ├── VabNav # 顶部navBar | | ├── VabNotice # 通知 | | ├── VabRefresh # 刷新 | | ├── VabSearch # 搜索 | | ├── VabSideBar # 左侧菜单 | | ├── VabTabs # 多标签页 | | ├── VabTheme # 主题 | | ├── VabTopBar # 横向布局头部 | | ├── VabLink # 链接跳转封装 | | ├── VabLock # 锁屏 | | ├── VabMenu # 菜单封装 │ | └── VabQueryForm # 顶部查询条件布局封装 │ ├── layouts # 界面布局（不需要的主题可删除，手机端适配必须保留纵向布局） | | ├── VabLayoutColumn # 分栏布局 | | ├── VabLayoutCommon # 常规布局 | | ├── VabLayoutComprehensive # 综合布局 | | ├── VabLayoutHorizontal # 横向布局 | | ├── VabLayoutFloat # 浮动布局 | | └── VabLayoutVertical # 纵向布局 │ │ ├── pulgin # vab必要插件 │ │ └── styles # vab主题相关 ├── public │ ├── img # pwa图标 │ ├── static # 静态资源 │ ├── favicon.ico # favicon图标 │ ├── favicon_backup.ico # 备份favicon │ └── index.html # 入口 HTML ├── src │ ├── api # API 服务模块 │ ├── assets # 本地静态资源 │ ├── config # 项目配置 │ │ ├── cli.config.js # vue/cli配置 │ │ ├── net.config.js # 网络配置 │ │ ├── setting.config.js # 通用配置 │ │ ├── theme.config.js # 主题配置 │ │ └── index.js # 自定义配置合并（不建议修改） │ ├── extra # 封装的小工具 │ ├── i18n # 多语言 │ ├── icon # 存放自定义svg图标 ，仅在icon属性为isCustomSvg时才会调用svg图标，如无必要建议使用内置图标 │ ├── router # 路由配置 │ ├── store # vuex 状态管理配置 │ ├── utils # js 工具 │ ├── vab(Pro以及2022年1月前的Plus) # 核心模块 │ │ |── components # 所有vab组件 | | | ├── VabAppMain # 内页 | | | ├── VabAvatar # 头像 | | | ├── VabBreadcrumb # 面包屑 | | | ├── VabFold # 展开合并 | | | ├── VabFullScreen # 全屏 | | | ├── VabLanguage # 国际化 | | | ├── VabLogo # logo | | | ├── VabNav # 顶部navBar | | | ├── VabNotice # 通知 | | | ├── VabRefresh # 刷新 | | | ├── VabSearch # 搜索 | | | ├── VabSideBar # 左侧菜单 | | | ├── VabTabs # 多标签页 | | | ├── VabTheme # 主题 | | | ├── VabTopBar # 横向布局头部 | | | ├── VabLink # 链接跳转封装 | | | ├── VabMenu # 菜单封装 │ │ | └── VabQueryForm # 顶部查询条件布局封装 │ │ ├── layouts # 界面布局(不需要主题可删除) | | | ├── VabLayoutColumn # 分栏布局 | | | ├── VabLayoutCommon # 常规布局 | | | ├── VabLayoutComprehensive # 综合布局 | | | ├── VabLayoutHorizontal # 横向布局 | | | ├── VabLayoutFloat # 浮动布局 | | | └── VabLayoutVertical # 纵向布局 │ │ ├── pulgin # vab必要插件 │ │ └── styles # vab主题相关 │ ├── views # 页面组件 │ │ ├── callback # 第三方登录回调页面 │ │ ├── index # 首页 │ │ ├── login # 登录 │ │ ├── mall # 物料市场 │ │ ├── setting # 配置 │ │ ├── register # 注册 │ │ └── vab # 组件页 │ ├── App.vue # 应用入口组件 │ ├── registerServiceWorker.js # PWA注册（支持https生产环境） │ └── main.js # 应用入口js ├── .eslintrc.js # eslint 配置项 ├── babel.config.js # babel-loader 配置 ├── package.json # package.json ├── postcss.config.js # postcss 配置 ├── prettier.config.js # prettier 配置 ├── vab.config.js # vab 配置 └── vue.config.js # vue-cli 配置

11.路由配置

路由加载实现 3 种方案：

前端进行拦截，路由写在src/router/index.js下，角色权限清晰不会随意变更时，配置authentication: "intelligence"，rolesControl:true，参数项在src/config/setting.config.js中配置 。

后端返回路由但由前端过滤权限拦截，配置authentication: "all"，rolesControl:true，后端返回接口格式可参照mock/controller/router.js，参数项在src/config/setting.config.js中配置 。

后端返回处理好权限逻辑的路由，，配置authentication: "all"，rolesControl:false，路由 JSON 无需再返回 guard 字段，后端返回接口格式可参照 mock/controller/router.js，参数项在src/config/setting.config.js中配置。

1）路由配置项

语法与 vue-router 语法一致，具体详见src/router/index.js，使用前请务必阅读https://router.vuejs.org/zh/

极为重要：name 与 path 的配置极为终于请仔细阅读注释，没理解之前请勿配置路由，name 首字母大写，一定要与 vue 文件 export 的 name 对应起来，name 名不可重复，用于 noKeepAlive 缓存控制（该项特别重要），path 注意根路由（第一条数据）是斜线，第一级路由必须带斜线，第二级路由开始不能带斜线，并且 path 名不可重复，框架会自动将父级与子级进行拼接，path 只能是一个单词切勿配置成/a/b/c这种写法

{
  "name": "Demo", //首字母大写，一定要与vue文件export的name对应起来，name名不可重复，用于noKeepAlive缓存控制（该项特别重要）
  "path": "/", //注意根路由（第一条数据）是斜线，第一级路由必须带斜线，第二级路由开始不能带斜线，并且path名不可重复，框架会自动将父级与子级进行拼接，path只能是一个单词切勿配置成`/a/b/c`这种写法
  "component": "Layout", //后端路由时此项为字符串，前端路由时此项为import的function，第一级路由是为Layout，其余为层级为vue的文件路径
  "redirect":"" //重定向到子路由，格式从第一级路由开始拼接（默认可不写）
  "meta": {
    "hidden": true, //2021年5月23日后新版用法：是否显示在菜单中显示隐藏路由（默认值：false）
    "levelHidden": false, //2021年5月23日后新版用法：是否显示在菜单中显示隐藏一级路由（默认值：false）
    "title": "title", //菜单、面包屑、多标签页显示的名称
    "icon": "", //新版图标
    "isCustomSvg": false, //是否是自定义svg图标（默认值：false，如果设置true，那么需要把你的svg拷贝到icon下，然后icon字段配置上你的图标名）
    "noKeepAlive": true, //当前路由是否不缓存（默认值：false）
    "noClosable": true, //当前路由是否可关闭多标签页，同上（2021年10月后新版支持）
    "noColumn":false, //是否隐藏分栏，仅在分栏布局中二级路由生效（默认值：false，不推荐使用）
    "badge": "New", //badge小标签（只支持子级，String类型，支持自定义）
    "tabHidden": true, //当前路由是否不显示多标签页（默认值：false，不推荐使用）
    "target": "_blank", //是否浏览新标签页打开（不适用于分栏布局左侧tab部分，不推荐使用）
    "activeMenu": "", //高亮指定菜单，要从跟路由的path开始拼接（用于隐藏页高亮）
    "dot": false, //小圆点（默认值：false）
    "dynamicNewTab": false, //动态传参路由是否新开标签页（默认值：false）
    "breadcrumbHidden": true, //面包屑是否显示（默认值：false）
    "guard": ["Admin", "..."], //2021年9月份版本，当config/settings.js中rolesControl配置开启时，用于控制角色（简写）
    "guard": {
      //2021年9月份新版本，当config/settings.js中rolesControl配置开启时，用于控制角色（全写）
      "role": ["Admin", "..."],
      "mode": "allOf" //allOf: 数组内所有角色都拥有，返回True oneOf: 数组内拥有任一角色，返回True(等价第1种数据) except: 不拥有数组内任一角色，返回True(取反)
    },
    //"affix": true, //当前路由是否固定多标签页（旧版）
    //"roles": ["admin", "..."], //旧版本，当config/settings.js中rolesControl配置开启时，用于控制角色（简写）
    //"roles": {
    //旧版本当config/settings.js中rolesControl配置开启时，用于控制角色（全写）
    //"role": ["admin", "..."],
    //"ability": ["READ", "WRITE", "DELETE"], //ability: ["READ","WRITE"],
    //"mode": "allOf" //allOf: 数组内所有角色都拥有，返回True oneOf: 数组内拥有任一角色，返回True(等价第1种数据) except: 不拥有数组内任一角色，返回True(取反)
    //},
    //"remixIcon": "", //旧版remix图标
    //"isCustomSvgIcon": false, //旧版，是否是自定义svg图标（默认值：false，如果设置true，那么需要把你的svg拷贝到icon/remixIcon下，然后remixIcon字段配置上你的图标名）
  },
   "children": [{...},{...}],
  //"hidden": true, //2021年5月23日前旧版2.0.4版本前的用法：是否显示在菜单中显示隐藏路由（默认值：false）
  //"menuHidden": false, //2021年5月23日前旧版2.0.4版本前的用法：是否显示在菜单中显示隐藏一级路由（默认值：false，除分栏布局有效）
  //"alwaysShow": true, //2021年5月23日前旧版2.0.4版本前的用法：当只有一级子路由时是否显示父路由是否显示在菜单中显示路由（默认值：false）

}

2）history 与 hash

注意事项：hash 模式时，src/config/settings.js下的publicPath字段可配置为空"",history 模式时src/config/settings.js下的publicPath字段需要配置为"/项目名/"，如果没有项目名，请配置为"/"

12.权限

1）设置角色和权限点

你可以在 src/store/modules/user.js 中 getUserInfo 的时候对角色(role)和权限点(permission)进行设置

2）权限使用

一个完整的权限判断对象

{
  "role": ["Admin", "Editor"],
  "permission ": ["read:system","write:system","delete:system"],
  "mode": "oneOf" | "allOf" | "except"
}

mode说明（mode 模式不输入默认是 oneOf)： allOf: 数组内所有角色都拥有，返回True oneOf: 数组内拥有任一角色，返回True(等价第1种数据) except: 不拥有数组内任一角色，返回True(取反)

我们依旧保留了 v-permissions 自定义指令，如果你想简单的使用，直接输入一个字符串数组即可，默认使用 role 角色判断，oneOf 模式

v-permissions="['Admin']" 等价于 v-permissions="{ role: ['Admin'], mode: 'oneOf'}"

如果你想使用更多的功能，比如使用权限点 permission控制，输入完整的对象即可，以下输入皆可行

v-permissions="{ role: ['Admin'] }"

v-permissions="{ permission: ['delete:system'] }"

v-permissions="{ role: ['Admin'], permission: ['delete:system'], mode: 'allOf'}"

3)页面权限

注意事项：路由会与userInfo接口返回的roles进行匹配和过滤，当路由模式为all模式时，你可以完全后端处理路由以及页面，那么你可以将src/config/settings.js中的rolesControl设置为false

{
  "meta": {
    "guard": ["Admin"]
  }
}

也可以更细粒度的设置，根据个人需求设置

{
  "meta": {
    "guard": { "role": ["Admin", "Editor"], "mode": "allOf" }
  }
}

13.样式

1）scoped

强烈建议使用 scoped ，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

2）通过深度选择器自定义子组件样式

该方法同样适用于局部某个组件自定义 element-ui 样式

<style lang="scss" scoped>
::v-deep {
      .el-menu--collapse {
        border-right: 0 !important;

        .el-submenu__icon-arrow {
          right: 10px;
          margin-top: -3px;
        }

        .el-submenu__title {
          span {
            display: none;
          }
        }
      }
    }
</style>

该方法同样适用于局部某个组件自定义 element-plus 样式

<style lang="scss" scoped>
:deep(*) {
      .el-menu--collapse {
        border-right: 0 !important;

        .el-submenu__icon-arrow {
          right: 10px;
          margin-top: -3px;
        }

        .el-submenu__title {
          span {
            display: none;
          }
        }
      }
    }
</style>

3)使用变量

在项目中可的任何一个 vue 文件中都可以使用 src/vab/styles/variables/variables.scss 下的任意一个变量

variables.scss 配置

说明：这里可以修改你项目的配色方案，简单修改即可实现风格大变。 library/styles/variables/variables.module.scss