一、安装vue-awesome-swiper
npm install vue-awesome-swiper --save
二、安装swiper
npm install swiper --save
三、创建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}
],
五、出现Cannot resolve "swiper/dist/css/swiper.css"问题解决
1.分析问题
首先去看一下node_modules目录下看看swiper.css目录下路径是否正确
5-1
结果发现swiper目录下并没有dist文件夹。说明可能是swiper版本的问题
2.确认swiper版本
5-2
发现安装了最新版swiper是6.1.2
3.变更swiper版本
去github上查看vue-awesome-swiper发现其使用的是swiper4：v3.1.3版本
image.png
修改package.json中swiper的版本号
"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
至此运行成功了
