vue脚手架按需导入引入element-ui

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

降babel.config.js文件修改为：

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

在src新建文件夹element文件夹，创建index.js

import Vue from 'vue';
import {Button} from 'element-ui';
const ele = {
    install () {
        Vue.use(Button);
    }
}
export default ele

在main.js下面引用：

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

最后就可以在页面中去使用Button组件：

<el-button type="primary">这个是按钮</el-button>

其效果如下：