vue-cli3 按需引入外部elment-ui UI插件

1.借助bable-plugin-component,引入需要引入的组件

npm i element-ui -D
npm install babel-plugin-component -D

 

2.修改babel.config.js文件

官网是这样写的

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

 这时会报错.plugins[0][1] must be an object, false, or undefined ,需要更改一下

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "component",

        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }

    ]
  ]
}

 

 

 

3.在插件文件里面创建element文件和index.js

 

 

 

 

 

index.js

//需要导入的组件
import {Select,Option} from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
  }
}

export default element

 

4.main.js中使用

import 'element-ui/lib/theme-chalk/index.css'
import element from './packages/element/index'
Vue.use(element)