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,一经查实,立即删除!

相关文章

MLT媒体程序框架02:源码剖析

以MLT自带的Melt命令行工具源码为例 去掉一些不重要的代码 melt.c int main(int argc, char **argv) {int i;mlt_consumer consumer NULL;FILE *store NULL;char *name NULL;mlt_profile profile NULL;int is_progress 0;int is_silent 0;int is_abort 0;int is_getc …

javascript中创建变量的方式 与 var和let有什么区别

一、创建变量的7种方式&#xff1a; 1、var 2、function 创建变量&#xff08;函数名是一个变量 3、let 4、const 创建常量 5、import 基于es6 的模块规范导出需要的信息 6、class 基于 es6 创建的类 7、Symbol 创建唯一值 二…

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

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

谈谈系列之移动时代,我的产品技术观

其实一直想着写这篇文章&#xff0c;但是缺乏灵感&#xff0c;下笔犯难。信息时代发展速度快到令人目不暇接&#xff0c;从最开始的个人PC&#xff0c;到拨号上网&#xff0c;再到光纤入户&#xff0c;再到现在4G/5G移动互联网&#xff0c;一晃也不过短短三四十年。程序主流语言…

java 读取zip文件的两种方式

以下是使用Java读取zip文件的两种实现方法&#xff1a; 方法1&#xff1a;使用java.util.zip.ZipInputStream类 import java.io.FileInputStream; import java.io.InputStream; import java.util.zip.ZipEntry; import java.util.zip.ZipInputStream;public class ZipReader …

某中小型网游公司绩效管理诊断项目成功案例纪实

【客户行业】 网游行业 【问题类型】 绩效管理 【客户背景】 某中小型网游科技发展有限公司成立于2006年,是一家专业的网页游戏研发、互联网应用、手机游戏开发于一体的高新技术科技企业,位于北京市昌平区。公司自成立以来,一直稳步发展,到目前为止,员工人数约150人。近…

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

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

pytest详解(一)

目录 前言安装检验 编写测试文件一个简单完整的pytest的组成结构 pytest运行用例时携带的参数&#xff08;常用&#xff09;pytest的用例命名规则pytest的常用运行方式pytest指定运行用例指定运行一个文件夹中的用例指定运行一个文件夹中的一个文件中的用例指定运行一个文件夹中…

汇编——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 方法评估

JavaScript数组操作方法全录

改变原数组的方法&#xff1a; push() - 将一个或多个元素添加到数组的末尾&#xff0c;并返回新数组的长度。 pop() - 从数组中移除最后一个元素&#xff0c;并返回该元素。 shift() - 从数组中移除第一个元素&#xff0c;并返回该元素。 unshift() - 将一个或多个元素添加到…

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 模块…

磁盘管理与逻辑卷

磁盘管理 会在linux中使用硬盘 分区 格式化&#xff08;重新安装文件系统&#xff09; 挂载 磁盘的硬件架构 扇区&#xff1a;一个扇区512字节&#xff0c;是磁盘的最小单位 磁道&#xff1a;同一盘片不同半径的同心圆 柱面&#xff1a;不同盘片相同半径构成的圆&#xf…

String类(1)

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

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

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

Go-学会方法的基本使用

本节重点&#xff1a; 学会方法的基本使用 方法主要源于 OOP 语言&#xff0c;在传统面向对象语言中 (例如 C), 我们会用一个“类”来封装属于自己的数据和函数&#xff0c;这些类的函数就叫做方法。 虽然 Go 不是经典意义上的面向对象语言&#xff0c;但是我们可以在一些接收…