项目说明

下载

介绍

环境 "vue-cli": 3.0
涉及主要插件

	"ant-design-vue": "^1.7.2",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "crypto-js": "^4.0.0",
    "echarts": "^5.0.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "resize-observer-polyfill": "^1.5.1",
    "vue": "^2.6.11",
    "vue-cookie": "^1.1.4",
    "vue-i18n": "^8.24.1",
    "vue-infinite-scroll": "^2.0.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"

内置组件
- SvgIcon 支持Svg图标引入
- Ellipsis 文本省略
- PageScrollable 过长收缩滚动组件
- EditTable 基于Antd Table 的简单编辑表格

目录结构

build（构建配置目录）
public（公共资源目录）
src（项目目录）
- api（项目api接口目录）
- assets（项目资源目录）
- components（项目组件目录）
- config（全局配置目录）
- directives（自定义指令目录）
- layouts（页面布局文件目录）
- i18n（多语言配置）
- mock（mock目录-本地环境开启）
- plugins（插件目录）
- router（路由树目录）
- store（store目录）
- styles（全局样式目录）
- utils（工具方法目录）
- views （项目页面目录）
- App.vue （项目App）- 提供单页面路由视图 router-view
- main.js（构建入口 - 加载插件、插件全局配置）

api 目录（封装接口调用）

index 文件 -解析 modules 目录，获取相关模块接口配置，然后封装成 $api 全局方法。
modules 目录（存放模块接口配置文件，必须是 *.js 文件，暴露相应配置对象）

使用 require.context() 方法一次性引入目录文件模块

接口配置

key: 作为接口配置的键值，同时也是 $api 调用方法的键值。
url: 指定接口地址，支持 restful 接口，地址带有的参数（:key）会从 data 中读取，自动进行数值替换，因此data中必须包含参数字段，否则会导致接口地址错误。
method: 接口请求方式
description: 接口描述 - 不作为请求参数
data: 接口参数列表，所有参数必须填写，包括url上的参数（:key)，自动过滤列表以外的参数。配置字段参数不作为默认值，只是作为数据类型使用。

$api 方法

modules: modules目录的对应文件名
key: 接口键值
data: 接口参数
config: 额外的接口配置

mock 目录（本地接口数据模拟）

index 文件 -mock启用文件
utils 文件 -定义mock相关工具方法
services 目录（定义模块接口）

使用 require.context() 方法一次性引入目录文件模块

扩展： require.context(directory, useSubdirectories, regExp): function

irectory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则
return: 返回一个函数，通过 .keys() 返回匹配的所有模块地址，传入对应key值，获取对应模块内容。通过正则可解析文件名称作为模块名称。

routes 目录（支持动态路由）

index 文件 -最终路由配置对象。
staticRoutes 文件 -配置公共路由，不需要用户权限验证
asyncRoutes 文件 -根据接口返回权限码返回动态路由配置或者需要根据权限（permitCode）动态计算的路由

注意： 可通过meta的新增字段 menu 指定所属菜单路由，值为 path路径，用于渲染选中的菜单项。

备注目前登录页由项目提供，需要登录后才能获取路由权限，不建议使用动态路由，而直接根据路由的permitCode 在全局路由守卫拦截。如果在index.html可以获取账号权限（登录页由其他项目管理）则建议使用动态路由。asyncRoutes 文件提供 getRoutes 方法返回动态路由配置。

store 目录（按模块）

index 文件 -根store
types 文件 -定义mutations、actions名称常量
modules 目录（定义store模块）

注意 modules 如果启用命名空间（namespaced: true），dispatch、commit 要加模块名称前缀，但mapState可以传入模块名称(1参)以及直接使用字符串数组(2参)就能得到模块state，如果禁用命名空间，dispatch、commit 不需要加模块前缀，但是模块state需要在 mapState 使用对象(1参)参数建立映射关系([string]: (state) => any)。

styles 目录

index -根样式
base 文件 -基础样式
common 目录（存放公共内容）
- index 文件 -定义类结构变量
- mixins 文件 -混合类
- variable 文件 -定义公共变量
components 目录（定义组件样式）
layouts 目录（定义布局组件样式）
views 目录（定义模块页面样式）

i18n 目录（支持国际化）

index 文件 -解析语言配置，创建i18n对象
language 目录 -存放对应语言配置，文件名作为语言，并需要在各个语言文件内配置对应名称的文案配置，这一步是为了顶部多语言切换能够正确显示可切换的语言文案。

config 目录

index 文件 - 定义左侧菜单树，权限菜单控制，以及权限控制开关字段。
cookies 文件 -定义项目涉及的所有cookie的名称。
charts 文件 -定义图标配置项默认配置，方便风格统一。
router 文件 -定义路由创建所需要的默认配置项，以及全局路由守卫，路由守涉及路由权限控制。
axios 文件 -定义axios创建所需要的默认配置项，以及axios全局拦截器，包括interceptor.request 和 interceptor.response

权限控制（待优化）

路由访问权限控制
- 目前通过在 meta 字段中配置 permitCode 字段，在全局路由前置守卫中根据权限数组（接口返回）匹配 permitCode 字段来控制对应路由访问控制。如果路由配置未设置 permitCode 字段，则不校验权限。同时在 config/index 设置是否开启验证路由权限开关字段 PERMIT_ROUTE_OPEN，方便关闭路由权限控制。
- 同时，也设置另一种权限路由控制方式，在 routes/asyncRouters 文件中暴露 getRoutes 方法用来过滤有权限路由，通过传入 权限数组 参数，返回对应路由配置，在动态添加到router路由对象。（此方法需要进入页面就有路由权限，否则需要控制首次进入路由跳转前完成接口请求以及动态路由添加）
左侧菜单权限控制左侧菜单权限控制，通过 config/index 文件暴露的 getPermitMenus 方法，传入菜单权限码数组进行过滤，返回对应菜单数据，以供全局左侧菜单栏显示。同时，在 config/index 设置是否开启菜单权限控制开关字段 PERMIT_MENU_OPEN ，方便关闭菜单权限控制。
功能码权限控制功能码权限控制，主要用来控制按钮以及部分信息展示，根据接口返回功能码集合 func ，全局提供 $havePermission 方法，通过传入权限码（支持单个或者多个）进行权限校验，方法实现位于 utils/permission 文件。同时提供自定义指令 v-permit 控制内容展示。