vue使用element-ui按需引入时踩过的那些坑

众所周知，使用element-ui，为了达到减小项目体积的目的 ，我们在实际项目中更多的是采用按需引入的方法， 下面就来讲讲那些我踩过的坑。

步骤：

第一步：安装 element-ui 时把 element 也安装一下，

执行命令 npm i element-ui -S 和 npm i element -S

第二步：安装 babel-plugin-component ，

执行命令 npm install babel-plugin-component -D

第三步 ：踩坑一： element-ui文档中是修改 .babelrc 文件中的配置，实际上我们的文档中根本没有这个文件夹，所以我们需要修改的是 bable.config.js 文件中的配置。

踩坑二： element-ui文档中提示让将配置改为这样，于是就把 bable.config.js 文件配置成这样

但是我们启动会报错 ‘Error: Cannot find module 'babel-preset-es2015'’

这是因为缺少依赖 babel-preset-es2015 ， 现在我们执行命令npm i babel-preset-es2015 --save 下载依赖，

然后启动之后还是会报错 ，于是我各种查资料文档得知：报错关于es2015，，这个是为了兼容ie（9-11），需要引入es2015，

所以需要把 babel-polyfill 和 babel-preset-es2015 两个npm 引入到package.json里（两个都要下载才可以），然后启动项目就可以了（但是这个方法容易因为版本不匹配报错，所以更推荐使用下面的方法）。

踩坑三： 可以将 es2015 换成这个 @babel/preset-env ，但是同时也需要下载依赖，执行命令npm i @babel/preset-env -D ，

踩坑四： 但是此时也会报错：‘# 源文本中存在无法识别的标记。。。’

那是因为 npm 无法识别 @ 符号，解决方法：只需要使用引号将要安装的依赖包名包起来就解决了。

所以最后执行的命令为： npm i '@babel/preset-env' -D 。

然后 bable.config.js文件的配置是这样：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

配置的坑就完了，接下来是引入：这个引入文档上写得还是不错，

但是有一点需要注意， 踩坑五：

组件中我使用了布局容器：

    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
    </el-container>

我认为这个都是Container 布局容器，在 main.js 中这样引入即可：

//element-ui按需引入
    import {
      Container
    } from 'element-ui'
    Vue.use(Container);

结果总是报错：‘Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. ’ 无论我怎么检查都是错的，绞尽脑汁啊，终于我发现了，为什么没有报 el-container 的错，所以我成功了

每一个不同的标签都是一个不同组件，使用都需要分别引入，正确的是这样：

 //element-ui按需引入
    import {
      Container,Header,Main
    } from 'element-ui'
    Vue.use(Container);
    Vue.use(Header);
    Vue.use(Main);

你有踩过哪些坑？ 欢迎探讨交流

总结

到此这篇关于vue使用element-ui按需引入时踩坑的文章就介绍到这了,更多相关vue element-ui按需引入时踩坑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue-cli4 配置 element-ui 按需引入操作

    在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能.经小编一番摸索之后,终于搞定了,本篇文章记录实现的全过程 #1 node与vue的版本情况 #2 未按需加载打包后的文件情况 由上图看出,只是引入了 element-ui 框架后,js文件急剧的上升到了 783KB,这显然是不能接受的. element-ui 按需加载文档:https://element.eleme.cn/#/zh-CN/component/quickstart #3 添加 babel-plug

  • element-ui中按需引入的实现

    element-ui中按需引入 为什么选择 element-ui 而不是 iview 因为在多次使用两个组件的过程中慢慢发现,iview 的一些组件还是需要再完善,而 element-ui 现在更加的成熟 所以, 这里我们一起来学习一下在 vue 中按需引入 element-ui 一些组件中的坑(Dialog组件) 这里我们使用的版本是 element-ui : 2.4.7,vue: 2.2.2 1.按需引入 1. 借助 babel-plugin-component,我们可以只引入需要的组件,以

  • vue使用element-ui按需引入时踩过的那些坑

    vue使用element-ui按需引入时踩过的那些坑

    众所周知,使用element-ui,为了达到减小项目体积的目的 ,我们在实际项目中更多的是采用按需引入的方法, 下面就来讲讲那些我踩过的坑. 步骤: 第一步:安装 element-ui 时把 element 也安装一下, 执行命令 npm i element-ui -S 和 npm i element -S 第二步:安装 babel-plugin-component , 执行命令 npm install babel-plugin-component -D 第三步 :踩坑一: element-ui

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • vue3 element plus按需引入最优雅的用法实例

    vue3 element plus按需引入最优雅的用法实例

    全局导入 下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了.但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大. 按需导入 采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面.这样开发中用到什么组件就打包什么确实很好,减少了包的体积.但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载.操作起来非常繁琐. 有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加

  • Vue组件如何自动按需引入详析

    目录 全局注册 局部注册 局部自动注册 不同方案对比 关于组件名 参考 总结 在Vue中我们可以通过全局组件.局部注册的方式来使用组件 全局注册 通过app.component来创建全局组件 import { createApp } from 'vue' import HelloWorld from './components/HelloWorld' const app = createApp({}) // 全局注册一个名为hello-wolrd的组件 app.component('hello-

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • mybatis升级mybatis-plus时踩到的一些坑

    前言 最近使用RuoYi-Vue来做后台管理脚手架.RuoYi-Vue 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot.Spring Security.MyBatis.Jwt.Vue),内置模块如:部门管理.角色用户.菜单及按钮授权.数据权限.系统参数.日志管理.代码生成等.在线定时任务配置:支持集群,支持多数据源.其官方文档如下 http://doc.ruoyi.vip/ 感兴趣的朋友,可以点链接查看.这个平台目前的orm框架是mybatis,而项目组的o

  • 那些年用httpclient时踩过的一些坑

    一.前言 httpclient是java开发中最常用的工具之一,通常大家会使用其中比较基础的api去调用远程.长期开发爬虫,会接触httpclient不常用的api,同时会遇到各式各样的坑,本文将总结这些年遇到的坑及相应的解决方案. 二.问题及解决方案 问题1:Received fatal alert: handshake_failure 问题背景 开发某省份移动爬虫时,加载首页会报标题错误,尝试各种办法都不好使,后来发现换了jdk1.8就可以了.经过长达一个星期源码探寻,发现错误源头是http

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf

随机推荐