vue-awesome-swiper 引入css样式文件报错等问题

news2024/11/23 13:31:01

引入css样式文件这个错是我最开始就有的错误,因为在安装vue-awesome-swiper 就会默认安装swiper。我指定了vue-awesome-swiper的版本,但是没指定swiper的版本,默认安装版本为8.0.7。
在这里插入图片描述
所以在引入css文件的时候报错,在node_modules中的swiper路径下找确实没有这个文件

import 'swiper/css/swiper.css'

在把swiper版本降到5以后,css引入不报错 ,但是整个swiper组件根本就不显示
找了一两个小时最后把vue-awesome-swiper版本安装为2.6.7就成功了

npm install  swiper@5 vue-awesome-swiper@2.6.7  --save

如果重装不行,试试先把node_modules中的先swiper文件删掉再重装
安装好以后

<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <!-- slides 列表项 -->
      <swiper-slide><img src="@/assets/img/swiper-img.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="@/assets/img/swiper-img.jpg" alt=""></swiper-slide>
      <!-- Optional controls 控制器 -->
       <div class="swiper-pagination"  slot="pagination"></div>
       <div class="swiper-button-prev" slot="button-prev"></div><!--上一项-->
       <div class="swiper-button-next" slot="button-next"></div><!--下一项 -->
       <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
  </div>
</template>
 
