nuxt.js フレームワークは Vue の書き込みをサポートしているため、主に 2 つの方向に分かれます。
1. cdn メソッドを使用した後、nuxt.config.js で設定できます
2. npmで紹介 今回は主にnpmメソッドを紹介
swiper公式サイトによると最新はswiper6(実際のnpmのバージョンは7以上かもしれません)ですが、実行は
npm install --save swiper最後に、実行後に vue3 のプロンプトを表示するものを見つけました.vueで swiper6 を使用するという公式 Web サイトのドキュメントと組み合わせると、次のことが確認できます。
swiper6 は vue3 構文に対応
したがって、nuxt.js が swiper6 を導入する場合、nuxt が vue3 構文をサポートしているかどうかを確認する必要があります。
私のプロジェクトでは、実行時にいくつかの警告が表示されるため、低バージョンを導入することにしました。下位バージョンの公式の推奨事項は vue-awesome-swiper です。
インターネット上にはたくさんの厄介な書き込みがありますが、ここで注意してください: swiper と vue-awesome-swiper のバージョン番号を必ず確認してください! ! !
1. vue-awesome-swiper のデフォルトのインストールは 4.x のようです。これには、私のローカルなど、swiper が 6 より下のバージョン (swiper6 を除く) のみである必要があります。
引用するときはネットと同じ、cssに注意
この css のパスは、vue-awesome-swiper のウェアハウスにも導入されている swiper バージョンに関連しています。
それでもエラーが出たり、書いてもcssスタイルが出ない場合は、node_modulesに行ってswiperのcssがどのレベルにあるかを確認し、実際のレベルに合わせて参照してください。
2. swiper2、swiper3、swiper4 などの下位バージョンを使用する場合は、他のウェアハウスにも書かれている、対応する vue-awesome-swiper バージョンを選択する必要があります。
インターネット上の例は基本的に swiper+vue-awesome-swiper の使い方ですが、この 2 つのバージョンの関係が明確になることはほとんどないため、インストールすると swiper6+、vue-awesome-swiper4+ になりやすく、その後は「 swiper が見つからない場合でも、警戒する必要があります。
参考までに、私の npm コマンドを以下に示します。
npm install [email protected] vue-awesome-swiper --savevue-awesome-swiper の下位バージョンが必要な場合は、バージョンを指定することもできます。
特定の使用法は繰り返されません。スワイパーの公式ウェブサイトで、カルーセルの特殊効果を作成することができます。