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. 三、MyCat主要配置介绍

    一.配置文件 1.server.xml Mycat的配置文件,设置账号.参数等2.schema.xml Mycat对应的物理数据库和数据库表的配置3.rule.xml Mycat分片(分库分表)规则 ...

  2. 学习Keepalived（二）

    一.keepalived简介 keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于,用来防止单点故障. 二.vrrp协议2.1 vrrp协议简介 在现实的网络环境中,两台需要通信 ...

  3. Tomcat之“VM options配置”

    VM options: -Dfile.encoding=UTF-8

  4. C语言杂谈

    C语言程序处理过程 预处理:宏定义展开.头文件展开.条件编译,这里并不会检查语法 编译:检查语法,将预处理后文件编译生成汇编文件 汇编:将汇编文件生成目标文件(二进制文件) 链接:将目标文件链接为可执 ...

  5. ESD@TVS选型

    一.工作原理 ESD ESD静电保护元件,又称静电抑制二极管.ESD是多个TVS晶粒或二极管采用不同的布局做成具有特定功能的多路或单路ESD保护器件,主要应用于各类通信接口静电保护,如USB.HDMI ...

  6. 首次写iPad布局感想（H5）

    一直做前端工作,却从来没有开发过平板的项目,想来也是有遗憾的,孰知,新公司的第二个项目就是要适配平板,刚开始是懵的,对于兼容,感觉是自己的短板,但庆幸的是这一版只需要兼容iOS系统就可以. 那我现在就 ...

  7. WePY为了兼容支付宝小程序，改了好几十行代码

    早在16年底,就有流出支付宝在做小程序的事情,见<如何看待支付宝推出「小程序」?>,今年8月18号支付宝版本小程序的终于公测,十月怀胎实属不易啊. 紧接着就有人给我提ISSUE了: 此时我 ...

  8. java中抽象类和抽象方法到底什么关系?请举例说明！

    抽象类和抽象方法什么关系?抽象类中可能有抽象方法,也可能没有抽象方法.那位说,就跟没说一样,那抽象类和抽象方法都叫抽象,他们必定有关系,那关系是什么呢?如果一个类中有抽象方法,它必须得是抽象类. An ...

  9. tcp和udp的头部信息

    源端口号以及目的端口号:   各占2个字节,端口是传输层和应用层的服务接口,用于寻找发送端和接收端的进程,通过这两个端口号和IP头部的ip发送和接收号,可以唯一的确定一个连接.   一般来讲,通过端口 ...

  10. 不同标准下的C语言常量范围的默认类型的检测 （测试样例为C90与C99）

    不同标准下的C语言常量范围的默认类型的检测 一.C90与C99标准下的不同常量范围的默认类型     C90标准下对不同常量范围默认类型的检测实现及运行结果: C99标准下对不同范围默认类型的检测实现 ...