Vue 3.x Ant Design 使用 babel-plugin-import 来进行按需加载

最新推荐文章于 2024-09-01 10:11:17 发布
最新推荐文章于 2024-09-01 10:11:17 发布
阅读量3.4k 收藏 4
点赞数 1
分类专栏： 前端 文章标签： vue.js javascript babel js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43447840/article/details/113839552
版权
本文详细介绍了如何在Vue 3.x项目中，利用babel-plugin-import实现Ant Design的按需加载，以减小打包体积，提升首屏加载速度。在过程中遇到了npm安装问题，以及配置babel.config.js和vue.config.js的步骤，最后在/src/main.js中引入组件并解决报错，成功实现了按需加载，使项目打包体积减少了1/3。

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

最近学习用Ant Design Vue 开发项目，按照官方的快速上手进行了安装。

在这里插入图片描述
默认是全局引入，打包后体积很大，非常影响首屏加载速度，需要用到按需加载，仅引入要使用的组件。

不得不说官方文档写的很烂💩，用的React举例，全是坑，在这完整分享下怎么做。

1. 安装 babel-plugin-import

cnpm i babel-plugin-import --dev --save

某种未知原因，我用npm安装一直报错404，改用cnpm就好了。

2. 安装 less-loader

cnpm install less-loader --save-dev

控制台报错，提示缺少less-loader，好的 。

3. 安装less

cnpm install less --save-dev

Antd 是用less编写的，还需要安装less。

4. 配置babel.config.js

配置根目录下的babel.config.js，没有的话就手动创建个，写入以下配置。

