element-ui vs iview：为何element-ui如此抢手？

你听说了吗，element-ui为啥这么受欢迎？很多人宁愿用它也不用iview。其实iview的部分组件还得打点小补丁，可element-ui早就是个完整版！今天咱就给大家科普下如何在vue中运用element-ui，尤其是里面的Dialog组件。赶紧拿出笔和纸，一起来学习！

首先，要用上一个叫babel-plugin-component的好伙伴来解决怎么导入组件的问题。这样一来，项目就变得小巧玲珑了！想知道那个babel-plugin-component到底是什么？

别急我教你咋改 babelrc 这个配置文件。咱要改的就是 plugins 的部分，把想要用的新配置放进去就成了！这不就按需引入了嘛～

npm install babel-plugin-component -D

哎哟喂，咋回事儿？得整理一下新加入的代码。怎么整？别急听我慢慢解释给你听。现在要是还在主网页（main.js）里用老办法加载的话，那肯定是不行滴！

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

糟心事儿真不少！你们看，虽然我们明明在element-ui的代码里面用到了Dialog，为啥运行还是出问题了？别急，交给我！只要稍微调整下引入的Dialog代码就行了。说不定这就是element-ui自己的问题。不过这个做法可能会让main.js文件变大复杂，所以建议大家先试试第一个按需加载element-ui组件的办法。

你是不是好奇为什么不用整堆数据全都放进去，而是选择要用什么需要就加什么的加载方法？别急，我给你解释下。就拿首页来说，要是一股脑全把数据都扔进去，那肯定不行！

// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
 install: function (Vue) {
  Vue.use(Select)
  Vue.use(Option)
  Vue.use(OptionGroup)
  Vue.use(Input)
  Vue.use(Tree)
  Vue.use(Dialog)
  Vue.use(Row)
  Vue.use(Col)
 }
}
export default element

行，稍微修修引进的对话框就解决！看样子这是element-ui那边犯得个小错儿。其实，要是这样弄，main.js文件不就要变胖了，个人觉得还是首载比较好哈。

今天就说到这儿！希望能帮到你们，别忘了按个赞分享出去

// css样式还是需要全部引入
	import 'element-ui/lib/theme-chalk/index.css'
	import element from './element/index'
	Vue.use(element)

哟~今天就唠到这儿不懂的事儿咱在下面留言说；要是有啥新鲜主意或者创意，也可以分享出来让大家瞅瞅。然后记得给咱打个赞再转发给你那帮小伙伴儿！

原文链接：https://www.icz.com/technicalinformation/web/javascript/2024/03/11362.html，转载请注明出处~~~