一、安裝vue-awesome-swiper
npm install vue-awesome-swiper --save
二、安裝swiper
npm install swiper --save
三智绸、創(chuàng)建vue-awesome-swiper.js文件
在plugins目錄下新建vue-awesome-swiper.js文件
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
四、編輯nuxt.config.js文件
css: [
'swiper/dist/css/swiper.css'
],
plugins: [
{src: "@/plugins/vue-awesome-swiper", ssr: false}
],
五摧冀、出現(xiàn)Cannot resolve "swiper/dist/css/swiper.css"問(wèn)題解決
1.分析問(wèn)題
首先去看一下node_modules目錄下看看swiper.css目錄下路徑是否正確
5-1
結(jié)果發(fā)現(xiàn)swiper目錄下并沒(méi)有dist文件夾页眯。說(shuō)明可能是swiper版本的問(wèn)題
2.確認(rèn)swiper版本
5-2
發(fā)現(xiàn)安裝了最新版swiper是6.1.2
3.變更swiper版本
去github上查看vue-awesome-swiper發(fā)現(xiàn)其使用的是swiper4：v3.1.3版本
image.png
修改package.json中swiper的版本號(hào)
"dependencies": {
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.15.0",
"nuxt": "^2.14.0",
"swiper": "^3.1.3",
"vue-awesome-swiper": "^4.1.1",
"vuex": "^3.5.1"
},
然后 npm install一下
image.png
至此運(yùn)行成功了
