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. nginx优化的一些建议

    1.1隐藏Nginx header里版本号信息 1.查看版本号 curl -I 127.0.0.1 HTTP/1.1 200 OK Server: nginx/1.6.2 Date: Sat, 14 ...

  2. 微信APP支付V3版本签名 && APP下单/订单查询接口Python版实现

    问题背景 最近接入微信支付,微信官方并没有提供Python版的服务端SDK,因而只能根据文档手动实现一版,这里记录一下微信支付的整体流程.踩坑过程与最终具体实现. 微信支付APP下单流程 根据微信官方 ...

  3. 经历了源码的痛苦，掌握DRF的核心序列化器

    目录 DRF的核心--序列化器 序列化器 什么是序列化和反序列化? 序列化 序列化demo 字段类型 字段参数 序列化自定制返回字段 方法一:在序列化类(serializers.py)中写 方法二:在 ...

  4. Python中对象、类型、元类之间的关系

    Python里的对象.类型和元类的关系很微妙也很有意思. 1989年圣诞节期间,上帝很无聊,于是创造了一个世界. 对象 在这个世界的运转有几条定律. 1.一切都是对象 对象(object)是这个世界的 ...

  5. 12_非线性理论基础_Lyapunov直接方法

  6. CSS 3-浮动、定位

    文档流 文档流是一种默认定位方式,在文档流中元素框的位置由元素在html中的位置决定,文档流中元素的position属性为默认的static或继承来的static并按照普通流定位.块级元素独占一行,自 ...

  7. [MySQL]IP处理函数inet_aton()和inet_ntoa()

    INET_ATON(expr) 给出一个作为字符串的网络地址的"点地址"(如127.0.0.1)表示,返回一个代表该地址数值的整数.地址可以是4或8比特地址. mysql> ...

  8. FreeSql的各种工程demo上新啦

    FreeSql的各种工程demo GitHub | Gitee console,winforms nf461,vb,wpf,webapi,workerSevice,signalIR xamarinFo ...

  9. Docker操作容器2

    Docker操作容器1:https://blog.csdn.net/Kevinnsm/article/details/ 1.如何更改docker容器中的配置文件(如nginx容器中的nginx.con ...

  10. kubectl scale 一次缩容调整过程

    查看master环境相关信息一.版本信息 [root@master-web-38 ~]# kubectl versionClient Version: version.Info{Major:" ...