前言：
之前都是使用脚手架开发的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/[email protected]/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>
效果：
总结：
这其实就是一个小问题，在平时可能大家会出现类似资源请求不到的现象，往往翻墙就能解决大部分类似的问题了，文章还有一个方法是换一些链接。
文章如有错误，恳请大家提出问题，本人不胜感激。对大家有帮助的话大家也可以点个赞哦
本文转载自: https://blog.csdn.net/qq_52855464/article/details/125136359
版权归原作者 潮汐未见潮落 所有， 如有侵权，请联系我们删除。
版权归原作者 潮汐未见潮落 所有， 如有侵权，请联系我们删除。