vue3.0+element-ui 按需加载

最新推荐文章于 2024-06-03 14:47:38 发布

原创最新推荐文章于 2024-06-03 14:47:38 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

element-ui 专栏收录该内容

2 篇文章

订阅专栏

本文记录了在Vue3.0中使用ElementUI遇到的兼容性问题及解决方案，包括安装babel-plugin-component、修改babel配置文件及按需加载组件的具体步骤。

记录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"
  ]
}

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