Vue引入部分element.ui组件的一些小坑记录

 更新时间:2023年10月10日 15:46:43   作者:聽風娓娓道來  
这篇文章主要介绍了Vue引入部分element.ui组件的一些小坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue引入部分element.ui组件的坑

做的这个vue项目使用的都是element.ui的组件,一开始没注意,也为了省事,全部引入,后期因为为了项目轻量化,采用部分引入,踩了不少坑。

如何在路径上不用#

index.js

mode: 'history',

全部引入方式

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //样式必须引入
Vue.use(ElementUI)

全部引入没任何问题

部分引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

一开始按照文档

.babelrc修改如下

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

只用button,select做例子

main.js

    import { Button, Select } from 'element-ui';
    Vue.component(Button.name, Button);
    Vue.component(Select.name, Select);
    //或者
    Vue.use(Button)
    Vue.use(Select)

运行报错

后来参照别的方式

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

就ok了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何集成raphael.js中国地图的方法示例

    vue如何集成raphael.js中国地图的方法示例

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成raphael.js中国地图的相关资料,需要的朋友可以参考下。
    2017-08-08
  • 前端vue+express实现文件的上传下载示例

    前端vue+express实现文件的上传下载示例

    本文主要介绍了前端vue+express实现文件的上传下载示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 使用@tap.stop阻止事件继续传播

    使用@tap.stop阻止事件继续传播

    这篇文章主要介绍了使用@tap.stop阻止事件继续传播,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue-cil之axios的二次封装与proxy反向代理使用说明

    vue-cil之axios的二次封装与proxy反向代理使用说明

    这篇文章主要介绍了vue-cil之axios的二次封装与proxy反向代理使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中rem的配置的方法示例

    vue中rem的配置的方法示例

    这篇文章主要介绍了vue中rem的配置的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue组件传值过程接收不成功的问题及解决

    Vue组件传值过程接收不成功的问题及解决

    这篇文章主要介绍了Vue组件传值过程接收不成功的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue实现选中文本弹出弹窗功能的完多种方法

    Vue实现选中文本弹出弹窗功能的完多种方法

    在现代 Web 应用中,选中文本后显示相关操作或信息是一种常见的交互模式,本文将详细介绍如何在 Vue 中实现选中文本后弹出弹窗的功能,包括其工作原理、多种实现方式以及实际项目中的应用示例,需要的朋友可以参考下
    2025-09-09
  • Vue组件通信全场景详解(新手也能看懂)

    Vue组件通信全场景详解(新手也能看懂)

    Vue 组件通信是前端开发核心知识点,不同组件层级对应不同的通信方案,本文将按基础场景,进阶场景,特殊场景进行系统梳理,希望对大家有所帮助
    2026-04-04
  • Vue3封装hooks实现实时获取麦克风音量

    Vue3封装hooks实现实时获取麦克风音量

    这篇文章主要为大家详细介绍了Vue3如何通过封装一个hooks实现实时获取麦克风音量功能,文中的示例代码讲解详细,需要的小伙伴可以参考一下
    2024-03-03
  • Vue开发中的"v-model陷阱"之为什么它不能用于非表单元素

    Vue开发中的"v-model陷阱"之为什么它不能用于非表单元素

    文章主要讲解了在Vue中使用v-model时遇到的问题,包括v-model的原理、常见错误以及正确的使用方法,通过理解v-model的语法糖本质和Vue的底层机制,可以解决在普通元素和自定义组件中使用v-model的困惑,感兴趣的朋友跟随小编一起看看吧
    2026-01-01

最新评论