ELementUI 里面的按需引入

ELementUI 里面的按需引入

首先我们来看一下全部引入，就这三行

import ElementUI from 'element-ui'
import  'element-ui/lib/theme-chalk/index.css'  //这里引入了所有的样式
Vue.use(ElementUI)  //就这一行，它会把 ElementUI 里面所有的组件都注册成全局组件

（不过我测试的时候没那么大，不知是不是 ElementUI 优化了还是怎么）

按需引入

npm install babel-plugin-component -D
// 在 babel.config.js 里面
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}


import {Row, Button} from 'element-ui'

Vue.config.productionTip = false
Vue.component(Row.name, Row)
Vue.component(Button.name, Button)  //第一个参数是标签名，用了这组件，它会自动引入相应的 css

相关链接：
https://element.eleme.cn/#/zh-CN/component/quickstart