element ui需要引入样式吗_element-ui按需加载的两种方式

背景

实际开发过程中，vue+elementUI是我们很常见的使用方式，element-ui也确实给前端开发提供了不少的便利。但是如果说你在项目中只用到了几种组件(如dialog/input/loading)的情况下，使用webpack或者其他打包方式，结果引入了全部的element-ui，会导致项目体积过大，用户体验感极差。为了避免这种情况的发生，在我们使用element-ui组件时，就会用到“按需引入”这个概念了。

1.使用 babel-plugin-component 按需加载插件

a) 使用插件的步骤当然是从引入插件开始，npm命令如下：

npm install babel-plugin-component -D

复制代码

安装完成后，package.json文件如下：(我的项目示例使用的是nuxt.js，与原生Vue不冲突)

b) 修改nuxt.config.js

配置好config之后，就可以直接引用element-ui了，这样我们项目的体积也会得到控制。

2.直接按需引入组件及样式

import { Dialog } from 'element-ui'

import 'element-ui/lib/theme-chalk/dialog.css'

Vue.use(Dialog)

复制代码

结尾

如果单独使用以上两种方式的任意之一无法将element-ui的体积控制在理想值之下时，可以尝试同时使用这两种方式进行操作，然后效果就出来了，保管你实用~~

如果小伙伴们看到这篇文章觉得实用的话，记得点赞哈，哈哈~