如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

Posted 2023-02-22

【中文标题】如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

【英文标题】：How to use official Swiper.js as plugin in Nuxt.js

【发布时间】：2021-01-21 06:39:49

【问题描述】：

我有插件swiper.js 代码：

import Vue from "vue";
// import Swiper core and required components
import SwiperCore,  Navigation, Pagination, Scrollbar, A11y  from "swiper";

// Import Swiper Vue.js components
import  Swiper, SwiperSlide  from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
Vue.use(Swiper, SwiperCore, SwiperSlide);

但这在我的情况下不起作用。在这里你可以在CodeSandbox看到我的完整演示代码

我尝试从 official documentation 为 Vue.js 安装 Swiper

依赖关系

"dependencies": 
  "core-js": "^3.6.5",
  "nuxt": "^2.14.6",
  "swiper": "^6.3.2"
,
"devDependencies": 
  "@nuxtjs/style-resources": "^1.0.0",
  "node-sass": "^4.14.1",
  "sass-loader": "^10.0.2"

控制台错误：

未知的自定义元素： - 您是否注册了组件 正确吗？对于递归组件，请确保提供“名称” 选项。

---

客户端渲染的虚拟 DOM 树不匹配 服务器渲染的内容。这可能是由不正确的 html 引起的 标记，例如在<p> 中嵌套块级元素，或者 失踪 。 Bailing 水合作用并执行完整的客户端 渲染。

【问题讨论】：

您是否尝试过导入将 ~ 替换为 @ 的插件？喜欢this example in documentation

@padaleiana 是的，我试过了

拜托！通过附加您提到的错误来更新您的问题。

@padaleiana 问题已更新！

nuxt.config.js 中的 css 属性为空。尝试从插件中删除您的 scss 导入并将它们中的每一个放入我说的属性中，例如 the example from documentation

【参考方案1】：

实际的 Swiper 版本（6.3 及更高版本）仅支持 Vue 3，如 https://swiperjs.com/vue/ 中所述。但是 Nuxt 在底层仍然使用 Vue 2，所以你不能使用从 swiper/vue 包导入的 Swiper Vue 组件（Swiper、SwiperSlide 等）。 Nuxt 3（基于 Vue 3）计划于 2021 年第一季度发布。

您可以通过“入门”指南手动设置没有组件的 Swiper：https://swiperjs.com/get-started/。没那么难，你只需要复制Swiper布局到你的模板，用mounted()方法初始化Swiper即可。