<script>
import 'swiper/css/swiper.css'
import {swiper, swiperSlide} from "vue-awesome-swiper"
export default {
  name: 'MySwiper',
  components:{
      swiper,
      swiperSlide
  },
  data () {
    return {
      swiperOption: {
        loop: true,// 是否循环轮播
        autoplay: 3000
      }
    }
  }
}
</script>
<style scoped>
.swiper{
    height: 500px;
    width: 900px;
}
img{
    height: 500px;
    width: 900px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1232227.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

车载毫米波雷达行业发展4——技术

4.1 车载毫米波雷达技术原理 毫米波雷达系统可实现距离测量、速度测量和角度测量三大基本功能。车载毫米波雷达 常用调频连续波(FMCW)雷达&#xff0c;其工作频率随时间做周期性线性变化&#xff0c;能测速和测距&#xff0c;适合做 近距离测量&#xff0c;有较高的测量精度。…

Docker发布简单springboot项目

Docker发布简单springboot项目 在IDEA工具中直接编写Dockerfile文件 FROM java:8COPY *.jar /app.jarCMD ["--server.prot 8080"]EXPOSE 8080ENTRYPOINT ["java", "-jar", "/app.jar"]将项目打包成对应的jar包&#xff0c;将Dockerf…

基于龙格-库塔算法优化概率神经网络PNN的分类预测 - 附代码

基于龙格-库塔算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于龙格-库塔算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于龙格-库塔优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对P…

cpu飙高问题,案例分析(一)

一、复习知识点&#xff1a; CPU性能指标&#xff1a; load average&#xff1a;负载&#xff0c;linux查看的时候&#xff0c;通常显示如下&#xff1a; load average后面有三段数字&#xff1a;代表了系统1分钟&#xff0c;5分钟&#xff0c;15分钟平均负载。 形象的类别可…

CommonModule.dll动态链接库(DLL)文件丢失的处理方法

方法一、手动下载修复 (1)从网站下载commonmodule.dll文件到您的电脑上。 (2)将commonmodule.dll文件复制到" X:\Windows\system32 " (X代表您系统所在目录盘符&#xff0c;如&#xff1a;C:\Windows\system32)目录下。 (3)在开始菜单中找到"运行(R)" 或…

shell 脚本变量

目录 什么是 shell shell 的两种面向对象 shell 脚本概述 脚本 &#xff08;本质为程序&#xff09; 脚本的组成 执行脚本 例题 脚本构成 脚本执行逻辑及执行方式 脚本的常见错误 编写 shell 脚本 执行脚本文件的方式 重定向 重定向操作 shell 变量的作用及类型…

智能井盖传感器功能有哪些?

智能井盖传感器是一种集成了多种先进技术的传感器设备&#xff0c;旨在强化城市的公共安全&#xff0c;确保城市基础设施的稳定运作。这种传感器具有多种功能&#xff0c;例如实时监测井盖状态、监测井下气体等是否超出阈值。借助智能井盖传感器&#xff0c;政府和城市管理部门…

C++:拷贝构造函数,深拷贝,浅拷贝

一.什么是拷贝构造函数&#xff1f; 同一个类的对象在内存中有完全相同的结构&#xff0c;如果作为一个整体进行复制&#xff08;拷贝&#xff09;是完全可行的。这个拷贝过程只需要拷贝数据成员&#xff0c;而函数成员是共用的&#xff08;只有一份拷贝&#xff09;。在建立对…

1230天,百度再见!!!

从2020年7月8日至2023年11月20日&#xff0c;在百度的工作到达了终点&#xff0c;完成了从学生向职场人的蜕变&#xff0c;是时候说再见了&#xff01; 一、成长收获 在这1230天里收获颇丰&#xff0c;下面与各位分享一下。 从技术至上到业务赋能的思想转变 相信很多人都存在“…

一个完备的手游地形实现方案

一、地形几何方案&#xff1a;Terrain 与 Mesh 1.1 目前手游主流地形几何方案分析 先不考虑 LOD 等优化手段&#xff0c;目前地形的几何方案选择有如下几种&#xff1a; 使用 Unity 自带的 Terrain使用 Unity 自带的 Terrain&#xff0c;但是等美术资产完成后使用工具转为 M…

键盘快捷键工具Keyboard Maestro mac中文版介绍

Keyboard Maestro mac是一款键盘快捷键工具&#xff0c;它可以帮助用户通过自定义快捷键来快速完成各种操作&#xff0c;提高工作效率。Keyboard Maestro支持多种快捷键组合&#xff0c;包括单键、双键、三键、四键组合等&#xff0c;用户可以根据自己的习惯进行设置。此外&…

全志H616开发版

开发板介绍&#xff1a; 二、开发板刷机 SDFormatter TF卡的格式化工具、Win32Diskimager 刷机工具 刷机镜像为&#xff1a;Orangepizero2_2.2.0_ubuntu_bionic_desktop_linux4.9.170.img 使用MobaXterm_Personal_20.3连接使用 网络配置&#xff1a;nmcli dev wifi 命令接入网…

PLC梯形图实操——风扇正反转

文章目录 1.项目内创建函数块&#xff08;FB&#xff09;2.项目内创建数据块&#xff08;DB&#xff09;2.1去除优化块访问2.2去除优化块的访问后对数据块进行编译 3.在函数块&#xff08;FB&#xff09;内实现正转反转的自锁与互锁3.1在函数块内实现电机正反转的梯形图 4.主函…

Python的os.path.join()详解

当你需要构建文件路径时&#xff0c;os.path.join() 是一个很有用的方法。这个方法会根据你的操作系统使用正确的路径分隔符&#xff08;例如&#xff0c;在 Windows 上是反斜杠 \&#xff0c;在类 Unix 系统上是正斜杠 /&#xff09;来连接路径中的各个部分。这样你就可以确保…

Django实战:从零到一构建安全高效的Web应用

目录 一、概述 二、版本控制和部署 1、Git版本控制 2、Docker部署 三、数据库配置 1、配置数据库设置 2、创建数据库模型 四、URL路由和视图 1、定义URL路由 2、创建视图 五、模板渲染 1、创建模板 2、在视图中使用模板 总结 一、概述 Django是一个高级Python W…

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

HarmonyOS4.0应用开发 安装编辑器 这里安装windows版本为例 安装依赖 打开DevEco Studio 这八项全部打钩即可开始编写代码&#xff0c;如果存在x&#xff0c;需要安装正确的库即可 开发 点击Create Project 选择默认模板——next Model部分分为Stage和FA两个应用模型&…

[架构之路-247]:目标系统 - 设计方法 - 软件工程 - 结构化方法的基本思想、本质、特点以及在软件开发、在生活中的应用

目录 前言&#xff1a; 一、什么是非结构化方法 1.1 什么是非结构化方法 1.2 非结构化方法的适用场合 二、什么是结构化方法 1.1 结构化方法诞生的背景&#xff1a;软件规模发展&#xff1a;大规模、复杂系统的需要 1.2 概述 1.3 主要特点与核心思想 三、结构化方法在…

Windows 安装 Docker Compose

目录 前言什么是 Docker Compose &#xff1f;安装 Docker Compose配置环境变量结语开源项目 前言 在当今软件开发和部署领域&#xff0c;容器化技术的应用已成为提高效率和系统可移植性的关键手段。Docker&#xff0c;作为领先的容器化平台&#xff0c;为开发人员提供了轻松构…

【手撕数据结构】(三)顺序表和链表

文章目录 一、线性表二、顺序表1.概念及结构2.关于数组3.顺序表分类&#x1f397;️静态顺序表&#x1f397;️动态顺序表 4.接口实现&#xff08;1&#xff09;思路&#xff08;2&#xff09;SeqList.h文件代码功能1&#xff1a;顺序表初始化功能2&#xff1a;销毁顺序表功能3…

硬盘Write Cache设置效果差异之谜!

Write Cache这个概念对于大家应该不陌生&#xff0c;主要是机械HDD中会有很明显的效果。 Write Cache Enable&#xff0c;WCE&#xff1a;数据不会直接落盘&#xff0c;而是写入DRAM缓存后就直接返回了&#xff0c;对于随机写和顺序写的性能都会有所改善。这个场景&#xff0c;…