vue 3.0使用element-plus按需导入方法以及报错解决

 更新时间:2024年02月21日 11:00:47   作者:曈欣  
Vue3是不能直接使用Element-ui了,需要换成Element-plus,下面这篇文章主要给大家介绍了关于vue 3.0使用element-plus按需导入方法以及报错解决的相关资料,需要的朋友可以参考下

使用方法

安装组件库

npm install element-plus -S

按需导入

安装按需导入相关的依赖

npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js配置

在 vue 里面配置,不能把官网提供的代码直接复制过来,需要调整一下。先引入相关依赖,plugins 外面加多一个configureWebpack对象

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});

报错解决

报错 1:AutoImport is not a function

解决:是 unplugin-auto-import版本高了,我用的0.17.3。后面降版本,改成0.16.7,这个问题就不报错了。

报错2:Components is not a function

解决:unplugin-vue-components 版本也高了,从0.26.0 降到了 0.25.2 ,就能正常运行了

附: 全局引入

一种引入element-plus的方式是全局引入,代表的含义是所有的组件和插件都会被自动注册:

//main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

总结

到此这篇关于vue 3.0使用element-plus按需导入方法以及报错解决的文章就介绍到这了,更多相关vue 3.0使用element-plus按需导入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue基础知识--axios合并请求和slot

    vue基础知识--axios合并请求和slot

    这篇文章主要介绍了vue中的axios和slot,文中代码非常详细,对大家的工作学习有所帮助,感兴趣的朋友可以参考下
    2020-06-06
  • vue开发table数据合并实现详解

    vue开发table数据合并实现详解

    这篇文章主要为大家介绍了vue开发table数据合并实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue setInterval 定时器失效的解决方式

    vue setInterval 定时器失效的解决方式

    这篇文章主要介绍了vue setInterval 定时器失效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3源码剖析之简单实现方法

    vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下
    2021-09-09
  • vue项目中扫码支付的实现示例(附demo)

    vue项目中扫码支付的实现示例(附demo)

    本文主要介绍了vue项目中扫码支付的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue使用自定义指令来控制页面按钮组的权限思想

    vue使用自定义指令来控制页面按钮组的权限思想

    这篇文章主要介绍了vue使用自定义指令来控制页面按钮组的权限思想,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue.js中的computed工作原理

    Vue.js中的computed工作原理

    这篇文章,我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。对Vue.js中的computed工作原理感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-03-03
  • vue项目实现中英文切换的详细步骤

    vue项目实现中英文切换的详细步骤

    这篇文章主要给大家介绍了关于vue项目实现中英文切换的详细步骤,项目中经常有中英文切换的功能,接下来就简单实现以下这个功能,文中通过代码介绍的非常详细,需要的朋友可以参考
    2023-11-11
  • Vue 插件及浏览器本地存储

    Vue 插件及浏览器本地存储

    这篇文章主要介绍了Vue 插件及浏览器本地存储,插件通常用来为Vue添加全局功能,包含install方法的一个对象。更多相关介绍,需要的小伙伴可以参考下面文章内容
    2022-05-05
  • vuex入门教程,图文+实例解析

    vuex入门教程,图文+实例解析

    这篇文章主要介绍了vuex入门教程,图文+实例解析,具有很好的参考价值,希望对大家有所帮助。
    2022-03-03

最新评论