element-ui的按需引入报错解决:MoudleBuildFailed,完整引入和按需引入

官网: 

Element - The world's most popular Vue UI framework

1.完整引入 

(1)下载:

npm i element-ui -S

(2)引入:

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

App.vue

<template><div><button></button><input type="text"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template><script>
export default {name:'App'
}
</script>

(3)效果:

2.按需引入

(1)下载;

npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

此处疑问?????出现MoudleBuildError报错,按照老师的修改es2015依然报错。 (我与张天宇老师的脚手架版本不一样,我的是较低版本的vue-cli,所以有.babelrc这个文件)

(2)引入:

接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
// 引入element-ui
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import {Button,Row} from 'element-ui';
//关闭Vue的生产提示 
Vue.config.productionTip = false
// 使用
// Vue.use(ElementUI);
Vue.use(Button);
Vue.use(Row);
// Vue.component('atguigu-button',Button);
// Vue.component('atguigu-row', Row);
//创建vm
new Vue({el:'#app',render: h => h(App)
})

 使用: App.vue

<template><div><button>点击</button><input type="text"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template><script>
export default {name:'App'
}
</script>

(3)报错:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "E:\\Vue2\\vue_test\\testtwo"

(4)解决方案: 

执行如下命令

npm install --save-dev babel-preset-es2015

(5)解决!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux进阶篇:centos7扩展root分区:LVM应用案例

centos7扩展root分区&#xff1a;LVM应用案例 当服务器根分区或者是root分区存储空间快用完的时候&#xff0c;并且重要的数据都在root分区下&#xff0c;当如何应对&#xff0c;没关系坐好&#xff0c;分分钟解决它&#xff0c;我们可以进行分区扩容。 一 添加一块新的硬盘 …

鸿蒙应用开发之图案密码锁组件

前面学习了导航组件,现在来学习另一个密码设置和验证组件,这种组件比较常用。因为当用触屏手机之后,屏幕上就可以滑动操作,比普通PC电脑要多一些功能了。早前的密码都是输入数字,没有滑动输入九宫格的密码。 大体如下面的界面: 采用这种密码,一般情况下是不用记住数字,…

汇编——SSE打包整数

SSE也可以进行整数向量的加法&#xff0c;示例如下&#xff1a; ;sse_integer.asm extern printfsection .datadummy db 13 align 16pdivector1 dd 1dd 2dd 3dd 4pdivector2 dd 5dd 6dd 7dd 8fmt1 db "Packed Integer Vector 1: %d, %d, %d, %d",…

【鹅厂摸鱼日记(二)】(生活篇)初到深圳的人情冷暖

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:重生之我在鹅厂摸鱼⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多知识   &#x1f51d;&#x1f51d; 摸鱼日记 1. 前言2. 鹅厂的人文关怀…

论文笔记:NEFTune: Noisy Embeddings Improve Instruction Finetuning

iclr 2024 reviewer 评分 5666 1 论文思路 论文的原理很简单&#xff1a;在finetune过程的词向量中引入一些均匀分布的噪声即可明显地提升模型的表现 2 方法评估

2024年第二届交通运输与建筑工程国际会议(IACTCE2024)

2024年第二届交通运输与建筑工程国际会议&#xff08;IACTCE2024&#xff09; 会议简介 本次会议旨在为从事交通建设工程等相关领域的专家学者、工程技术人员和研发人员提供一个平台&#xff0c;分享科研成果和前沿技术&#xff0c;了解学术发展趋势&#xff0c;拓宽研究思路…

docker 安装canal

一、新建文件夹 新建文件夹logs, 新建文件canal.properties instance.properties docker.compose.yml canal.propertie 修改如下&#xff1a; 修改instance.properties内容如下 1.1 canal.properties ################################################# ######### …

算法刷题应用知识补充---数论

这里写目录标题 快速幂求a^k%p题结 快速幂求逆元题结 扩展欧几里得求逆元题结 排列组合题结二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 快速幂求a^k%p 题 结 主要用到a的k次方&#xff0c;可以用多个a的…

fastadmin + laragon + nginx的后台访问路径配置

