解决vue 3和 element plus引入无样式的问题

最新推荐文章于 2024-04-22 16:35:58 发布
最新推荐文章于 2024-04-22 16:35:58 发布
阅读量389 收藏
点赞数
分类专栏： 问题总结 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47628141/article/details/124779986
版权

本身前端小白，以前用vue2.0+element ui写过一个项目
这次生成手脚架发现main.js和原来的不同，搜了一下才知道这是vue3得引element plus，删掉原来的element ui然后重新下载，根据官网的引了一段
在这里插入图片描述
上面是官网写的

我直接闭眼复制了，结果搞的是两个app对象，搞了半天没样式。。。。

重新更改后样式生效了

魏郴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题
weixin_44372834的博客
08-29 2856
背景：【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题，一直不生效，一开始找不出原因。版本： vue 3.2.13，element-plus 2.2.14。
HTML-引入Vue3和Element Plus
最新发布
04-24
这将引入Element Plus的CSS样式文件和JavaScript库，确保所有组件样式和功能可以正常工作。 然后，在HTML中创建一个Vue实例，并挂载到页面元素上。Vue3引入了Composition API，使得代码更加模块化。在`index.html`...
Vue3 Element-Plus样式丢失问题
YZero_cn的博客
02-06 1154
将element-plus版本手动调高一点再重新安装,发现有dist目录了,样式正常了
element-plus在vue3中样式不显示的问题
qq_44947815的博客
07-01 8336
element-plus在vue3中样式不显示的问题
element plus 布局 代码没反应 样式并未生效
weixin_44656422的博客
04-22 251
因为网页上示例代码中没有 添加grid-content ep-bg-purple-dark 等相关颜色的样式。在element plus的github中有相关代码，这里可以找到颜色样式。就是这样深深浅浅的颜色不显示，整个页面都是白的。
Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失
szw-yunie的博客
06-25 2294
我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是但是这样做却也是。在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。
vue引入element不显示样式以及一些别的问题
onorange的博客
08-03 2300
vue3.0使用的element为element-plus，与vue2.0略有不同；跟着视频学习时，自己用的3.0版本，与视频不同，所以element引入后页面空白。
Vue3、Element Plus、typescript后台管理系统
02-25
4. **Teleport**：Vue3新增了Teleport功能，可以将组件的内容“传输”到文档的其他位置，如在标签末尾，解决了一些特殊布局和插件冲突的问题。 Element Plus的知识点： 1. **基于Vue3**：Element Plus是为Vue3设计...
基于Vue3 + Element Plus 的后台管理系统解决方案
07-12
Vue3 + Element Plus 后台管理系统解决方案是一种现代前端开发架构，用于构建高效、可复用且易维护的企业级后台管理应用。Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和开发体验改进，如Composition API、...
基于Vue3 + Element Plus
01-25
Element Plus不仅继承了Element UI的优点，还在样式、组件和API上做了很多改进和扩展，比如增加了一些新的组件，改进了旧组件的性能，并对API进行了调整以适应Vue3的特性。 在这个"基于Vue3 + Element Plus的后台...
vue3新建项目，配置路由vue-router，引入element-plus
01-08
总的来说，这个项目是一个使用Vue3、Vue Router 4和Element Plus的简单应用，涵盖了前端开发中的基本架构和组件库的使用。通过这个项目，你可以学习到如何配置Vue3项目、设置路由以及引入和使用UI组件库。
vue3中按需引入elementui-plus样式不生效
qq_44407871的博客
10-10 677
在main.js中添加以下代码，注意添加顺序。
vue3+element plus 实现管理系统布局样式
weixin_53141315的博客
05-10 3681
vue3+element plus 实现管理系统布局样式（让布局占满页面，不随内容增加而变化）
家人们，发现ElementUI按需引入不出现样式和内容的大坑
weiyanyan2020的博客
04-29 483
醉了，按照官网操作失效，加上这两个才行！
Vue3.0+Element plus项目中组件样式丢失
做笔记/记录遇到的前端bug
01-07 2431
解决Element Plus 组件样式丢失，组件显示位置不对。ElMessage 、el-drawer等组件显示位置不正确等问题。
【已解决】Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式
前端界的小学生
06-22 4187
Element-plus在使用ElMessage消息弹框的时候没有样式，按照官方的按需加载的方式引入的。
vue3中element-plus的一些消息提示框，弹出框没有样式效果
kanno的博客
02-07 2051
vue3中element-plus的一些消息提示框，弹出框没有样式效果，比如消息提示框、消息弹出框、抽屉等等
vue3项目，按需引入Element-plus ElMessage 样式丢失
qq_34082921的博客
12-18 673
将ElMessage等都加入到.eslintrc globals字段里面。将上述代码导入import部分的代码去掉，直接调用。此时会出现样式丢失问题。
vue3 加载 ElementPlus 只显示文字不显示样式
sinat_29326171的博客
10-20 922
createApp(App).use(ElementPlus).mount(‘#app’)
vue3 引入element-plus
09-16
要在Vue 3中引入Element Plus UI框架，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Vue 3。你可以使用npm或yarn来安装Vue 3。 2. 在你的项目中安装Element Plus。你可以使用npm或yarn来安装Element Plus。安装命令如下： 使用npm： ``` npm install element-plus ``` 使用yarn： ``` yarn add element-plus ``` 3. 在你的代码中引入Element Plus。你需要在你的main.ts（或入口文件）中添加以下代码： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 这段代码做了以下几件事情： - 引入了Vue的createApp方法以及Element Plus库。 - 导入了Element Plus的样式文件。 - 创建了Vue实例并在实例上注册了Element Plus插件。 - 最后使用mount方法将Vue实例挂载到HTML页面上的一个元素上（通过id为`#app`的元素）。 4. 运行你的Vue 3应用程序，你现在应该能够看到Element Plus的UI组件在你的应用程序中正常运行了。 请注意，上述步骤是适用于使用Vite或CLI脚手架创建的Vue 3项目的通用方法。你需要根据你的项目具体情况进行相应＊＊＊＊＊＊6%89%8B%E6%9E%B6%E5%88%9B%E5%BB%BA%E7%9A%84vue3%E9%83%BD%E9%80%82%E7%94%A8

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值