关于Vue中element按需引入

最新推荐文章于 2023-05-12 17:05:13 发布

heyNewbie

最新推荐文章于 2023-05-12 17:05:13 发布

阅读量1.5k

点赞数 1

分类专栏：前端 vue 文章标签： vue element 前端按需引入

本文链接：https://blog.csdn.net/heyNewbie/article/details/103870996

版权

本文详细介绍了在Vue项目中如何按需引入ElementUI，以避免全局引入带来的资源浪费。首先，通过安装element-ui和必要的插件，然后修改.babelrc配置文件，接着在main.js中进行按需引入。在实际操作中，可能会遇到Message组件特殊使用方式、页面刷新时无故弹出提示框以及Dropdown下拉菜单添加点击方法等问题，文中也给出了相应的解决办法。

摘要由CSDN通过智能技术生成

在项目中使用elementui确实是很方便的一件事，但是如果我只需要用到其中的某一些元素来简化代码的话，全局引入就显得有点臃肿了，这就有了按需引入的概念，需要什么就引入什么，方便

一、安装element-ui

npm i element-ui -S

二、安装按需引入的必要插件

npm install babel-plugin-component -D

三、修改.babelrc文件(注意这个文件每个人根据项目所需依赖不同而不同，只需要在plugin后加上element的component部分就可以)

{
  "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"
      }