使用Element写html页面，打开没有样式（低级错误记录）

已于 2023-03-31 23:44:38 修改
阅读量419 收藏
点赞数
文章标签： html vue.js javascript
于 2023-03-31 23:43:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ciakkk/article/details/129890890
版权

如图：引入了js，创建了Vue对象，使用element组件代码，打开页面却没有样式。在这里插入图片描述
在这里插入图片描述
最后发现是Vue对象，写成了小写
在这里插入图片描述
改成大写，就成功出现element组件的样式了。
在这里插入图片描述

DuckFry
关注
【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题
weixin_44372834的博客
08-29 3115
背景：【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题，一直不生效，一开始找不出原因。版本： vue 3.2.13，element-plus 2.2.14。
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8947
未完
HTML页面引入ElementUI库时样式失效的解决方法（亲测可行）
k912120的博客
06-07 5982
HTML页面引入ElementUI库时样式失效的解决方法（亲测可行）
使用Element组件，不显示样式
m0_46539364的博客
07-14 1025
解决方案 1.npm i element-ui 2.在main.js文件中导入 3.保存，即可显示样式
Vue引入的ElementUi没有样式怎么办
舌尖上的蛋炒饭的博客
08-19 8373
Vue引入的ElementUi没有样式怎么办 就像我的项目，明明按照官网的操作，全部引入了 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
HTML文件通过cdn引入element-ui组件样式不显示问题
潮汐未见潮落的博客
06-05 4605
html页面通过cdn引入element组件不显示的问题及两种解决方法
html单页面通过cdn引入element-ui组件样式不显示问题
雨落宿命敲的博客
03-02 3077
html单页面通过cdn引入element-ui组件样式不显示问题 必须先引入vue，再通过cdn引入element，否则element-ui组件与样式无效。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
React学习五（页面路由）
qq_44872688的博客
03-16 3111
文章目录一、前端路由二、hash模式三、history模式四、两种路由方式的差异五、React的页面路由模块：react-router-dom的使用1、安装2、实现路由模式的组件（决定路由模式）3、Route组件4、Router组件5、Link和NavLink组件（1）Link组件（2）NavLink组件6、Redirect组件7、Switch组件8、withRouter组件9、404视图六、react-router-dom实现路由示例 一、前端路由 1、从用户的角度看，前端路由主要实现了两个功能（使用a
HTML5面试题
热门推荐
YaToue
04-10 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式是一种向后兼容的解析方法。 触发...
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
Webpack4.0 打包工具基本操作教程 小白篇
Zeus
04-24 563
前言 我们在开发项目时，会用到很多的静态资源，我们在浏览器，浏览网页时，网页加载的速度就会变慢，而且有很多的文件都是相互依赖的。 总结 网页加载速度慢， 因为 我们要发起很多的二次请求 要处理错综复杂的依赖关系 如何解决 合并、压缩、精灵图、图片的Base64编码 requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系 webpack是什么呢 webpack 是前端的一个项目...
vue引入element不显示样式以及一些别的问题
onorange的博客
08-03 2409
vue3.0使用的element为element-plus，与vue2.0略有不同；跟着视频学习时，自己用的3.0版本，与视频不同，所以element引入后页面空白。
关于element-ui样式无法显示的问题+解决办法
喜狼狼与灰太杨的博客
08-18 5869
问题描述： 新建的一个Vue.js项目（编辑工具WebStrom）， 我的环境： node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm install -g vue-cli cnpm npm的淘宝镜像 项目中导入Element-UI框架 安装： npm install element-ui -S 项目中导入，修改main.js import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/i
angular [innerHtml]=“contentxq“ 不显示行内样式style pipe 返回值去掉html标签安全文本
qq_36557846的博客
05-08 534
问题描述 使用百度编辑器Ueditor，后台能返回正确的数据格式 使用[innerHTML]展示数据后div内没有行内样式 解决办法 在需要的地方新建管道 ng g pipe pipes/html htmlpie管道代码 import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'html' }) e
v-html 渲染模板后有些样式没上去或者嵌套子组件样式没上去
weixin_48813932的博客
04-20 845
引用官方的话说就是：“当标签带有scopedattribute 的时候，它的 CSS 只会影响当前组件的元素”还有一个小tip通过v-html创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。
vue页面不显示效果
weixin_44501320的博客
09-10 5450
最近在写vue，所以有点小坑给列出来 1、vue绑定页面但是不显示样式 vue绑定的div里面设置字体时不要用<text>标签，否则绑定的div里面的样式全部显示不出来     暂时就这样，如果还有坑我之后在更新加粗样式 ...
element-ui样式不显示
li_pangpangka的博客
12-03 7960
因为是跟着视频学习的，视频用的是vue2，引入方法和vue3大相径庭，所以花了一些时间才解决。 严格按照官网的步骤，选择完整引入或者按需引入 完整引入 在 main.js 中写入以下内容： import Vue from ‘vue’; import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; import App from ‘./App.vue’; Vue.use(ElementUI); 一定不能忘记
使用requests.get得到＜Element html at 0x271cec68f48什么意思？
黄佳俊的博客
04-25 2711
请注意这一行：html_page = etree.HTML(response_page.text)， etree.HTML()可以用来解析字符串格式的HTML文档对象，将传进去的字符串转变成_Element对象 说以你输出的是_Element对象,接下来就可以按照etree特定的语法规则去提取数据。 举例： import requests url = 'https://www.baidu.com' res = requests.get(url) html = res.text print(typ
爬虫-解析库的使用-Xpath
weixin_39107270的博客
03-29 397
4. 解析库的使用 对于网页节点，可以定义id、class或其他属性，且节点之间有曾是关系，可以通过Xpath 或者CSS选择器来定位一个或者多个节点，再调用相应的方法获取它的正文内容或者属性。 python中强大的解析库有：lxml、Beautiful Soup、pyquery 4.1 使用Xpath 4.1.1 Xpath 概览 Xpath的选择功能十分强大，提供了非常简洁明了的路径选择表达式。几乎我们想要定位的节点，都可以用Xpath 来选择。 4.1.2 xpath 基础教程 https://www
html页面如何使用element ui
最新发布
09-12
要在HTML页面中使用Element UI，需要按照以下步骤进行设置： 1. 首先，确保你已经引入了Vue.js。你可以通过在HTML页面中添加以下代码来引入Vue.js： ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 2. 接下来，你需要下载并引入Element UI的CSS和JS文件。你可以从Element UI的官方网站（https://element.eleme.cn）下载文件，或者使用CDN链接。在HTML页面中添加以下代码引入Element UI的CSS和JS文件： ```html <!-- 引入Element UI的CSS文件 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入Element UI的JS文件 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 3. 确保Vue.js和Element UI的文件都已经引入后，你可以开始在HTML页面中使用Element UI组件了。在Vue实例的`template`中，使用Element UI提供的组件标签即可。例如，要使用一个按钮组件，可以在`template`中添加以下代码： ```html <el-button type="primary">按钮</el-button> ``` 4. 最后，需要在Vue实例中注册Element UI的组件。你可以通过在Vue实例的`components`属性中注册所需的组件。例如，如果你要使用按钮组件，在Vue实例中添加以下代码： ```javascript new Vue({ el: '#app', components: { 'el-button': ElementUI.Button } }); ``` 这样，你就可以在HTML页面中使用Element UI的组件了。记得将`#app`替换为你实际的根元素选择器。 希望对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值