HTML文件通过cdn引入element-ui组件样式不显示问题

潮汐未见潮落

已于 2022-06-07 09:04:51 修改

阅读量4.3k

点赞数 8

分类专栏： HTML与CSS 文章标签： html vue.js javascript

于 2022-06-05 20:59:57 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/125136359

版权

HTML与CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前言：

之前都是使用脚手架开发的vue项目，写页面为了省事，一般都直接使用现成的组件，像PC端就是用 Element 或者 bootstrap，移动端使用 Vant，它们的样式都比较好看，可以节约开发人员的时间，提高工作效率。

有天一个非cs专业的同学问我白嫖几个html页面，但是我也没有存货了，之前都是用的vue，就直接现场写HTML，因为也没什么难度，就一个静态单页面（随便搞几张图片，一些文字）。

图片展示的地方我想用一个轮播图，发现用css和js写的有点麻烦，就直接去用element的走马灯了，然后引入vue，引入element的cdn，使用简单的按钮代码试试看效果，发现没有用。

代码就是简简单单一行啊，使用那个按钮代码

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

但是页面也简简单单就是一个 “按钮” ，两个字

解决方法

1.翻墙

因为我之前有过相关的类似经历，这种情况我就理解成资源请求失败吧

这个问题有一点我之前的这篇文章的感觉

方法简单粗暴，翻墙，然后就正常请求到资源了

2.换一个响应速度快的cdn

资源请求错误，是因为官网的响应速度有点慢，可以换一个响应快的链接

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

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

<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>

注意

一定要注意代码中引入的顺序

必须先引入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@2.6.14/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>
    <style>
      .block{
        margin: 0 auto;
        width: 800px;
      }
      .block img{
        height: 320px;
        width: 100%;
    }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="block">
        <el-carousel height="320px" interval='1000'>
          <el-carousel-item v-for="item in imgs" :key="item" >
              <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          imgs: [
      '1.jpg',
      '2.jpg',
      '3.jpg',
      '4.jpg'
      ],
        };
      },
    });
  </script>
</html>

效果：