Ant Design Vue 初步使用

注意：本文使用 npm 进行构建，yarn 方式请参考官方文档。

一、安装 vue-cli 3 脚手架，可以帮我们自动初始化一个脚手架并安装 Vue 项目的各种必要依赖

npm install -g @vue/cli

二、创建项目

vue create file-viewer

三. 在项目安装引入 Ant Design Vue 依赖

npm i --save ant-design-vue

四. 在项目中声明使用 Ant Design Vue，有两种方式：全量使用（导入 Antd 全部组件）和 按需使用（只导入使用到的部分组件）

      1. 全量使用。以下代码便完成了 Antd 的全量引入（在此引入后，即可在项目中任意位置使用Antd提供的组件而不需要单独的声明引入）。需要注意的是，样式文件需要单独引入。
 

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;
 
Vue.use(Antd);
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

 2. 按需使用。需要使用到 babel-plugin-import 插件：一个用于按