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" content="width=device-width, initial-scale=1.0">

  <!-- 1. 引入vue -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- 2. 引入样式 -->

  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <!-- 3. 引入组件库 -->

  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <title>element</title>

</head>

<body>

  <div id="app">

    <el-button>按钮</el-button>

  </div>

</body>

  <script>

    new Vue({

      el: '#app',

      data() {

        return {

        }

      },

    })

  </script>

</html

html单页面通过cdn引入element-ui组件样式不显示问题的更多相关文章

  1. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  2. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  3. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  4. element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  5. 覆盖element ui 的样式

    我们可以使用 !important  来覆盖element ui 的样式 首先先在浏览器中找到 我们所要修改的样式 ,然后找到她的 class  重新写他的样式 ,例如 . app  { width ...

  6. （Element UI 组件 Table）去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  7. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  8. Element UI Form 每行显示多列，即多个 el-form-item

    Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...

  9. 在npm Vue单页面的环境下，兄弟组件之间通信Bus

    参考1:https://www.cnblogs.com/wangruifang/p/7772631.html 参考2:https://www.jianshu.com/p/b3d09c6c87bf 在m ...

随机推荐

  1. spring event

    昨天看到了一遍关于spring event的帖子,觉得很好,就照着敲了一份代码,感觉对spring event有了进一步的认识.帖子链接:https://segmentfault.com/a/1190 ...

  2. ajax解析json对象集合

    这个需求是我们做项目经常遇到的,当你想渲染表格的数据,你的数据在servlet中存在了arraylist中,你想把arraylist传到ajax的data中,这时候就需要用到ObjectMapper对 ...

  3. 控制算法的划分（自适应控制、预测控制、模糊控制等，PID等；蚁群算法、神经网络，还有机器学习、人工智能中的很多方法）

    一般来说,控制器的设计,分为控制框架的选取,跟参数的优化.自适应控制.预测控制.模糊控制等,跟PID一样,是控制算法(我习惯称为控制框架). 而粒子群.遗传算法(类似的还有蚁群算法.神经网络,还有机器 ...

  4. Altium design16设计技巧

    第一栏:共有界面 1.在原理图和PCB都打开的情况下,选中原理图可以对应到PCB界面元件里面 第二栏:原理图界面 1.批量改变元件属性 选择某一元件-查找相似对象-将其要改变的内容设置为same-点击 ...

  5. html 常用标签及基本用法

    一个网页基本是由 结构(html) + 样式(css) + 脚本(js) 组成.学习的话 应该从最基本的标签开始, 结构清晰了, 再用css美化, 最后可以用脚本加上特效 块级 和 行类标签 特点: ...

  6. 论文阅读-Clustering temporal disease networks to assist clinical decision support systems in visual analytics of comorbidity progression

    一.问题描述:      二.相关工作: 三.方法描述: 四.实验及结果

  7. TextView显示html样式的文字

    项目需求: TextView显示一段文字,格式为:白雪公主(姓名,字数不确定)向您发来了2(消息个数,不确定)条消息 这段文字中名字和数字的长度是不确定的,还要求名字和数字各自有各自的颜色. 一开始我 ...

  8. 每日所学之自学习大数据的Linux环境的配置

    今天开始配置环境,因为下载镜像文件需要很长时间,加上训练,所以Linux环境之配置了一半 VMware下载及安装教程(Window) 在安装虚拟机时需要下载镜像文件 下面是我下载的镜像文件的地址 Ce ...

  9. vue里面v-for显示红色波浪线

    vue里面使用v-for代码显示红色的波浪线,解决办法: before: <div v-for="tmsgs in msg.message"></div> ...

  10. 解决pycharm的爬虫乱码问题（初步了解各种编码格式）

    Ascii码(American Standard Code for Information Interchange,美国信息互换标准代码):最初计算机只在美国使用时,只用8位的字节来组合出256(2的 ...