module.exports = {
   
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
    libraryName: "ant-design-vue"
最低0.47元/天 解锁文章
vue2/3 - 解决报错Error: Cannot find module ‘babel-plugin-import‘（vue2/vue3报错无babel-plugin-import模块详细解决教程
高级前端工程师
03-04 3857
vue，vue2，vue3，Error: Cannot find module 'babel-plugin-import'，vue报错找不到babel-plugin-import模块，babel-plugin-import，vue运行项目时出现报错，vue打包编译build提示报错，解决vue报错，如何解决在vue网页中出现报错，安装axios依然不行，执行npm install antd babel-plugin-import依然报错怎么办，安装了依然提示报错咋办，The package manager
ant-design 引入样式及配置 babel-plugin-import 按需加载
热门推荐
zwkkkk1的博客
03-26 1万+
1. ant-design 引入样式的几种方式 1.1 全局引用 js代码引入 ant-design 的 Button 组件 import React, { Component } from 'react'; import Button from 'antd/lib/button'; import './App.css'; class App extends Component { rend...
Vue 3.x Ant Design 使用 babel-plugin-import 按需加载
weixin_51299408的博客
10-14 508
1、安装babel-plugin-import npm i babel-plugin-import --dev --save 2、安装 less-loader npm install less-loader --save-dev 3、安装less npm install less --save-dev 4、配置babel.config.js 如果没有这个文件夹，就在根文件下创建此文件夹 module.exports = { presets: ["@vue/app"]...
vue3中使用Ant Design 并且使用 babel-plugin-import 来进行按需加载
NolanKy 的 技术博客
11-18 1980
首先，在百度到ant design官网之后，要在右上角调整版本 不然会有大坑 下载使用 npm i --save ant-design-vue@next 完整引入 import { createApp } from 'vue'; import Antd from 'ant-design-vue'; import App from './App'; import 'ant-design-vue/dist/antd.css'; const app = createApp(); app.config.pro
vue3使用babel-plugin-import按需引入element-plus
YanzYan的博客
03-21 3276
vue3使用babel-plugin-import按需引入element-plus 项目目前使用的版本 "element-plus": "^2.1.4", "vue": "^3.0.0", 安装babel的插件： npm install babel-plugin-import -D 配置babel.config.js module.exports = { plugins: [ [ 'import', { libraryName: 'elemen
使用babel-plugin-import按需加载ant-design-vue组件
weixin_43846709的博客
03-14 1824
babel-plugin-import按需加载组件
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
02-23
在本文中，我们将深入探讨如何使用Vue CLI 3和Ant Design Vue构建一个高效的后台管理系统模板。Vue CLI 3是Vue.js官方提供的一个快速脚手架工具，它简化了项目的初始化和配置过程，而Ant Design Vue则是一个基于Vue....
Ant-Design-Vue快速上手指南+排坑
破损的天堂鸟博客
08-24 1917
Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件库，适用于各种类型的 Web 应用开发。
通过babel-plugin-import实现Ant Design按需加载，以及执行npm run eject报错解决
lingliu0824的博客
12-28 924
Ant Design Mobile of React按需加载，官网提供的方法： 这里具体介绍第一种方案： 1.安装 babel-plugin-import:在项目跟目录下执行以下命令 npm insatll babel-plugin-import --save 2.修改配置文件： 2.1项目根目录下执行命令npm run eject暴露配置文件 注意：如果运行时报以下错误 则可以先后执行以下两条命令后，再执行npm run eject git add . git commit -m'commit
Ant Design按通过babel-plugin-import 插件完成需加载组件库
qq_42157868的博客
10-04 587
1.npm run eject 加载webpack配置文件 完成后会多出一个config文件 2.在package.json中配置文件babel属性中添加 "plugins":[ [ "import", { "libraryName":"antd", "libraryDirectory":"es", "style":"css" } ] ] 如图: 最后在组件
vue3项目如何按需引入ant design vue组件和图标
weixin_42425569的博客
04-25 1671
3.按需引入，新建antDesignVue.js文件。1.下载babel-plugin-import插件。2.在babel.config文件中加入以下代码。完整babel.config文件。4.在mainjs文件组件并注册。
在Vite构建的Vue 3项目中集成和使用Babel解决兼容性问题
everfoot的博客
09-01 3980
为了解决这个问题，我们可以使用Babel这个广泛使用的JavaScript编译器。在Vite构建的Vue 3项目中，我们可以很容易地集成和使用Babel来处理JavaScript代码的兼容性问题。首先，我们需要安装Vite和其他必要的依赖项，包括Vue 3和Babel相关的插件和预设。通过以上步骤，我们可以在Vite构建的Vue 3项目中轻松集成和使用Babel，解决JavaScript代码的兼容性问题。Vite将会使用Babel来转译我们的JavaScript代码，确保它在旧版浏览器中也能正常运行。
babel-plugin-import：babel.config.js 按需引入插件
weixin_40945354的博客
03-23 5259
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: t
babel-plugin-import 插件的使用
weixin_43222587的博客
04-13 1286
babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式. 安装 npm i babel-plugin-import -D 在babel.config.js中配置 "plugins": [ [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "
vue中babel-polyfill的使用方法
Luther Li的博客
10-23 5198
为什么使用babel-polyfill Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题。 Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise ...
vue3项目记录-引入必要的包
放风喽的博客
04-07 2051
一、element-plus 官方文档 1.安装 npm install element-plus --save 2.全局引入 全部组件全局引入很简单，但影响我们首屏的加载速度，要求加载的东西越少越好，所以前期我们就先全部引入，后期我们再修改成按需引入 import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import
Vue3+Vite引入 IconPark图标以及按需引入
qq_54140719的博客
03-09 3612
Vue3+Vite引入 IconPark图标。按需引入。
React中使用antd 4.x CSS文件按需加载 babel-plugin-import
leejieleejie的博客
05-14 1527
React中使用antd 4.x后在网上没搜到CSS按需加载的教程，自己摸索了一番，踩了一些坑，简单记录一下。 在antd 4.x后，使用 craco对 create-react-app 进行自定义配置。 craco的相关配置看官网 使用babel-plugin-import， babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件 安装：$ yarn add babel-plugin-import 配置：在craco.config.js中配置如下：module
vue2 引入ant-design-x-vue
最新发布
05-16
在 Vue2 项目中引入 `ant-design-vue` 是一个非常常见的需求，以下是详细的步骤和代码示例： ### 引入步骤 1. **安装依赖** 首先需要通过 npm 或 yarn 安装 `ant-design-vue`： ```bash npm install ant-design-vue@2.x --save ``` 2. **全局引入** 如果你需要在整个项目中使用 Ant Design Vue 的所有组件，可以在 `main.js` 中进行全局引入。 3. **按需引入** 如果你只需要使用部分组件，可以采用按需加载的方式以减少打包体积。这需要借助 `babel-plugin-import` 插件。 --- ### 全局引入方式 ```javascript // main.js import Vue from &#39;vue&#39;; import Antd from &#39;ant-design-vue&#39;; import &#39;ant-design-vue/dist/antd.css&#39;; // 引入样式 Vue.use(Antd); new Vue({ render: h => h(App), }).$mount(&#39;#app&#39;); ``` --- ### 按需引入方式 1. 安装 `babel-plugin-import`： ```bash npm install babel-plugin-import --save-dev ``` 2. 在 `.babelrc` 或 `babel.config.js` 中配置插件： ```javascript // babel.config.js module.exports = { presets: [&#39;@vue/cli-plugin-babel/preset&#39;], plugins: [ [ &#39;import&#39;, { libraryName: &#39;ant-design-vue&#39;, libraryDirectory: &#39;es&#39;, style: true, // `style: true` 会加载 less 文件 }, ], ], }; ``` 3. 在组件中按需引入组件： ```javascript <template> <a-button type="primary">按钮</a-button> </template> <script> import { Button } from &#39;ant-design-vue&#39;; export default { components: { AButton: Button, }, }; </script> ``` --- ### 解释 1. **全局引入**：适用于需要大量使用 Ant Design Vue 组件的项目，简单快捷但会增加打包体积。 2. **按需引入**：通过 `babel-plugin-import` 插件实现按需加载，只引入所需的组件和样式，从而减少打包体积。 3. **样式文件**：无论是全局引入还是按需引入，都需要确保样式被正确加载。全局引入时直接引入 `antd.css`，按需引入时通过 `babel-plugin-import` 自动加载组件对应的样式。 --- ### 注意事项 - 确保安装的是与 Vue2 兼容的 `ant-design-vue` 版本（2.x）。 - 如果使用 TypeScript，还需要安装类型声明文件： ```bash npm install @types/ant-design-vue --save-dev ``` ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值