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

【问题标题】：How to use official Swiper.js as plugin in Nuxt.js如何在 Nuxt.js 中使用官方 Swiper.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

标签： javascript vue.js nuxt.js swiper.js

【解决方案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即可。

【讨论】：