Vue3如何解决Element-plus不生效的问题
作者:kk爱闹
这篇文章主要介绍了Vue3如何解决Element-plus不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3中Element-plus不生效问题
只需要在main.js中加上这两句
import ElementPlus from 'element-plus' import 'element-plus/theme-chalk/index.css'
看其他文章说和引入顺序有关,以及不是一个app的相关问题,但我测试下来好像都不是这些问题。
总而言之,我的全局main.js
配置是这样:
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/theme-chalk/index.css' createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
补充:
今天又重新用vue ui建了个项目,按照官网的快速开始指南,并没有什么问题。
一些element-plus组件不能正常使用是啥原因导致的
根据官方文档以及大佬的博客得出以下步骤:
第一步:首先你需要安装unplugin-vue-components和unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
第二步:然后将下列代码插入到你的vite或者webpack的配置文件中,我这边使用的是webpack配置文件。
在添加完以上代码之后,可能会遇到两个问题:
第一个问题:autoimport is not a function
解决办法:
查阅相关资料发现,是版本兼容性的问题,然后我就在package.json文件中查看unplugin-auto-import的版本号,发现是0.17.1好像,反正是17版本,后面降版本,改成0.16.7,然后npm i运行一下,这个问题就不报错了。
第二个问题:Invalid options in vue.config.js: “plugins“ is not allowed
解决办法:
查阅相关资料发现,webpack 相关的配置需要写到 configureWebpack 里,不能直接写在外面。
所以代码如下:
两个问题解决了,就能成功运行了。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。