在vue项目中按需引入element-ui组件

最新推荐文章于 2024-05-26 19:09:30 发布

较为有趣的人

最新推荐文章于 2024-05-26 19:09:30 发布

阅读量1.5k

点赞数

分类专栏： element-ui 文章标签：部分引入 element-ui 按需引入 vue项目 UI组件

本文链接：https://blog.csdn.net/weixin_43863158/article/details/95643096

版权

本文介绍了在Vue项目中如何按需引入element-ui组件，通过使用babel-plugin-component插件，可以减小项目体积。具体步骤包括安装插件、修改.babelrc配置，以及在src/element/index.js中导入所需组件。在main.js中引入样式文件和创建的index文件，实现按需加载。这样做可以优化打包后的文件大小。

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

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。安装babel-plugin-component的命令行如下：
```
npm install babel-plugin-component -D
```

将 .babelrc 文件中的代码修改为以下内容：
.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"
    }
  ]]
}