按照官网的教程:按需引入需要借助:babel-plugin-component 
安装:babel-plugin-component

注意:官网是修改 .babelrc 文件,我这里为了方便就直接修改 babel.config.js 文件了

对应的项目根目录下的 babel.config.js 需要修改成为以下:【我是直接拷贝官网的】

main.js 里面按需引入:
import { Button } from ‘element-ui’;
Vue.component(Button.name, Button
启动项目报错:.plugins[0][1] must be an object, false, or undefined

原因是:babel.config.js 里面的plugins多了一个中括号:修改如下:

再次重新启动后又报错: Cannot find module ‘babel-preset-es2015’ from '

这个是由于babel编译插件版本问题,需要安装最新的 babel 编译插件 “ @babel/preset-env ” ,执行以下安装命令:
npm install @babel/preset-env -D
修改 babel.config.js 为:

再次重新启动,终于可以了:

如果觉得能解决您的问题或者 觉得 不错的话可以 点个赞 哦!
——————————————————————————————————————————————

vue-cli3 按需引入element-ui的更多相关文章

  1. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  2. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

  3. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  4. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  5. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  6. vue+elementui按需引入

    转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...

  7. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  8. Vue ElementUI 按需引入

    一.element UI组件的单独使用(第一种方法): 1.cnpm install babel-plugin-component -D         2.找到.babelrc 配置文件       ...

  9. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  10. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

随机推荐

  1. STM32-I2C_CheckEvent-标志位自动清除理解

    STM32里I2C_CheckEvent函数我们应该是相当熟悉了,在每次发送数据后我们都需要检验相应的EVx(x = 0,1,2,,,)事件是否有发送. 函数定义如下: ErrorStatus I2C ...

  2. SpringBoot2.0集成WebSocket,实现后台向前端推送信息

    感谢作者,支持原创: https://blog.csdn.net/moshowgame/article/details/80275084 什么是WebSocket? WebSocket协议是基于TCP ...

  3. [leetcode] 62 Unique Paths (Medium)

    原题链接 字母题 : unique paths Ⅱ 思路: dp[i][j]保存走到第i,j格共有几种走法. 因为只能走→或者↓,所以边界条件dp[0][j]+=dp[0][j-1] 同时容易得出递推 ...

  4. [leetcode] 406. Queue Reconstruction by Height (medium)

    原题 思路: 一开始完全没有思路..看了别人的思路才解出来. 先按照他们的高度从高到低(因为我后面用的从前往后遍历插入,当然也可以从低到高)排序,如果高度一样,那么按照k值从小到大排序. 排完序后我们 ...

  5. 如何优雅关闭 Spring Boot 应用

    ## 前言 随着线上应用逐步采用 SpringBoot 构建,SpringBoot应用实例越来多,当线上某个应用需要升级部署时,常常简单粗暴地使用 kill 命令,这种停止应用的方式会让应用将所有处理 ...

  6. Java设计模式——工厂设计模式

    工厂模式:主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类.工厂模式的形态工厂模式主要用一下几种形态:1:简单工厂(Simple Factory).2:工厂方法(Factory M ...

  7. iView学习笔记(一):Table基本操作(包含前后端示例代码)

    iView表格操作 1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install i ...

  8. 基于 HTML5 Canvas 的可交互旋钮组件

    前言 此次的 Demo 效果如下: Demo 链接:https://hightopo.com/demo/comp-knob/ 整体思路 组件参数 绘制旋钮 绘制刻度 绘制指针 绘制标尺 绘制文本 1. ...

  9. ElasticSearch全文搜索引擎

    一.ElasticSearch简介 1.1 什么是ElasticSearch ElasticSearch简称ES,其中Elastic      从名字里我们可以知道,ES的特点就在于灵活的搜索,其实E ...

  10. web前端开发-博客目录

    web前端开发是一个新的领域,知识连接范围广,处于设计与后端数据交互的桥梁,并且现在很多web前端相关语言标准,框架库都在高速发展.在学习过程中也常常处于烦躁与迷茫,有时候一直在想如何能够使自己更加系 ...