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 Data Jpa使用QueryDsl接口出现的一些问题

    1.QuerydslPredicateExecutor当实现此接口时,如果出现什么什么类没有找到的时候,请确认相关的querydsl依赖是否已经添加到maven依赖中 <dependency&g ...

  2. 在java web工程中jsp页面中使用kindeditor

    在这之前我们用Notepad++写过kindeditor 在Java web工程里也差不多 首先我们复制之前的thml代码粘贴到工程里 然后把样式也复制进去 然后就可以运行了

  3. LVS集群和Keepalived高可用实战

    第四十章LVS集群和Keepalived高可用实战 一.ARP协议 1.概念 地址解析协议,即ARP(AddressResolutionProtocol),是根据IP地址获取物理MAC地址的一个TCP ...

  4. 遇到的错误之“Cannot find module 'XXX’的错误”

    一.问题: 在进行webpack打包的时候,会出现Cannot find module 'XXX'的错误,找不到某个模块的错误 二.解决方法: (1)方法1: 直接进行npm install重新打包: ...

  5. js 遮罩效果

    -------------------------------tipswindown.js------------------------------ ///--------------------- ...

  6. 如何利用WebSocket实现网页版聊天室

    花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...

  7. source /etc/profile 不起作用？

    给Linux配置了环境变量,source /etc/profile 完成之后只在当前用户下起作用,切换用户后设置的环境变量竟然没有生效!重启后虽然生效了,但是想知道怎么回事. 找到了如下解答: 假设你 ...

  8. Android Studio登陆界面+Button不变色问题

    今日所学内容: 1.初始相对布局 2.AS登录界面 3.一个可以下载小图标的阿里的网站iconfont-阿里巴巴矢量图标库 用GitHub账号绑定就可以免费下载 4.取颜色工具ColorCop 遇到的 ...

  9. EMS邮箱数据库常用命令（二）

    1.查询邮箱数据库的使用空间 查询Exchange环境中所有邮箱数据库. 键入以下命令 Get-MailboxDatabase -Status | FL name,DatabaseSize 命令执行后 ...

  10. php代码审计之——phpstorm动态调试

    xdebug调试 调试环境部署 xdebug的版本需要与PHP版本相对于,所以不要轻易改变PHP环境版本. 0 配置php解析器 1 下载对应版本的xdebug xdebug官网下载地址:https: ...