-
Ant Design是蚂蚁金服体验技术部打磨出一个服务于企业级产品的设计体系,通过模块化解决方案降低生产成本。前端实现涵盖了react vue angular等三大框架。
-
ANTD PRO VUE是Ant Design的vue 实现,开发企业级后台产品。
-
安装
ant pro vue 是一套基于Ant Design Vue的中后台管理控制台的脚手架。
直接从GitHub仓库中直接安装最新的脚手架代码。
$ git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project
- 目录结构
├── 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
-
本地开发
(1) clone到本地后安装依赖
$ npm install
(2) 运行$ npm run serve
启动浏览器访问 http:localhost:8000.看到首页登录页就OK
(3) 根据业务修改代码进行开发。 -
路由
(1) 在目录src下的config目录的router.config.js统一配置管理路由。(2) vue路由是通过创建一个路由实例对象注册到vue实例中,菜单生成是根据路由配置的。在vue-router的配置上新增另一些参数。
1.hideChildrenInMenu用于隐藏不需要的菜单中展示的子路由个人设置。 2.hidden可以在菜单中不展示这个路由,包括子路由。效果可以查看other下的路由配置。 3.meta.title和meta.icon分别代表生成菜单项的文本和图标。 4.meta.permission 采取配置此路由的权限,如果配置了将会验证内部用户的权限,并决定是否展示*(放置在下)。 5.meta.hiddenHeaderContent可以强制当前页面不显示PageHeader组件中的页面带的面包屑和页面标题栏
(3) 实例
{
path: ‘/form’, //路径
redirect: ‘/form/base-form’, //重定向到
component: PageView, //组件
meta: { title: ‘表单页’, icon: ‘form’, permission: [ ‘form’ ] }, //菜单名称,icon,路由权限验证
children: [
{
path: ‘/form/base-form’,
name: ‘BaseForm’,
component: () => import(’@/views/form/BasicForm’), //路由懒加载模式
meta: { title: ‘基础表单’, keepAlive: true, permission: [ ‘form’ ] } //权限匹配
},
{
path: ‘/form/step-form’,
name: ‘StepForm’,
component: () => import(’@/views/form/stepForm/StepForm’),
meta: { title: ‘分步表单’, keepAlive: true, permission: [ ‘form’ ] }
},
{
path: ‘/form/advanced-form’,
name: ‘AdvanceForm’,
component: () => import(’@/views/form/advancedForm/AdvancedForm’),
meta: { title: ‘高级表单’, keepAlive: true, permission: [ ‘form’ ] }
}
]
},
-
布局
(1) 在Any Design 抽离了常用通用布局,放在layouts目录.1. BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏 2. UserLayout:抽离出用于登陆注册页面的通用布局 3. PageView:基础布局,包含了面包屑,和中间内容区 (slot) 4. RouterView:空布局,专门为了二级菜单内容区自定义 5. BlankLayout:空白的布局
(2) Ant Design 布局组件
1. Grid组件,它支持flex布局,基于行(row) 列(col),总结一下几个常用组件的属性 pull 栅格向左移动格数 number 0 push 栅格向右移动格数 number 0 span 栅格占位格数,为 0 时相当于 display: none number - sm ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object - md ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object - lg ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object - 2. Layout 组件 ,他是页面整体布局,被抽象出来放到components 和 Layout文件夹。
-
新增页面
(1) 新建页面在src/views下建一个vue文件,如果有相关页面,可以新建一个文件夹放置相关文件。(2) 然后将组件在路由中定义好就可以访问页面。
(3) 最后在newPage中写业务代码
-
新增业务组件
(1) 业务组件的特征是只负责相对独立,稳定的功能,没有单独的路由配置,可能是静态的,也可能包含自己的state。不涉及vuex,只是父子单向数据流。(2) 在src/components下新建一个以组件名命名的文件夹,在文件夹下面建index.js和index.less,下面是一个例子
{{ desc }}
<style lang="less" scoped> @import '@/components/index.less'; .image-wrapper { padding: 0 20px 8px; background: #f2f4f5; width: 400px; margin: 0 auto; text-align: center; .img { vertical-align: middle; max-width: calc(100% - 32px); margin: 2.4em 1em; box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); } .desc { font-size: 1em; color: #000; } } </style>
(3) 使用
<!-- 使用 slot 的 desc 方式 --> <image-wrapper :src="imageSrc"> <span slot="desc">{{ context }}</span> </image-wrapper> </template> <script> import ImageWrapper from '@/components/ImageWrapper'; // @ 表示相对于源文件根目录 export default { // 引入组件 components: { ImageWrapper }, data () { return { context: '示意图', imageSrc: 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png' } } } </script>
10 样式
(1) 默认使用less,这样是为了防止样式全局污染。
(2) 在src/global.less设置全局样式
(3) 可以用 /deep/ 对组件进行样式穿透
11 serve side交互
(1) 请求流程
1.UI 组件交互操作;
2.调用统一管理的 api service 请求函数;
3.使用封装的 request.js 发送请求;
4.获取服务端返回;
5.更新 data。
(2) 为了方便管理维护,所有统一的请求都放在@src/api文件夹。
(3) 在@/src/utils/request.js中对axios 进行封装,目的是,便于统一出路post get 等请求参数,请求头。
例子:
// 根据用户 id 获取用户信息
export function getUser (id) {
return axios({
url: `${api.user}/${id}`,
method: 'get'
})
}
<template>
<div>
<a-button @click="queryUser"></a-button>
<a-table :dataSource="list">
</a-table>
</div>
</template>
<script>
import { getUser } from '@/api/user'
export default {
data () {
return {
id: 0,
queryParam: {
pageSize: 10,
pageNo: 1,
username: ''
},
info: {}
}
},
methods: {
queryUser () {
const { $message } = this
getUser(this.id).then(res => {
this.info = res.data
}).catch(err => {
$message.error(`load user err: ${err.message}`)
})
}
}
}
</script>