nuxt找不到vue-awesome-swiper\dist\ssr.js(已解决)

最新推荐文章于 2024-01-16 14:58:42 发布
最新推荐文章于 2024-01-16 14:58:42 发布
阅读量410 收藏 2
点赞数 1
分类专栏： 遇到的问题以及知识点 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/poppy995/article/details/120973713
版权

安装指定vue-awesome-swiper版本即可解决

npm install vue-awesome-swiper@3.1.3  --save-dev

vue-awesome-swiper使用描述
注意看下载的Swiper 的版本号

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
我今年六岁
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-awesome-swiper:NuxtJs中的vue-awesome-swiper示例
04-05
NuxtJs中的vue-awesome-swiper示例 NuxtJs TSX（用于TypeScript的JSX） Swiper v6.0.0版本 # install dependencies $ yarn or yarn install # serve with hot reload at localhost:3000 $ yarn dev index : ...
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
感谢VasiliyGryaznoy，dragg和Raphael Owino目录安装许可证使用选项方法使用Nuxt.js进行回调的用法贡献资源安装终端：//使用bower bower install vue-fullpage.js //使用npm npm install --save vue-fullpage .js...
无法找到模块“vue-awesome-swiper/dist/ssr”的声明文件
andriodhahaha的博客
08-14 3958
报错信息: 文字：无法找到模块“vue-awesome-swiper/dist/ssr”的声明文件。“e:/work/1010/vue-front-1010/node_modules/vue-awesome-swiper/dist/ssr.js”隐式拥有 "any" 类型。 尝试 `npm install @types/vue-awesome-swiper` (如果存在)，或者添加一个包含 `declare module 'vue-awesome-swiper/dist/ssr';` 的新声明(.d.ts
Nuxt报错：vue-awesome-swiper/dist/ssr，swiper/dist/css/swiper.css未找到
质胜文则野，文胜质则史。文质彬彬，然后君子。
04-07 4447
修改nuxt.config.js如下： plugins: [ { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false } ], css: [ 'swiper/css/swiper.css' ] 修改nuxt-swiper-plugin.js如下： import Vue from 'vue' ...
解决：Cannot resolve vue-awesome-swiper/dist/ssr
m0_63163813的博客
06-18 289
在使用nuxt前端时，下载好swiper和vue-awesome-swiper后报错 ERROR Failed to compile with 1 errors_huishao_tongzhou的博客-CSDN博客
Vue Swiper 找不到swiper.css 报错This dependency was not found:swiper/dist/css/swiper.css
qq_40137978的博客
01-27 1150
Vue使用swiper下出错： This dependency was not found:swiper/dist/css/swiper.css To install it, you can run: npm install --save swiper/dist/css/swiper.css 解决： 官方说明了Swiper安装6.0版本或以上的话需要引入另外一个css import 'swiper/swiper-bundle.css' 替代 import 'swiper/css/swiper.css' 完整
Vue-Awesome-Swiper(Vue使用Swiper)
Super_LD的博客
06-03 5108
Vue-Awesome-SwiperSwiper4 component for Vue, support pc and mobile, SPA and SSR.If you need to roll back to Swiper3, use version v2.6.7.基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。如果需要回退到 Swiper3，请使用 v2.6.7...
vue-universal-cookies Vue.js / Nuxt.js的同构cookie插件支持浏览器，Express，http（节点）。-Vue.js开发
05-27
vue-universal-cookies / nuxt-universal-cookies Vue.js / Nuxt.js的同构cookie插件支持Browser，Express，http（节点）。 在Nuxt中安装。 vue-universal-cookies / nuxt-universal-cookies Vue.js / Nuxt.js的同构...
vue轮播图插件vue-awesome-swiper
08-28
Vue-Awesome-Swiper 是一个功能强大且灵活的 Vue.js 轮播图插件，支持 Vue.js 1.x 到 2.x 版本，兼顾 PC 和移动端，SPA 和 SSR 应用场景。下面将详细介绍 Vue-Awesome-Swiper 的安装、配置、使用方法和事件处理。 ...
vue-editor-js:Vue用户的editor.js
05-09
vue编辑器js vue-editor-js是editorjs包装器组件。 请先查看此内容。 适用于2.0.0之前版本的用户。 该插件是editor.js的包装器组件。 如果您需要将插件用于editor.js，则将其导入并设置config属性。 请参阅 ...
swiper-bundle.min.js
06-21
swiper-bundle.min.js
【NUXT】 Cannot resolve “swiper/dist/css/swiper.css“ （写谷粒学院碰到）
小样yx的博客
08-08 579
报错内容 这个错就是没找到这个文件，原因如下 官方说6.x版本里是没有dist这个文件夹的，所以引入要用swiper/swiper-bundle.css（后面会说在哪里引入），你可以自己找下自己用npm install命令在node_modules文件夹里下载完成的两个依赖swiper和vue-awesome-swiper 会发现自己默认给你下载的是6.8.1，这个6.x版本是没有dist文件夹的，所以当然找不到了，那肯定就会报这个Cannot resolve找不到的错误了，6.x这里用的是swip
Vue项目中使用轮播图插件vue-awesome-swiper
weixin_42582488的博客
09-15 1151
方式一：直接引入轮播图插件 1、安装 npm i swiper@3.4.2 -S 2、直接在组件中加载插件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3、使用 template模板中 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">sli
vue-awesome-swiper（轮播图vue插件）
热门推荐
HeliumLau的博客
05-02 4万+
Vue-Awesome-Swiper轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。例子例子安装设置安装Install vue-awesome-swipernpm install vue-awesome-swiper --savevue挂载// import import Vue from 'vue' import VueAwesomeSwiper fr
vue-awesome-swiper 使用方法
szw_18583757301的博客
07-27 475
vue版的swiper 配置和swiper一样的 index.vue &lt;swiper :options="swiperOption" style="width: 1643px;left: -19px;top: -21px;"&gt; &lt;swiper-slide v-for="(item,index) in workAssistant" :key="index" &
前端重零搭建 NUXT3 出现的问题总结
最新发布
FitnessSnail的博客
01-16 1787
前端重零搭建 NUXT3 出现的问题总结
vue2.0引入swiper
weixin_46962787的博客
09-27 1226
vue2.0引入swiper 1.安装swiper #最新版本 npm install swiper vue-awesome-swiper --save #自选版本 npm install swiper@5.x vue-awesome-swiper --save # or yarn add swiper vue-awesome-swiper # Swiper5 is recommended yarn add swiper@5.x vue-awesome-swiper 2.局部引入 建议封装成组件进行使用
nuxt 使用 vue-awesome-swiper
03-27
要在 Nuxt 中使用 vue-awesome-swiper，你需要执行以下步骤： 1. 安装依赖： ```bash npm install vue-awesome-swiper swiper --save ``` 2. 在 nuxt.config.js 中添加 CSS 和插件： ```javascript // nuxt.config.js module.exports = { css: [ 'swiper/dist/css/swiper.css' ], plugins: [ { src: '~/plugins/vue-awesome-swiper', ssr: false } ] } ``` 3. 创建一个 plugins/vue-awesome-swiper.js 文件并添加以下代码： ```javascript // plugins/vue-awesome-swiper.js import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) ``` 4. 在你的组件中使用 swiper： ```vue <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-pagination"></div> </div> </template> <script> export default { data () { return { swiperOptions: { pagination: { el: '.swiper-pagination', clickable: true } } } }, mounted () { this.$nextTick(() => { this.$refs.mySwiper.swiper.init() }) } } </script> ``` 以上是在 Nuxt 中使用 vue-awesome-swiper 的基本步骤。你可以根据需要配置选项并添加更多的滑块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值