Vue+Ant design vue安裝及配置使用

---

Ant design vue官網：https://www.antdv.com/docs/vue/introduce-cn/

基於 Ant Design of Vue 實現的Vue項目 ：https://gitee.com/sendya/ant-design-pro-vue

推薦一個圖標庫阿里iconfont ： https://www.iconfont.cn/

阿里iconfont基本使用：https://blog.csdn.net/xj932956499/article/details/103251355

\(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\)

一、認識Ant design vue

ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫，它其實是Ant Design的Vue實現，組件的風格與Ant Design保持同步，組件的html結構和css樣式也保持一致。 用下來發現它的確稱得上為數不多的完整的VUE組件庫與開發方案集成項目。

二、安裝及基本配置

首先需要有一個vue項目安裝vue項目可以參考：https://www.cnblogs.com/tjw-bk/p/13747853.html

\(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\)

1. 使用 npm 或 yarn 安裝

$ npm install ant-design-vue --save

$ yarn add ant-design-vue

如果你的網絡環境不佳，推薦使用 cnpm。

\(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\)

2. 在main.js中全局配置

//全局配置ant-design-vue
//安裝下載npm install ant-design-vue --save
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import 'element-ui/lib/theme-chalk/index.css'
import {Button} from 'ant-design-vue';
Vue.use(Antd);
Vue.use(Button);