【Vue】关于Vue项目下载swiper插件时没有dist文件夹的问题

最新推荐文章于 2024-03-20 21:16:30 发布
最新推荐文章于 2024-03-20 21:16:30 发布
阅读量1.6k 收藏 4
点赞数 9
分类专栏： 前端Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Decade0712/article/details/107949760
版权
关于Vue项目下载swiper插件时没有dist文件夹的问题

最近在学习Vue时，下载swiper插件遇到了一个问题：
我在本地node_modules下面的swiper里，并没有找到dist文件夹，导致我不知道从哪导入swiper的css样式文件

在这里插入图片描述
教学视频中，引入的swiper.css是放在swiper/dist/css文件夹下的，这让我很困扰，我以为是我装的插件不对，后来换了淘宝的镜像，发现还是没有解决

后来，我在csdn的问答论坛上找到了答案，原因是下载的swiper版本不对，新版的swiper插件中是没有dist文件夹的，引入swiper.css的地址被替换成了swiper/swiper-bundle.css,

在这里插入图片描述

请参考Swiper官网链接

在这里插入图片描述

附上文中提到的问答链接

如有错误，欢迎指正

Decade0712
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue2.0使用swiper组件实现轮播效果
12-29
import 'swiper/dist/css/swiper.min.css'; 3、html页面代码 <div class=swiper-container id=swiper> <div class=swiper-wrapper> <div class=swiper-slide v-for=(item,$index) in deta
报错：关于Vue项目下载swiper插件时没有dist文件夹的问题
虎康的博客
04-24 1868
最近在学习Vue时，下载swiper插件遇到了一个问题： 我在本地node_modules下面的swiper里，并没有找到dist文件夹，导致我不知道从哪导入swiper的css样式文件 后来，我在csdn的问答论坛上找到了答案，原因是下载的swiper版本不对，新版的swiper插件中是没有dist文件夹的，引入swiper.css的地址被替换成了swiper/swiper-bundle.css, 请参考Swiper官网链接 在这里插入图片描述 附上文中提到的问答链接 原文：https://blog.
将写好的代码打包优化在dist文件夹中（vue）黑马p139笔记
m0_62350238的博客
03-20 182
配置：4.默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath配成相对路径（在vue.config.js中在module.exports = defineConfig({中添加。结果：3.在项目的根目录会自动创建一个文件夹‘dist’，dist中的文件就是打包后的文件，可以直接放到服务器中去。命令：2.yarn build（打开终端 crtl + `）说明：1.vue脚手架工具已经提供了打包命令，可以直接使用。目标：打包的命令和配置。打包优化：路由懒加载。
vue2踩坑之项目：Swiper轮播图使用
意初的博客
10-08 756
首先安装swiper插件，解决方法：npm 版本太高，切换一下就好了，引入Swiper，mounted里面调用
vue项目中导入swiper插件的方法
weixin_52094928的博客
07-05 1606
vue项目中导入swiper插件的方法 1、安装swiper npm i swiper@3.4.2 -S 2、组件编写： swiper官方的使用方法分为4个流程： （1）、加载插件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; （2）、HTML内容 <template> <div class="swiper-container"> <div class="
vue awesome swiper异步加载数据出现的bug问题
01-19
本人第一次使用vue awesome。 踩到的坑确实不少。官网上面的用法写的很简单，按照上面做法基本会遇到如下这个问题 轮播第二次之后，首屏会自动跳过 ...import 'swiper/dist/css/swiper.css' Vue.use
vue使用swiper实现左右滑动切换图片
01-18
本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper...
分享vue里swiper的一些坑
01-21
第一步: 安装 npm i swiper (vue插件自带) 第二步: 在当前页面里引入 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 第三步:当然呐,或许你在想内容呐,别急,为了大家的方便内容的写法我...
vue 中swiper的使用教程
12-29
Install 在vue cli下的使用 npm install vue-awesome-...import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 在component.vue中 <swiper options=swiperOption ref=mySwiper> <swiper-slide cl
野狗优化算法DOA MATLAB源码， 应用案例为函数极值求解以及优化svm进行分类，代码注释详细，可结合自身需求进行应用
05-20
野狗优化算法DOA MATLAB源码， 应用案例为函数极值求解以及优化svm进行分类，代码注释详细，可结合自身需求进行应用
2107381120 王孟丽 实验2 (1).docx
05-20
2107381120 王孟丽 实验2 (1).docx
JavaScript_其他Meta JS项目使用的工具库集合.zip
05-20
JavaScript
asm-4.2.jar
05-20
asm.jar的作用: 提到asm.jar的作用,那么最显著的莫过于计算机显示Android手机屏幕了;其次可以调整计算机上显示Android手机屏幕的大小。ASM 是一个Java字节码操纵框架。它可以直接以二进制形式动态地生成 stub 类或其他代理类,或者在装载时动态地修改类。ASM 提供类似于 BCEL 和 SERP 之类的工具包
node-v14.17.6-headers.tar.xz
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
JavaScript_GitHub上的类固醇.zip
05-20
JavaScript
JavaScript_Brian Holt在Frontend Masters上讲授的完整React入门.zip
05-20
JavaScript
node-v18.19.0-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
汇编语言实现三款数字电压表
05-20
智能控制-AD0832数字电压表1602液晶程序（汇编语言）.zip 智能控制-AD0832数字电压表LED灯实验程序（汇编语言）.zip 智能控制-AD0832数字电压表数码管实验程序（汇编语言）.zip
swiper插件 使用方法vue2
05-16
在 Vue2 中使用 Swiper 插件的步骤如下： 1. 安装 Swiper ``` npm install swiper --save ``` 2. 在 Vue 组件中引入 Swiper ```javascript import Swiper from 'swiper' import 'swiper/dist/css/swiper.css' ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值