ant vue 语言_Ant Design Pro Vue使用心得

目录结构

├── public

│ └── logo.png # LOGO

| └── index.html # Vue 入口模板

├── src

│ ├── api # Api ajax 等

│ ├── assets # 本地静态资源

│ ├── config # 项目基础配置，包含路由，全局设置

│ ├── components # 业务通用组件

│ ├── core # 项目引导, 全局配置初始化，依赖包引入等

│ ├── router # Vue-Router

│ ├── store # Vuex

│ ├── utils # 工具库

│ ├── locales # 国际化资源

│ ├── views # 业务页面入口和常用模板

│ ├── App.vue # Vue 模板入口

│ └── main.js # Vue 入口 JS

│ └── permission.js # 路由守卫(路由权限控制)

├── tests # 测试工具

├── README.md

└── package.json

路由和菜单

基本结构

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 ==router.config.js== 统一配置和管理。

路由管理 通过约定的语法根据在==router.config.js==中配置路由。

菜单生成 根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。

面包屑 组件 ==PageHeader== 中内置的面包屑也可由脚手架提供的配置信息自动生成。

路由

目前脚手架中所有的路由都通过 ==router.config.js== 来统一管理，在 ==vue-router== 的配置中我们增加了一些参数，如 ==hideChildrenInMenu==,==meta.title==,==meta.icon==,==meta.permission==，来辅助生成菜单。其中：

hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。

hidden 可以在菜单中不展示这个路由，包括子路由。效果可以查看 other 下的路由配置。

meta.title 和 meta.icon分别代表生成菜单项的文本和图标。

meta.permission 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示 *(默认情况下)。

meta.hidden 可以强制子菜单不显示在菜单上(和父级 hideChildrenInMenu 配合)

meta.hiddenHeaderContent 可以强制当前页面不显示 PageHeader 组件中的页面带的 面包屑和页面标题栏

路由配置项

/**

* 路由配置说明：

* 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单

*

**/

{

redirect: noredirect, //重定向

name: 'router-name', //路由名称

hidden: true, //可以在菜单中不展示这个路由，包括子路由。效果可以查看 other 下的路由配置。

meta: {

title: 'title', //菜单项名称

icon: 'a-icon', //菜单项图标

keepAlive: true, //缓存页面

permission：[string] //用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示 *(默认情况下)

hiddenHeaderContent: true, //可以强制当前页面不显示 PageHeader 组件中的页面带的 面包屑和页面标题栏

}

}

菜单

菜单根据 ==router.config.js== 生成，具体逻辑在 ==src/store/modules/permission.js== 中的 ==actions.GenerateRoutes== 方法实现。

Ant Design Pro 的布局

在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 ==/components/layouts== 目录中，分别为：

BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏：

UserLayout：抽离出用于登陆注册页面的通用布局

PageView：基础布局，包含了面包屑，和中间内容区 (slot)

RouterView：空布局，专门为了二级菜单内容区自定义

BlankLayout：空白的布局

定义全局样式

/* 定义全局样式 */

:global(.text) {

font-size: 16px;

}

/* 定义多个全局样式 */

:global {

.footer {

color: #ccc;

}

.sider {

background: #ebebeb;

}

}

//覆盖组件样式

// 使用 css 时可以用 >>> 进行样式穿透

.test-wrapper >>> .ant-select {

font-size: 16px;

}

// 使用 scss, less 时，可以用 /deep/ 进行样式穿透

.test-wrapper /deep/ .ant-select {

font-size: 16px;

}

// less CSS modules 时亦可用 :global 进行覆盖

.test-wrapper {

:global {

.ant-select {

font-size: 16px;

}

}

}

与服务器交互

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

UI 组件交互操作；

调用统一管理的 api service 请求函数；

使用封装的 request.js 发送请求；

获取服务端返回；

更新 data。

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/src/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：

api/

user.js

permission.js

g