vue-awesome-swiper 的css导入问题

最新推荐文章于 2023-01-03 09:56:24 发布
最新推荐文章于 2023-01-03 09:56:24 发布
阅读量214 收藏
点赞数
分类专栏： 一gu堆js的操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41926354/article/details/116064369
版权

vue-awesome-swiper 的css导入问题

官方说明
在这里插入图片描述
官方推荐使用
import ‘swiper/css/swiper.css’
但实际上版本已经过时 , 版本旧了点
处理方法呢 可以选择降低版本 比如降低到5
在这里插入图片描述
正常就已经6 版本了
在这里插入图片描述
另一种方法呢

就是将import ‘swiper/css/swiper.css’ 替换为import ‘swiper/swiper-bundle.css’

查阅官方git的issues有对应说明

李木木呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swiper.min.css
11-09
swiper.min.css 滑动插件
vue-awesome-swiper:@vuejs的刷卡器组件-开源
05-26
Swiper的每个显示块（屏幕）都是一张幻灯片，... Swiper5添加了CSS模式（cssMode），并且可以通过CSS文件修改Swiper的颜色样式。 Swiper4集成了组件的相关选项，并修改了通过回调函数对此关键字获取swiper实例的方法。
解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题
syzdev的博客
02-19 8524
0 文章太长懒得看 将语句：import 'swiper/css/swiper.css' 修改为：import 'swiper/swiper-bundle.css' 1 出错原因 报错提示为 * swiper/css/swiper.css in ./src/main.js … ： 可以发现是css的引用出了问题。 vue-awesome-swiper 中的Global Registration写道： // import style import 'swiper/css/swiper.css' 这是Swi
vue-awesome-swiper 引入css样式文件报错等问题
bjyxszd_2026的博客
03-22 2382
引入css样式文件 这个错是我最开始就有的错误，因为在安装vue-awesome-swiper 就会默认安装swiper。我指定了vue-awesome-swiper的版本，但是没指定swiper的版本，默认安装版本为8.0.7。 所以在引入css文件的时候报错，在node_modules中的swiper路径下找确实没有这个文件 import 'swiper/css/swiper.css' 在把swiper版本降到2以后，css引入不报错 ，但是整个swiper组件根本就不显示 找了一两个小时最后把vu
vue-awesome-swiper引入import ‘swiper/css/swiper.css报错和轮播效果失效
weixin_42052539的博客
11-10 2136
1.全局引用import'swiper/css/swiper.css';报错 执行npm install --save swiper/css/swiper.css后提示无法安装 问题出在 main.js 中import 'swiper/css/swiper.css'这句话上，应该替换为import 'swiper/swiper-bundle.css' 2.轮播效果失效 应该把swiper版本降到5 执行npm install swiper@5 --save ...
swiper引入js和css：Module not found: Error: Package path ./swiper-bundle is not exported from package ..
YY的博客
01-03 3701
引入swiper的js和css文件
vue-awsome-swiper安装和css引入问题
Tomoe20的博客
09-27 847
1、安装 npm install swiper vue-awesome-swiper --save # or yarn add swiper vue-awesome-swiper 2、css引入问题（进入package.json中先查看swiper的版本号） import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // import style (>= Swiper 6.x) import 'swipe
vue awesome swiper异步加载数据出现的bug问题
01-19
本人第一次使用vue awesome。 踩到的坑确实不少。...npm install vue-awesome-swiper --save-dev 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use
vue使用swiper实现左右滑动切换图片
01-18
使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' ...
vue-dor:Vue-Cli
05-11
1 轮播图用的插件 "vue-awesome-swiper": "^3.1.3",具体api 跟swiper的api一样 2 在banner 数据和推荐数据没用请求到的时候用了loading组件,纯css3编写 3 步骤2中的数据请求都是异步,为了判断两者是否都拿到数据
swiper包含相关css，js
11-28
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
Can‘t resolve ‘swiper/css/swiper.css 使用swiper报错
wyk760629476的专栏
05-27 1986
问题详情： 问题描述： 安装swiper之后，在main.js 配置引用。因为安装的swiper依赖中没有对应的swiper.css 解决方法： import 'swiper/css/swiper.css' 应该替换为 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/swiper.scss' Vue.use(VueAwesomeSwiper) ...
解决：Cannot resolve “swiper/dist/css/swiper.css“
weixin_48033662的博客
02-02 5662
解决：Cannot resolve "swiper/dist/css/swiper.css"一·问题描述：（1）做《谷粒学苑》整合前端页面时，执行“npm run dev”命令时报这个异常（2）初始配置如下图：（3）在“node_modules/swiper/”目录下，根本就没有css/swiper.css这个文件。二·问题原因：（1）直接原因：安装swiper时执行的npm命令是：“npm install swiper”这个命令是默认安装最新版的。结果官方在更新的时候，对原本的文件架构做了一些调整。这就导
毕业设计MATLAB_执行一维相同大小矩阵的QR分解.zip
05-27
毕业设计matlab
ipython-7.9.0.tar.gz
最新发布
05-27
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
debugpy-1.0.0b3-cp37-cp37m-manylinux2010_x86_64.whl
05-27
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
libaacs-devel-0.10.0-1.mga8.i586.rpm
05-27
rpm -i xx.rpm 只要报错遇到aacs的可以看看架构是否一致
几个ACM算法pdf.zip
05-27
[ACM国际大学生程序设计竞赛题解].pdf ACM模板-清华大学.pdf ACM算法模板(吉林大学).pdf
vue-awesome-swiper和swiper的区别
09-07
### 回答1： Vue-awesome-swiper是基于Swiper封装的Vue组件，它可以让你更方便地在Vue中使用Swiper。Swiper是一个非常流行的移动端滑动组件，它的功能非常强大，支持很多特效和交互方式。Swiper可以用于制作轮播图、图片画廊、滑动菜单等等。 Vue-awesome-swiper和Swiper的区别在于，Vue-awesome-swiper是一个Vue组件，它将Swiper封装成了一个可以在Vue中直接使用的组件，使用起来更加方便。而Swiper是一个独立的JavaScript库，需要手动引入和初始化。此外，Vue-awesome-swiper还提供了一些额外的功能，比如自定义指示器、自动轮播等等，可以进一步提高开发效率。 ### 回答2： vue-awesome-swiper 是基于vue框架的一个滑动插件，而swiper 是一个独立的轮播插件。它们的区别主要体现在以下几个方面： 1. 集成方式：vue-awesome-swiper 是专为 Vue 设计的插件，可以通过 npm 或者 yarn 安装，并在项目中直接导入使用，而 swiper 是一个独立的插件，需要在项目中引入 swiper 的 CSS 和 JS 文件。 2. 组件化：vue-awesome-swiper 将轮播功能封装为一个 Vue 的组件，通过自定义标签的方式调用和使用，而 swiper 提供了更为灵活的配置项，可以通过初始化一个 swiper 实例来实现轮播效果。 3. 自定义性：vue-awesome-swiper 可以通过 props 传递配置项，从而实现自定义轮播样式和动画效果，而 swiper 提供了更多的配置选项，可以自定义分页器、切换效果、方向等多个方面的功能。 4. 兼容性：vue-awesome-swiper 是为 Vue 设计的插件，因此与 Vue 框架保持高度兼容，而 swiper 则需要对其他框架进行适配，包括 Vue。一些 Vue 生命周期方法可能无法直接在 swiper 中使用。 综上所述，vue-awesome-swiper 是一个适用于 Vue 项目的滑动插件，它提供了更高的兼容性和灵活性，可以更好地与 Vue 框架集成，并更加方便地使用和自定义轮播功能。而 swiper 则是一个独立的轮播插件，适用于各种前端项目，并提供了更多的自定义选项和配置。 ### 回答3： Vue-awesome-swiper是一个基于Vue.js的轮播插件，而Swiper是一个独立的轮播插件，可以用于任意的Web项目。它们的区别在以下几个方面： 1. 组件化：Vue-awesome-swiper是一个Vue组件，可以直接在Vue项目中使用。而Swiper是一个独立的JavaScript插件，需要手动实例化和配置参数。 2. 集成度：Vue-awesome-swiper已经集成在Vue框架中，具有更高的内聚性和一致性。而Swiper是一个独立的插件，可以用于不同的框架或原生的Web开发中。 3. 使用方式：Vue-awesome-swiper使用Vue的方式来编写和管理轮播组件，可以通过props和事件来实现双向绑定和交互。而Swiper使用原生的JavaScript来编写和控制轮播，需要手动绑定事件和更新状态。 4. 功能扩展性：Vue-awesome-swiper可以结合Vue的特性，通过自定义组件、过滤器和指令等方式来扩展更多功能。而Swiper的功能扩展更多依赖于自定义的HTML和CSS样式。 5. 生态圈：Vue-awesome-swiper作为Vue的一部分，会受到更多的开发者关注和支持，有更多的第三方插件和例子可用。而Swiper作为一个独立的插件，自身也有着庞大的用户群体和丰富的文档。 总的来说，Vue-awesome-swiper是一个特定于Vue的、更方便集成和扩展的轮播插件，而Swiper是一个通用的轮播插件，适用于不同的框架和项目。选择哪个插件取决于具体的项目需求和开发环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值