注意:本文使用 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 插件:一个用于按