vue-cli@4.5按需引入 element-ui

500 阅读1分钟

借助 babel-plugin-component 插件, 可以只引入需要的组件, 演示的是 vue2 版本的

安装:

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

然后配置 babel.config.js 文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',   // 这个是 vue-cli 生成的
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后就是引入入自己需要的组件了

// main.js
import Vue from 'vue'
import { Button } from 'element-ui';
import App from './App.vue'

// 两种注册方式都可以
// Vue.use(Button)
// Vue.component(Button.name, Button);

new Vue({
  el: '#app',
  render: h => h(App)
});

其他的引入方式可以直接参考官网 element.eleme.cn/#/zh-CN/com…