vue使用element按需引入出现的问题

已于 2023-04-24 20:49:26 修改
阅读量114 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-09-04 17:49:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49726578/article/details/126692205
版权

vue使用element按需引入出现的问题 插件/预设文件不允许导出对象，只允许导出函数\node_modules\babel-preset-es2015\lib\index.js

问题

presets: [
    ["es2015", { "modules": false }]
 ],

问题出在 es2015 这是老版本的配置文件

解决
将es2015修改为新版本的配置 @babel/preset-env

presets: [
    ["@babel/preset-env", { "modules": false }]
],
常年游走在bug的边缘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue按需引入element Transfer 穿梭框
08-29
要按需引入 Element Transfer 穿梭框，我们需要在 main.js 文件中引入该组件，并使用 Vue.component() 方法注册该组件。代码如下： ```javascript import { Transfer } from 'element-ui'; const components = ...
【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题
weixin_44372834的博客
08-29 2856
背景：【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题，一直不生效，一开始找不出原因。版本： vue 3.2.13，element-plus 2.2.14。
vue3项目引入element-plus模块样式不生效问题解决
LoFreedomAND的博客
07-19 1万+
手动创建vue3项目后，在搭建页面时需要使用UI库时，按照官方给的步骤操作之后，很遗憾样式并没有生效，上网查了，众说纷纭，有的说是卸载后重新安装，但是我的问题还没有解决，后来在一篇文章中找到了答案，这里记录一下，希望能帮到有同样问题的你。好了，直接看解决办法。.........
【Vue】Element-UI按需引入项目启动报错解决方法
分享记录开发中的问题，欢迎一起探讨！
09-15 1677
Error: Cannot find module 'babel-preset-es2015'
在做项目时遇到的问题：ElementUI按需引入的问题
weixin_51938803的博客
04-15 591
二、还有一个就是ElementUI中的MessageBox 弹框按需引入出现的错误，一开始我以为和其他组件一样是通过import {MessageBox} from 'element-ui'引入，然后再通过Vue.use(MessageBox)注册使用，但这种做法是错误的，然后就报如下图的错误。在这次的项目实战中自己遇到了像这样在使用ElementUI中的问题，自己也通过不断查询资料，然后一步一步解决它，很开心，自己在解决问题中学习了知识。1.页面刷新会出现空白的弹窗。
element-ui 引入及使用中的报错、失效
weixin_44224712的博客
06-04 1320
Error: Cannot find module 'babel-preset-es2015'
element-ui中按需引入的实现
10-15
因此，本文将重点讲解在 Vue 项目中如何按需引入 Element-UI 的部分组件。 按需引入 Element-UI 可以显著减少项目体积，提高应用性能。主要步骤如下： 1. 安装 `babel-plugin-component` 插件，这个插件允许我们仅...
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
Vue-cli4 配置 element-ui 按需引入操作
10-14
如果你的项目是基于 Vue CLI 3 创建的，可以使用 `vue add element` 命令，然后按照提示进行操作，选择按需引入组件或者全量引入。 总的来说，Vue CLI 4 配置 Element-UI 按需引入能够帮助我们实现更高效的资源利用...
vue3按需引入element框架
03-01
这是一个vue3+ts+element的模板项目，项目已经按需的引入了element框架，是使用vite工具创建的模板项目。该模板项目已经在config文件中做了代理；做了请求的封装；布局已经调成需要自己手动布局，放弃了自带的布局；...
element-ui按需引入报错
DESERTo的博客
12-28 554
element-ul按需引入
解决vite配置element-puls按需导入报错问题
Smile_ping的博客
02-08 3298
解决vite配置element-puls按需导入报错相关问题。
vue引入element-ui不起作用
m0_51933554的博客
09-19 752
vue引入element-ui，控制台不报错，但样式引用失败
解决按照Element官网步骤引入组件运行时报错：Error: Cannot find module ‘babel-preset-es2015‘
weixin_50241387的博客
04-16 2938
按照官网步骤修改 .babelrc 文件时，注意：用vue脚手架创建的项目是找不到 .babelrc文件的，这是旧版本的脚手架才有的，新版本在vue脚手架创建的 babel.config.js 文件修改即可。 引入官网内容后： module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ["es2015", { "modules": false }] ], plugins: [ [ ..
关于elementui按需引入报错问题解决
baichi2695的博客
05-13 3618
一、出现的问题 elementui按需引入官网有毒,是这么写的，但我发现一直报错，估计是版本原因吧，官网写死了。 运行时报错： 二、正确的按需引入方式 1、首先按照官网所说安装插件 npm install babel-plugin-component -D 2、找到babel.config.js文件（找不到自己建一个与package.json同级） module.exports = { "plugins": [ [ "component", { "libraryName":
vue按需引入第三方插件_elementui组件按需引入踩过的坑
weixin_39707612的博客
11-22 3159
import 代码虽然只引入了一个按钮组件，其实build是把整个模块都打包了。 根据官网介绍：按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：npm install -D babel-plugin-component配置.babelrc文件{ "presets": [["...
element-ui按需引入报错 Error: Cannot find module ‘babel-preset-es2015‘
热门推荐
Oliver尹的博客
08-15 1万+
问题： 按element-ui官网的步骤进行按需引入，报错：Error: Cannot find module ‘babel-preset-es2015’ npm install babel-plugin-component -D 然后添加.babelrc文件 { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "e
ElementUi按需引入，Table使用失效
weixin_44143279的博客
12-08 1868
按需引入方式见博主这篇推文 https://blog.csdn.net/weixin_44143279/article/details/110648868 element-ui按需引入，Table表格无法显示 解决方法：降低element-ui版本 1、手动修改package.json 2、删除node_modules 给大家推荐一个快速删除node_modules的插件 安装（推荐全局安装）： npm install -g rimraf 使用： rimraf node_modules 3、重新安装
vue element ui 按需引入
最新发布
08-23
要按需引入Vue Element UI组件，你需要进行以下几个步骤： 1. 首先，安装Element UI和babel-plugin-component。使用命令`npm i element-ui --save`来安装Element UI，然后使用命令`npm install babel-plugin-component -D`来安装babel-plugin-component插件。 2. 打开项目根目录下的babel.config.js文件，并进行配置。在presets数组中添加`["@babel/preset-env", { "modules": false }]`，在plugins数组中添加以下代码： ```javascript ["component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" }] ``` 这个配置会将Element UI的组件按需引入，并引入对应的样式。 3. 新建一个文件`/src/components/plugins/element.js`，并在这个文件中引入所需的Element UI组件。例如，如果你需要使用Button、Form、FormItem和Input组件，你可以在element.js文件中写入以下代码： ```javascript import Vue from 'vue' import { Button } from 'element-ui' import { Form, FormItem } from 'element-ui' import { Input } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) ``` 这样就完成了对Element UI组件的按需引入。 4. 在main.js文件中引入自定义的element插件，使用命令`import '@/plugins/element.js'`。这样就可以在组件中正常使用Element UI组件了。例如，在组件的template中可以这样使用Button组件： ```html <template> <div id="app"> <el-button type="primary">按钮</el-button> </div> </template> ``` 以上就是按需引入Vue Element UI组件的步骤。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Vue 项目中按需引入 ElementUI](https://blog.csdn.net/qq_46376192/article/details/128792141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [计算机程序设计语言课程设计(VUE.js)及实践项目的例子.txt](https://download.csdn.net/download/weixin_44609920/88236928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值