当前位置: 首页 > news >正文

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.lryc.cn/news/336075.html

相关文章:

  • 面向低碳经济运行目标的多微网能量互联优化调度matlab程序
  • FORM的引入与使用
  • 酷开会员丨古偶悬疑剧《花间令》在酷开系统热播中!
  • html骨架以及常见标签
  • Vue3学习01 Vue3核心语法
  • Spring Boot实现跨域的5种方式
  • Elasticsearch:从 ES|QL 到 PHP 对象
  • Stm32 HAL库 访问内部flash空间
  • 线程池详解
  • mybatis(5)参数处理+语句查询
  • 数据应用OneID:ID-Mapping Spark GraphX实现
  • 第6章 6.2.3 : readlines和writelines函数 (MATLAB入门课程)
  • Matlab应用层生成简述
  • 每日一题(leetcode1702):修改后的最大二进制字符串--思维
  • PHP自助建站系统,小白也能自己搭建网站
  • 计算机视觉 | 基于 ORB 特征检测器和描述符的全景图像拼接算法
  • Scala - 函数柯里化(Currying)
  • Switch-case
  • 蓝桥杯-单片机基础16——利用定时计数中断进行动态数码管的多窗口显示
  • 2024/4/5—力扣—下一个排列
  • xss.pwnfunction-Ugandan Knuckles
  • LabVIEW和2D激光扫描的受电弓滑板磨耗精确测量
  • Linux第87步_阻塞IO实验
  • C/C++基础----常量和基本数据类型
  • 什么是生成式AI?有哪些特征类型
  • 《Linux C/C++服务器开发实践》之第7章 服务器模型设计
  • SSH穿透ECS访问内网RDS数据库
  • python 有哪些函数
  • ubuntu web端远程桌面控制
  • PCL 点到三角形的距离(3D)