ionic-framework - 无法在 ionic/vue 中使用 Swiper
问题描述
我正在尝试将 swiper@7 集成到我的 ionic 项目中。但似乎包和 css 没有正确导入并抛出“未找到依赖项”错误。
我的意思是，当我试图这样做时
<script>
import CollectionLayout from "@/components/CollectionLayout.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
export default {
name: "Collection",
components: {
CollectionLayout
}
};
</script>
然后我得到编译错误“未找到依赖项”。我做了一些研究，发现由于某种原因，它没有指向正确的模块路径。
正如您在这张图片中看到的那样，它将包指向“ swiper/swiper-vue ”而不是那个，它应该指向“ swiper/vue/swiper-vue ”；
我还检查了“swiper”的 package.json 文件。那里的一切似乎都很好，但不知道为什么我的“ .vue ”文件中没有导入包。
这是swiper的 package.json
{
"_from": "swiper",
"_id": "swiper@7.0.2",
"_inBundle": false,
"_integrity": "sha512-cPqpW3s5tPxeH5CXPh+ZiS4hILhF3nZ9ukb34Sdfm94oFso5cIT2i6Y3yAe1g1/7bGKneNSqKkLNokj1WnO4Xg==",
"_location": "/swiper",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "swiper",
"name": "swiper",
"escapedName": "swiper",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/swiper/-/swiper-7.0.2.tgz",
"_shasum": "2678f1dc8503cf5875865c5026940a08eb8e298a",
"_spec": "swiper",
"_where": "H:\\apps\\collection-app",
"author": {
"name": "Vladimir Kharlampidi"
},
"bugs": {
"url": "https://github.com/nolimits4web/swiper/issues"
},
"bundleDependencies": false,
"dependencies": {
"dom7": "^4.0.0",
"ssr-window": "^4.0.0"
},
"deprecated": false,
"description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
"engines": {
"node": ">= 4.7.0"
},
"exports": {
".": "./swiper.esm.js",
"./core": "./swiper.esm.js",
"./bundle": "./swiper-bundle.esm.js",
"./css": "./swiper.min.css",
"./css/bundle": "./swiper-bundle.min.css",
"./css/a11y": "./modules/a11y/a11y.min.css",
"./css/autoplay": "./modules/autoplay/autoplay.min.css",
"./css/controller": "./modules/controller/controller.min.css",
"./css/effect-coverflow": "./modules/effect-coverflow/effect-coverflow.min.css",
"./css/effect-cube": "./modules/effect-cube/effect-cube.min.css",
"./css/effect-fade": "./modules/effect-fade/effect-fade.min.css",
"./css/effect-flip": "./modules/effect-flip/effect-flip.min.css",
"./css/effect-creative": "./modules/effect-creative/effect-creative.min.css",
"./css/effect-cards": "./modules/effect-cards/effect-cards.min.css",
"./css/free-mode": "./modules/free-mode/free-mode.min.css",
"./css/grid": "./modules/grid/grid.min.css",
"./css/hash-navigation": "./modules/hash-navigation/hash-navigation.min.css",
"./css/history": "./modules/history/history.min.css",
"./css/keyboard": "./modules/keyboard/keyboard.min.css",
"./css/lazy": "./modules/lazy/lazy.min.css",
"./css/manipulation": "./modules/manipulation/manipulation.min.css",
"./css/mousewheel": "./modules/mousewheel/mousewheel.min.css",
"./css/navigation": "./modules/navigation/navigation.min.css",
"./css/pagination": "./modules/pagination/pagination.min.css",
"./css/parallax": "./modules/parallax/parallax.min.css",
"./css/scrollbar": "./modules/scrollbar/scrollbar.min.css",
"./css/thumbs": "./modules/thumbs/thumbs.min.css",
"./css/virtual": "./modules/virtual/virtual.min.css",
"./css/zoom": "./modules/zoom/zoom.min.css",
"./less": "./swiper.less",
"./less/a11y": "./modules/a11y/a11y.less",
"./less/autoplay": "./modules/autoplay/autoplay.less",
"./less/controller": "./modules/controller/controller.less",
"./less/effect-coverflow": "./modules/effect-coverflow/effect-coverflow.less",
"./less/effect-cube": "./modules/effect-cube/effect-cube.less",
"./less/effect-fade": "./modules/effect-fade/effect-fade.less",
"./less/effect-flip": "./modules/effect-flip/effect-flip.less",
"./less/effect-creative": "./modules/effect-creative/effect-creative.less",
"./less/effect-cards": "./modules/effect-cards/effect-cards.less",
"./less/free-mode": "./modules/free-mode/free-mode.less",
"./less/grid": "./modules/grid/grid.less",
"./less/hash-navigation": "./modules/hash-navigation/hash-navigation.less",
"./less/history": "./modules/history/history.less",
"./less/keyboard": "./modules/keyboard/keyboard.less",
"./less/lazy": "./modules/lazy/lazy.less",
"./less/manipulation": "./modules/manipulation/manipulation.less",
"./less/mousewheel": "./modules/mousewheel/mousewheel.less",
"./less/navigation": "./modules/navigation/navigation.less",
"./less/pagination": "./modules/pagination/pagination.less",
"./less/parallax": "./modules/parallax/parallax.less",
"./less/scrollbar": "./modules/scrollbar/scrollbar.less",
"./less/thumbs": "./modules/thumbs/thumbs.less",
"./less/virtual": "./modules/virtual/virtual.less",
"./less/zoom": "./modules/zoom/zoom.less",
"./scss": "./swiper.scss",
"./scss/a11y": "./modules/a11y/a11y.scss",
"./scss/autoplay": "./modules/autoplay/autoplay.scss",
"./scss/controller": "./modules/controller/controller.scss",
"./scss/effect-coverflow": "./modules/effect-coverflow/effect-coverflow.scss",
"./scss/effect-cube": "./modules/effect-cube/effect-cube.scss",
"./scss/effect-fade": "./modules/effect-fade/effect-fade.scss",
"./scss/effect-flip": "./modules/effect-flip/effect-flip.scss",
"./scss/effect-creative": "./modules/effect-creative/effect-creative.scss",
"./scss/effect-cards": "./modules/effect-cards/effect-cards.scss",
"./scss/free-mode": "./modules/free-mode/free-mode.scss",
"./scss/grid": "./modules/grid/grid.scss",
"./scss/hash-navigation": "./modules/hash-navigation/hash-navigation.scss",
"./scss/history": "./modules/history/history.scss",
"./scss/keyboard": "./modules/keyboard/keyboard.scss",
"./scss/lazy": "./modules/lazy/lazy.scss",
"./scss/manipulation": "./modules/manipulation/manipulation.scss",
"./scss/mousewheel": "./modules/mousewheel/mousewheel.scss",
"./scss/navigation": "./modules/navigation/navigation.scss",
"./scss/pagination": "./modules/pagination/pagination.scss",
"./scss/parallax": "./modules/parallax/parallax.scss",
"./scss/scrollbar": "./modules/scrollbar/scrollbar.scss",
"./scss/thumbs": "./modules/thumbs/thumbs.scss",
"./scss/virtual": "./modules/virtual/virtual.scss",
"./scss/zoom": "./modules/zoom/zoom.scss",
"./angular": "./angular/fesm2015/swiper_angular.js",
"./react": "./react/swiper-react.js",
"./vue": "./vue/swiper-vue.js",
"./svelte": "./svelte/swiper-svelte.js",
"./types": "./types/index.d.ts",
"./package.json": "./package.json"
},
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"homepage": "https://swiperjs.com",
"keywords": [
"swiper",
"swipe",
"slider",
"touch",
"ios",
"mobile",
"cordova",
"phonegap",
"app",
"framework",
"framework7",
"carousel",
"gallery",
"plugin",
"react",
"vue",
"angular",
"svelte",
"slideshow"
],
"license": "MIT",
"name": "swiper",
"repository": {
"type": "git",
"url": "git+https://github.com/nolimits4web/Swiper.git"
},
"scripts": {
"postinstall": "node -e \"try{require('./postinstall')}catch(e){}\""
},
"type": "module",
"typesVersions": {
"*": {
"angular": [
"angular/swiper_angular.d.ts"
],
"react": [
"react/swiper-react.d.ts"
],
"svelte": [
"svelte/swiper-svelte.d.ts"
],
"vue": [
"vue/swiper-vue.d.ts"
]
}
},
"typings": "swiper.d.ts",
"version": "7.0.2"
}
错误： 在此处输入图像描述
解决方案
推荐阅读
- android-studio - 为什么我不能用 REST API Java 替换 Android Google Drive Api？
- azure - Azure 逻辑应用需要数小时/数天才能运行 Azure Functions
- c# - Xamarin.Forms 问题中的流利设计
- tabulator - 制表符以编程方式更新列位置？
- ionic3 - 我想将 WordPress 网站上的广告集成到我的 ionic 应用程序中，我该怎么做？
- spring-cloud-netflix - 中止通过 Feign 客户端发送的 http 请求
- ionic-framework - 无法将 FileOpener 导入我的 app.module.ts
- excel - 当我有两个条件时宏不起作用
- css - 编译时少循环丢失“）”
- reactjs - this.props.login 不是函数 react-apollo + compose + graphql