Ant Design Vue 初步使用

最新推荐文章于 2025-11-26 15:39:19 发布

原创最新推荐文章于 2025-11-26 15:39:19 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

本文介绍了如何使用 Vue-cli 3 创建项目，并详细讲解了Ant Design Vue的按需引入与全量引入方式，包括在babel.config.js中的配置以及在main.js中引入组件的方法。

注意：本文使用 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 插件：一个用于按需加载组件代码和样式的 babel 插件

2.1 在 babel.config.js 配置文件中加入下面的配置代码，其中 style 的值可以是 true: 表示自动引入样式文件，默认为 less，css: 表示引入 css 样式文件，less: 表示引入 less 样式文件

plugins: [
        [
          "import",
          { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
        ]
      ]

2.2 然后像上面全量引入一样在main.js引入你需要使用的组件即可