ant design vue 基础

最新推荐文章于 2025-03-26 11:15:16 发布

Sitarry

最新推荐文章于 2025-03-26 11:15:16 发布

阅读量6.8k

点赞数

文章标签：开发语言

本文链接：https://blog.csdn.net/Sitarry/article/details/124325920

版权

本文介绍了Ant Design Vue的基础知识，包括其定义、作用及如何在企业后台产品开发中使用。同时，对比了Element UI、Ant Design Vue和iView这三大组件库的特点和资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：

https://www.antdv.com/components/drawer-cn/

1什么是ant-design-vue?

Ant Design是蚂蚁金服技术部经过大量项目时间和总结，设计的前端UI组件库
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品

2 ant-design-vue作用？

ant-design-pro-vue:使用 vue+ant-design-vue 开发的项目

*用于开发和服务与企业后台产品

3.如何使用

# 1.安装
cnpm install ant-design-vue --save

# 2.main.js中全局引入并注册
import Vue from 'vue'
import App from './App'
import Antd from 'ant-design-vue'
import router from './router'
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/>'
})
# 3.在页面中不再需要引入注册组件，可以直接使用所有的组件
<template>
  <div>
    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="danger">
      Danger
    </a-button>
    <a-config-provider :auto-insert-space-in-button="false">
      <a-button type="primary">
        按钮
      </a-button>
    </a-config-provider>
    <a-button type="primary">
      按钮
    </a-button>
    <a-button type="link">
      Link
    </a-button>
  </div>
</template>

4.常见组件库对比

5. 各组件库资源

5.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

5.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

5.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