ant-design-vue基礎

1.ant design vue 官網

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

1.1 什么是ant-design-vue?(What:是什么？)

Ant Design是螞蟻金服技術部經過大量項目時間和總結，設計的前端UI組件庫
Ant Design Vue 是使用 Vue 實現的遵循 Ant Design 設計規范的高質量 UI 組件庫，用於開發和服務於企業級中后台產品

 

1.2 ant-design-vue作用？（Where：什么地方使用？）

ant-design-pro-vue:使用 vue+ant-design-vue 開發的項目

*用於開發和服務與企業后台產品

1.3 為什么使用？（Why）

快速高效的開發后台管理系統

1.4 如何使用？（How：如何使用）

# 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>

 

2.UI組件庫對比

2.1.常見組件庫對比

Element-UI
Ant-Design-Vue 
iView

 

 

 

2.2.各組件庫資源

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