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

news2025/2/5 22:12:00

官网: 

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.coloradmin.cn/o/1598830.html

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

相关文章

如何连通私有子网中的 MSK / Kafka 集群?

MSK 集群通常都是建在私有子网中的&#xff0c;这给本地访问带来了很多麻烦&#xff0c;特别是需要在本地使用 Kafka GUI 客户端管理和读写 MSK 数据的时候。本文会给出一套解决方案。 我们这里讨论的问题有一点特殊性&#xff0c;那就是&#xff1a;由于 MSK 是托管服务&…

在Vue3中如何使用H.265视频流媒体播放器EasyPlayer.js?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

JavaFX项目环境配置

Java版本 JDK15 JavaFX版本 JavaFX SDK 17 sdk下载地址https://gluonhq.com/products/javafx/ https://gluonhq.com/products/javafx/ Java FX sdk 版本不要选择22版本 与 jdk15版本不合 编辑器 配置Eclipse JDK15环境 点击Add 第二步新建一个javafx项目 点击next 勾选Ja…

基于SpringBoot+Vue的卓越导师双选系统设计与实现(源码+文档+包运行)

一.系统概述 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;因此传统管理方式就不适合。为了让导师选择信息的管理模式进行升级&#xff0c;也为了更好的维护导师选择信息&#xff0c;卓越导师双选系统的开发运用就显得很有必要。…

打破常规:AI如何帮助从业者规避营销活动风险

人工智能时代&#xff1a;如何利用AI提升营销效果 在当今商界&#xff0c;市场策划活动对于企业来说至关重要&#xff0c;它们不仅可以吸引消费者的注意&#xff0c;还可以扩大企业的市场份额。然而&#xff0c;这些活动本身带来的风险也不容忽视。为了帮助企业在策划活动时做出…

阿里云服务器带宽收费标准——2024年最新公网带宽价格

阿里云服务器的公网带宽计费模式分为“按固定带宽”和“按使用流量”&#xff0c;有什么区别&#xff1f;按固定带宽是指直接购买多少M带宽&#xff0c;比如1M、5M、10M、100M等&#xff0c;阿里云直接分配用户所购买的带宽值&#xff0c;根据带宽大小先付费再使用&#xff1b;…

06_定时器中断

72分频 72MHz 72000000 经过72分频 1000000

HarmonyOS开发实例:【事件的订阅和发布】

介绍 本示例主要展示了公共事件相关的功能&#xff0c;实现了一个检测用户部分行为的应用。具体而言实现了如下几点功能&#xff1a; 1.通过订阅系统公共事件&#xff0c;实现对用户操作行为&#xff08;亮灭屏、锁屏和解锁屏幕、断联网&#xff09;的监测&#xff1b; 2.通…

Navigator.share不生效,请检查是不是https,仅在https中可用

mdn 一定要检查mdn的兼容性&#xff0c;和是否是https&#xff0c;http中是不生效的&#xff0c;但是测试的时候ios Safari可以chrome就不行&#xff0c;但是https就能够稳定运行

英语新概念2-回译法-lesson8

乔桑德斯有着我们镇上最漂亮的花园。附近的每一个人每年都参加“最美花园比赛”&#xff0c;但是每年都是乔赢得比赛。比尔芙丽丝的花园比乔的花园大&#xff0c;但是乔的花园更有趣。他有整洁的小径以及一座木桥架在一个池塘上。我也喜欢花园&#xff0c;但是我不喜欢辛勤劳作…

LeetCode 热题100(python)——1

解题方案 解法一 class Solution:def twoSum(self, nums: List[int], target: int) -> List[int]:for i, x in enumerate(nums): # xnums[i]for j in range(i 1, len(nums)): # 枚举 i 右边的 jif x nums[j] target: # 满足要求return [i, j] # 返回两个数的下标# 这…

HarmonyOS实战开发-如何实现文件管理相关的功能。

介绍 本示例主要展示了文件管理相关的功能&#xff0c;使用ohos.multimedia.medialibrary 、ohos.filemanagement.userFileManager 、ohos.fileio 、ohos.file.fs、ohos.app.ability.contextConstant 等接口&#xff0c;实现了增添文件、删除文件、查找指定类型文件文件、复制…

electron项目打包慢、打包报错

项目使用了electron框架&#xff0c;在第一次打包或者网络条件不好的环境下进行打包时熟速度慢的出奇&#xff0c;甚至经常出现打包失败的情况&#xff08;如上面图片的报错&#xff09;。 这是因为&#xff0c;在electron打包的过程中&#xff0c;需要去官方源https://github.…

微信小程序英文版:实现一键切换中英双语版(已组件化)

已经重新优化代码做成了组件&#xff0c;需要可自取&#xff1a;https://github.com/CrystalCAI11/wechat-language-compoment 所有操作都打包在组件里不需要在额外的地方添加代码&#xff0c;直接在你需要的页面里导入组件&#xff0c;再在对应页面的onLoad()里set文本就行了。…

电压比较器LM339介绍和仿真

电压比较器LM339介绍和仿真 &#x1f4d1;LM339相关特性 工作电源电压范围宽&#xff0c;单电源、双电源均可工作&#xff0c;单电源&#xff1a; 2&#xff5e;36V&#xff0c;双电源&#xff1a;1&#xff5e;18V&#xff1b;消耗电流小&#xff0c; Icc1.3mA&#xff1b;输…

用二进制译码器实现组合逻辑函数

用二进制译码器实现组合逻辑函数 原理 由于 n n n 位二进制译码器可提供 2 n 2^n 2n 个最小项的输出&#xff0c;而任一个逻辑函数都可变换为最小项之和的标准与或式&#xff0c;因此利用译码器和门电路可实现单输出及多输出组合逻辑电路 基本步骤 选择合适的集成二进制译…

怎么做预约功能_让服务变得更便捷

在快节奏的现代生活中&#xff0c;时间成为了我们最宝贵的财富。无论是工作、学习还是休闲娱乐&#xff0c;我们都希望能够更加高效地利用每一分每一秒。而预约功能的出现&#xff0c;正是为了满足这一需求&#xff0c;让我们的生活变得更加便捷、高效。 工具/原料 微信小程序…

网络协议安全:SSL/TLS协议详解,SSL协议执行原理、报文格式解析,Wireshark抓包分析SSL协议

「作者简介」&#xff1a;2022年北京冬奥会中国代表队&#xff0c;CSDN Top100&#xff0c;学习更多干货&#xff0c;请关注专栏《网络安全自学教程》 SSL协议 1、SSL协议发展史2、SSL协议执行过程3、SSL报文格式字段解析3.1、TLS报文头3.2、Handshake报文 4、Wireshark抓包分析…

【Java开发指南 | 第三篇】Java 空行、强制类型转换及基本数据类型

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 Java 空行强制类型转换Java 基本数据类型内置数据类型引用类型 Java 空行 空白行或者有注释的行&#xff0c;Java 编译器都会忽略掉。 强制类型转换 当需要将一个数据类型转换为另一个数据类型时&#xff0c…

DBA面试总结(Mysql篇)

一、delete与trancate的区别 相同点 1.两者都是删除表中的数据&#xff0c;不删除表结构 不同点 1.delete支持按条件删除&#xff0c;TRUNCATE不支持。 2.delete 删除后自增列不会重置&#xff0c;而TRUNCATE会被重置。 3.delete是逐条删除&#xff08;速度较慢&#xff09…