使用过fastadmin的小朋友都知道&#xff0c; fastadmin 默认的是不能访问admin模块的&#xff0c; 它在public 文件夹中又新建了一个 XXX.php 来指向 admin 模块的&#xff0c;作用像 index.php 的文件 以前我每次使用的时候&#xff0c;直接就到 config配置文件中把 admin 模块…

String类(1)

❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&a…

CC工具箱使用指南:【融合同类碎图斑】

一、简介 在一些经过不合理处理的数据中&#xff0c;经常会存在碎图斑&#xff0c;正常情况下用【融合】或【消除】工具即可解决。 但是【融合】工具会融掉无关的字段&#xff0c;【消除】工具则会将碎图斑融给不同用地类型的图斑。 如下图所示&#xff0c;因为B1面积更大&a…

蓝桥杯嵌入式(G431)备赛笔记——PWM+LCD+按键

目录 题目要求&#xff08;真题&#xff09;&#xff1a; cubeMX配置&#xff1a; 小试牛刀&#xff1a; Keil代码&#xff1a; 效果演示&#xff1a; 题目要求&#xff08;真题&#xff09;&#xff1a; 使用第十一届第二场真题&#xff0c;练习PWM波部分的代码&#xff0c…

德国FSL18罗德与施瓦茨频谱分析仪

181/2461/8938产品概述&#xff1a; 频率范围:9 kHz至18 GHz&#xff08;超范围至20 GHz&#xff09;频率分辨率:1赫兹28 MHz的信号分析带宽低测量不确定性&#xff0c;即使在微波范围内通用测量应用&#xff0c;例如光谱图轻巧紧凑&#xff0c;便于现场安装、维护和服务 9 kH…

什么是企业邮箱?企业邮箱和个人邮箱的区别是什么?

拥有一个企业邮箱究竟能给公司带什么益处&#xff1f;这是许多中小企业管理者好奇的&#xff0c;很多人觉得邮箱只要用来收发邮件就够了。但实际上&#xff0c;什么是企业邮箱&#xff1f;企业邮箱和个人邮箱在功能范围有着很大的区别。好的企业邮箱不仅能提高公司内部的沟通效…

【电控笔记5】电流环pi参数整定

旋转坐标系下的电压方程&#xff0c;由id和iq计算出ud和uq 把常数项&#xff08;上面两个红框&#xff09;拿出来解耦合&#xff0c;作为前馈&#xff0c;如下 电流环传递函数 电流带宽 响应时间 另一种方法&#xff1a;内膜控制器

RISC-V特权架构 - 中断注入

中断注入 1 中断注入的作用2 mip寄存器3 中断注入后的处理过程 本文属于《 RISC-V指令集基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 中断注入的作用 中断注入&#xff0c;就是在M模式下&#xff0c;手动向S模式去产生一个中断。 比如&#xff1a;向mip寄存器的bit5…

Web前端开发——Vue概述

前言&#xff1a; 整理下学习笔记&#xff0c;打好基础&#xff0c;daydayup!!! Vue Vue是一套前端框架&#xff0c;基于MVVM(Model-View-ViewModel)思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的专注点放在数据上&#xff0c;可以免除原生JavaScript中的DOM操作&am…

600MA线性锂电池充电芯片 - YB4054DJ

描述: YB4054一款完整的单节锂离子电池充电器。其SOT23-5的封装与较少的外部元件数使得YB4054成为便携式应用的理想选择。采用了内部PMOSFET架构&#xff0c;加上防倒充电路&#xff0c;不需要外部检测电阻器和隔离二极管。热反馈可对充电电流进行自动调节&#xff0c;以便在大…

基于Linux C++多线程服务器 + Qt上位机开发 + STM32 + 8266WIFI的智慧无人超市

前言 针对传统超市购物车结账排队时间长、付款效率低的问题&#xff0c;提出了一种更符合现代社会人们购物方式-基于RFID的自助收银系统。习惯了快节奏生活的人们都会选择自助收银机结账&#xff0c;理由显而易见&#xff1a;自助收银机结账很方便&#xff0c;几乎不用排队&am…

“反正你又看不到,少写一行又何妨......”

单链表专题 1.链表的概念及结构2. 实现单链表3. 链表的分类 1.链表的概念及结构 概念&#xff1a;链表是⼀种物理存储结构上⾮连续、⾮顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。 链表的结构跟火车车厢相似&#xff0c;淡季时⻋次的⻋厢…