在 3 年前发布的 element-ui / Administrator 中按需引入实现后端 139
element-ui中按需引入
为什么选择element-ui而不是iview
因为在多次使用这两个组件的过程中，我逐渐发现iview的一些组件还是需要重新建立的，而element-ui现在已经越来越成熟了。
那么，这里我们就上去了解一下vue中按需引入的element-ui（Dialog组件）的一些组件的陷阱。
我们这里使用的版本是element-ui:2.4.7、vue:2.2.2
1. 点播介绍
1.使用babel-plugin-component，我们可以只引入必要的组件，减少项目体积：
npm install babel-plugin-component -D
2.修改.babelrc文件
"plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]
其实如果这里还有其他配置的话，我们只需要在plugins字段中继续添加我们需要的配置代码即可。
2、我们将按需引入的代码单独分开。
1.在src文件夹中创建我们的element文件夹，并在其上创建index.js文件
2、在索引文件中写入一些我们需要引入的组件
// 导入自己需要的组件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
要在此处使用 Select 组件，必须同时使用 Option 和 OptionGroup。
这里的 install 方法在 main.js 中表示。 如果使用Vue.use()方法，默认会调用install方法。
3.在main.js中使用这个文件就完成了
// css样式还是需要全部引入import 'element-ui/lib/theme-chalk/index.css'import element from './element/index'Vue.use(element)
3、为什么要采用单独分区的方式来按需加载？
1、我们用常规方法再次加载，直接在main.js文件中使用。
import 'element-ui/lib/theme-chalk/index.css'import { Dialog, Select, Option, OptionGroup, Input, Tree, Row, Col } from 'element-ui'Vue.use(Select)Vue.use(Option)Vue.use(OptionGroup)Vue.use(Input)Vue.use(Tree)Vue.use(Dialog)Vue.use(Row)Vue.use(Col)
抱歉，我现在遇到错误
我们在element-ui的源码中可以看到确实使用了Dialog，但是运行的时候还是报错。
2.我们将对引入的Dialog进行一些修改，如右图
可以看到elementui 组件按需引入，我们现在已经将其改为大写elementui 组件按需引入，项目可以正常运行了。 应该是element-ui的一些小错误。 这种写法会让我们的main.js文件显得庞大且复杂，所以我们推荐使用第二种形式，按需加载element-ui的一些组件。
以上就是本文的全部内容。 希望对你的学习有所帮助，也希望你多多支持我。
