Bug：elementUI样式不起作用、Vue引入组件报错not found等（Vue+ElementUI问题汇总）

﹏ヽ暗。殇╰゛Y 2024-02-28 03:04 28阅读 0赞

## 前端问题合集：Vue+ElementUI ##

##### 1. Vue引用Element-UI时，组件无效果解决方案 #####

> 前提：
> 
>  *  已经安装好elementUI依赖

//安装依赖
    npm install element-ui
    //main.js中导入依赖并在全局中使用
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)

如果此时发现element的组件依然没起效果，原因：未引入css样式文件  
当前效果：  
![在这里插入图片描述][07ebfd03672845a59d91fdc9b76bf931.png]  
预期效果：  
![在这里插入图片描述][196d731d89284530b253d2a1bd38682d.png]

> 解决办法：在main.js中引入css文件

//引入element-ui所提供样式
    import ElementUI from 'element-ui'
    // element-ui所提供的css样式
    import 'element-ui/lib/theme-chalk/index.css'

![在这里插入图片描述][0bc856f1e7b147c1bd27808417e538d7.png]

##### 2. Vue引入components报错：export xxx not found #####

> 在pages文件夹的Register.vue页面中引入components下的RegisterLogo.vue报错：  
> export ‘xxx‘ was not found in ‘xxx‘或This relative module was not found:‘xxx‘

解决办法：  
方法一：观察是否是组件名称、导入方式等错误

>  *  RegisterLogo.vue的export default中name字段是否能与Register.vue中的对应上  
>     ![在这里插入图片描述][5d313c2a8b804c0f872f4bc0d131e731.png]
>  *  注意引入路径是否正确，引入时组件是否有在components字段中添加，使用时是否有带反斜线，引入RegisterLogo.vue时，是否有加花括号  
>     ![在这里插入图片描述][8c546052c72048258ca7c93d1ad45fa0.png]

方法二：将花括号去掉  
![在这里插入图片描述][6100891bcbd54975a0f37c555f939ebb.png]

[07ebfd03672845a59d91fdc9b76bf931.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/45dcbac5be7842f38f356ba5a47fc3cf.png
[196d731d89284530b253d2a1bd38682d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/0cc41d2e00f84bba92248cbded0077f8.png
[0bc856f1e7b147c1bd27808417e538d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/5a47e7b7b5ef441793e8ff5aa1176001.png
[5d313c2a8b804c0f872f4bc0d131e731.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/e56f69cb7755480dba16698788aef602.png
[8c546052c72048258ca7c93d1ad45fa0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/019c0b37491b490187496cd722ede6ba.png
[6100891bcbd54975a0f37c555f939ebb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/1f55ad94679a4655b71e940d2abe35f6.png