vue3.0+element-ui 按需加载

记录vue3.0在使用element ui时遇到的问题及解决方案

1、根据element 官网步骤操作

安装babel-plugin-component

npm install babel-plugin-component -D

修改 .babelrc 文件 （在vue3.0里是没有 .babelrc 文件的 只有 babel-config.js文件） 将修改写入babel-config.js文件

module.exports = {
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

引入使用 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

到这里官方的使用步骤就完成了 我们尝试运行项目

结果报错：

Error: Cannot find module 'babel-preset-es2015' from 'C:\Users\Administrator\Des
ktop\vueProject\vuedemo'

2、解决办法

1.安装 @babel/preset-env ；项目目录下，运行命令行：

npm i @babel/preset-env -D

2.修改 babel-config.js文件，把es2015改成 @babel/preset-env

module.exports = {
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [  
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    "@babel/plugin-transform-runtime"
  ]
}

再次运行项目 按需加载 成功！！！