vue-cli4.0下antd(ant-design-vue)按需引入(附带完整过程)

最新推荐文章于 2025-03-25 07:30:00 发布

LitStronger

最新推荐文章于 2025-03-25 07:30:00 发布

阅读量1.4w

点赞数 13

分类专栏： ant-design-vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/weixin_43641850/article/details/108296677

版权

本文记录了在vue-cli4环境下配置ant-design-vue并实现按需加载的过程，包括创建项目、引入antd及解决less-loader、babel-plugin-import插件相关问题。详细步骤包括在main.js中引入组件、配置babel-plugin-import以及处理组件名与标签名不一致的情况。通过文中方法，可成功实现antd的按需引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant-design-vue 踩坑记录

官网没给vue-cli4的例子，于是试试按照官网vue-cli3的步骤操作，遇到了一些问题，这里记录下，后文给了完整过程，我亲自重新跑过一遍，应该是没有问题的。

坑1.
Failed to resolve loader: less-loader
You may need to install it.
坑2.
error in …/node_modules/_ant-design-vue@1.6.5@ant-design-vue/es/button/style/index.less
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();

vue-cli4/antd 配置按需加载

1.创建项目

安装vue-cli(我现在装的是4.3)

$ npm install -g @vue/cli

创建项目, 配置可自选，这里我直接回车默认

$ vue create antd-demo

运行，访问 http://localhost:8080/ ，可以看到 Welcome to Your Vue.js App

$ cd antd-demo
$ npm run serve

2.引入 ant-design-vue

$ npm install ant-design-vue

在main.js中引入Button组件

import Vue from 'vue'
import {
    Button } from 'ant-design-vue'; //引入组件，但不用引入样式
import App from './App.vue'

Vue.component(Button.name, Button

最低0.47元/天解锁文章