vue-cli3中使用elementUI按需加载

最新推荐文章于 2025-07-02 09:13:14 发布
原创 最新推荐文章于 2025-07-02 09:13:14 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用babel-plugin-component和@babel/preset-env进行Babel配置，以实现按需加载功能。首先通过npm安装所需的依赖包，然后根据官方文档修改babel.config.js文件。如果初次尝试未能生效，可以再次检查并调整配置。

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

  • 根据官方文档下载 npm install babel-plugin-component -D
    修改babel.config.js
    在这里插入图片描述
    但是按需加载并没有生效。。。
  • 根据官方文档下载 npm install babel-plugin-component -D ，再下载 npm insatll @babel/preset-env -D
    重新修改babel.config.js
    在这里插入图片描述
    这样就可以了
Pepper_taozhi
关注
Vite 中配置 Element Plus 按需加载
m0_38066007的博客
04-09 565
在 Vite 中配置 Element Plus 按需加载可以通过 Vite 的插件来实现。以下是在。
vue-cli中按需引入element-plus(使用unplugin-vue-components unplugin-auto-import)
m0_54861649的博客
03-03 1198
目录 一、文档 二、使用步骤 1.安装插件 2.配置vue.config.js 3.测试 总结 一、文档 戳这里，跳文档 二、使用步骤 1.安装插件 npm install -D unplugin-vue-components unplugin-auto-import 2.配置vue.config.js vue-cli内部用的就是webpack，configureWebpack配置的会被合并 const AutoImport = require('unplugin-auto-import/w
用vue-cli3实现element 按需加载按需引入
qq_47443027的博客
04-04 446
1.安装element-ui npm i element-ui -S 2.安装按需引入必要插件 npm install babel-plugin-component -D 3.修改babel.config.js module.exports = { presets: ["@vue/app"], plugins: [ // element官方教程 [ "component", { libraryName: "element-ui"
ElementUI的用法
最新发布
为什么会报错呢?为什么能跑呢?为什么不能跑呢?
07-02 1152
elementUI的用法,并用elementUI完成登录功能和基本的crud操作
vue cli3 element-ui懒加载 按需加载ui组件
大华阿大华的博客
10-08 2531
前言 vue cli3.x + UI框架 开发时，经常实际只用到的 UI框架 提供的几个组件，而每次我们是全部引入，这会照成程序需要消耗更多的资源，尤其是在移动端（例如使用 mint ui）,在性能上会有更大的影响，照成不好的用户体验。 接下来记录以 vue cli3.x +element ui 为例实现按需加载组件。 未引入 element 插件时 引入 element ui（npm i e...
vue3.0中使用element
热门推荐
浩星
03-01 2万+
前言： 在vue3.0中使用element框架，因为element是支持vue2.0的，他推出的支持vue3.0的版本叫element-plus 目录： 官网入口：点我进入 一、个人遇到的问题与解决办法： 遇到的问题： 我直接用cnpm ielement-plus-S 装的版本，不知道为啥，一直报错 图1，版本型号 图2 ，我的代码中使用图3 ​图1 ​图2 ​图3 解决办法： 我把package.json中的element-plus的版本更换成 下面这句...
在Vue cli3 中使用Element-UI
qq_44888570的博客
01-28 2509
1.创建cli3项目并cd到该目录 $ vue create demo $ cd demo 2.在项目中添加ElementUI $ npm i element-ui -S 下载完成后，在main.js中配置： import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 3.打开官网copy一个实例代码，测试是否成功导入 找到这个实例代码，粘贴到App.vue这
vue-cli3.0-vueadmin：基于vue-cli3.0 + vue + elementUI + vuex + axios +权限管理的后台管理系统
02-06
项目基于vue-cli3.0进行构建，并使用了vue全家桶vue vuex axios vue-router elementui，增加了按钮级别的权限控制 脚手架版本： * vue-cli-3.0 用到vue相关的生态链模块： vue vue-router vuex axios 项目要点 ...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
在使用Vue-cli搭建的项目中，我们经常需要引入css文件，例如引入ElementUI库中的css文件或在组件中引入自己的css文件。但是，在main.js中引入css文件或在其他文件中引入css文件都可能会报错。 报错原因 报错的原因...
基于vue-cli3.0+vue+elementUI+vuex+axios+权限管理的后台管理系统.zip
12-01
vue-admin-权限项目基于vue-cli3.0进行搭建，并使用了vue全家桶vue vuex axios vue-router elementui，增加了按钮级别的权限控制线上预览地址React 版本请移步VUE3版本请移步脚手架版本:*vue-cli-3.0用到vue相关的...
基于vue-cli 的 Element UI 的后台系统模板
02-21
在"基于vue-cli 的 Element UI 的后台系统模板"中，我们主要关注以下几个核心知识点： 1. **Vue CLI**：Vue CLI（Vue.js Command Line Interface）是Vue官方提供的一个脚手架工具，用于快速搭建 Vue 项目。它简化了...
Element-UI 按需加载
廖若星辰-LTY
10-19 3738
Element-UI 我在Element-UI 的安装与配置使用这篇已经做过简单的介绍了在此就不赘述了，这里更多的是介绍 Element-UI 的另一种使用方法，即在项目中按需加载其内部组件，以达到减小项目体积的目的。 第一、安装babel-plugin-component 插件 npm install babel-plugin-component -D 注：如果有使用 vue ui 打开 vue 项目的图形化界面也可以直接安装新的运行依赖直接搜索babel-plugin-component...
vuecli3 element按需加载按需引入(包括样式)
longlongValue
06-26 1万+
自从前后端分离之后，大部分时间都是在用weui(we-vue组件库)的css样式做公众号等前端网页开发。 近期公司准备为统一用户项目做一个管理控制台，我就准备用Vue + [element-ui](https://element.eleme.io/)做框架进行开发，具体选型好处就不再详细说明了，这里简单说一下按需引入element-ui的问题。 首先我们按照官网进行install安装操作： ...
vue----element 按需加载
weixin_44401399的博客
08-03 224
vue----element 按需加载 安装 npm i element-ui -S 安装插件 npm install babel-plugin-component -D 在项目根目录创建一个babel.config.js 并添加以下代码 重新启动项目即可 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", {
vue-cli3 按需引入 element-ui 报错
NorthHarbor45的博客
04-17 362
vue-cli3 按需引入 element-ui 报错 报错信息： Cannot find module 'babel-preset-es2015' from .... 解决办法： 安装最新的 Babel 编译插件：@babel/preset-env 修改 babel.config.js 文件（也可创建 .babelrc 文件） module.exports = { "pres...
按需加载element-ui,iview
tiankengb的博客
01-25 756
按需加载element-ui 1.npm i element-ui -D 2.npm install babel-plugin-component -D 3.配置.babelrc文件 { “plugins”: [ “transform-vue-jsx”, “transform-runtime”, ///// iview按需加载配置块 [“import”, { “libraryName”: ...
element-ui 按需加载
不知名的博客
10-15 322
element-ui 在vuecli中 按需加载 1、使用npm下载 babel-plugin-component 2、配置babel-plugin-component vuecli4版本以上：配置bable.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], //以下为新增的配置代码 "plugins":[ [ "component", {
vue3.0 引入 element-ui
oAiZaiXin的博客
02-26 293
安装 element3 npm i element3 -s 项目引用 import Element3 from ‘element3’ import “element3/lib/theme-chalk/index.css”; 示例图如下：
Vue-cli3+ElementUI搭建带导航的网站项目结构
在本项目中，使用Vue-cli3作为项目的初始化工具，可以快速搭建出一个包含Vue-elementUI和VueRouter等依赖的Vue项目结构。 2. ElementUI ElementUI是一个基于Vue 2.0的桌面端组件库，提供了丰富的UI组件供开发者使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值