09.ant-design-vue
# 01.ant-design-vue基础
# 1.ant design vue官网
https://www.antdv.com/docs/vue/introduce-cn/
# ant-design-pro-vue使用vue + ant-design-vue 开发的项目Gitee仓库地址
https://gitee.com/sendya/ant-design-pro-vue # gitee地址
https://preview.pro.antdv.com # 官方演示地址
1
2
3
4
5
2
3
4
5
# 1.1 什么是ant-design-vue
Ant Design是蚂蚁金服技术部经过大量项目时间和总结,设计的前端UI组件库
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库
# 1.2 ant-design-vue作用
ant-design-pro-vue (opens new window): 使用vue + ant-design-vue
开发的项目
- 用于开发和服务于
企业后台产品
。
# 1.3 为什么使用
- 快速高效开发后台管理系统
# 1.4 如何使用
# 1.安装
npm install ant-design-vue --save
# 2.main.js中全局引入并注册
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
# 3.在页面中不再需要引入注册组件,可以直接使用所有的组件
<template>
<div>
<a-button type="primary">hello world</a-button>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 02.UI组件库对比
# 1.1 常见组件库对比
Element-UI
Ant-Design-Vue
iView
1
2
3
2
3
# 1.2 各组件库资源
2.1 Element UI
- 文档:https://element.eleme.io/#/zh-CN/component/installation
- vue-element-admin演示地址:https://panjiachen.github.io/vue-element-admin/#/login
- vue-element-admin项目文档:https://panjiachen.github.io/vue-element-admin-site/zh/
- vue-element-admin项目源码:https://github.com/PanJiaChen/vue-element-admin
2.2 Ant Design Vue
- 文档:https://vue.ant.design/docs/vue/introduce-cn/
- Ant Design Pro演示地址:https://preview.pro.antdv.com
- Ant Design Pro项目文档:https://pro.loacg.com/docs/getting-started
- Ant Design Pro项目源码:https://github.com/sendya/ant-design-pro-vue
2.3 iView
- 文档:https://www.iviewui.com/docs/introduce
- iView-admin预览:https://admin.iviewui.com/login
- iView-admin项目文档:https://lison16.github.io/iview-admin-doc/#/
- iView-admin项目源码:https://github.com/iview/iview-admin
# 03.ant-design安装
ant-design-pro-vue (opens new window): 使用
vue + ant-design-vue
开发的项目
# 3.1 安装ant-design-vue
- 初始化项目
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --global vue-cli
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev
1
2
3
4
5
6
2
3
4
5
6
- 安装ant-design-vue
npm install ant-design-vue --save
1
# 3.2 全局引入
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 3.3 局部导入组件
import Vue from 'vue';
import router from './router'
import { Button, message } from 'ant-design-vue';
import App from './App';
Vue.config.productionTip = false;
/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);
/* v1.1.3+ 自动注册Button下组件,如Button.Group */
Vue.use(Button);
Vue.prototype.$message = message;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
编辑 (opens new window)
上次更新: 2024/3/13 15:35:10