一、为什么要用Ant Design

1、因为它是蚂蚁金服产出的一套牛逼哄哄的产品

2、丰富的组件化设计规范 和组件化编码规范

3、它适用于企业级的中后台搭建

二、快速创建项目

1、安装脚手架

npm install -g @vue/cli

2、创建vue-cli项目这里使用的是vue2

vue create antd-demo

3、安装ant design vue 注意3.x.x版本适用于Vue3 、2.x.x版本不推荐、1.7.8适用于Vue2

npm i --save ant-design-vue@1.7.8

4、引入

4-1：全部引入：

import Vue from "vue";

import Antd from "ant-design-vue";

import App from "./App.vue";

import "ant-design-vue/dist/antd.css"; // 样式

Vue.config.productionTip = false;

Vue.use(Antd);

new Vue({

render: (h) => h(App),

}).$mount("#app");

4-2：部分引入

import Vue from "vue";

import { Button } from "ant-design-vue";

import App from "./App.vue";

import "ant-design-vue/dist/antd.css";

Vue.config.productionTip = false;

Vue.use(Button);

new Vue({

render: (h) => h(App),

}).$mount("#app");

三、TS项目

vue create ant-demo-ts

第一个是VUE3 第二个是VUE2 要跑Typescript需要我们自定义插件

勾上TypeScript

是否使用Class风格装饰器？

即原本是：home = new Vue()创建vue实例

使用装饰器后：class home extends Vue{}

好东西，I do！

是否用babel做转译，当然要。

后面的自主选择即可。