在nuxt中使用vue-awesome-swiper

# 一、安装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)

1
2
3

# 四、编辑nuxt.config.js文件

  css: [
    'swiper/dist/css/swiper.css'
  ],

1
2
3

  plugins: [
    {src: "@/plugins/vue-awesome-swiper", ssr: false}
  ],

1
2
3

# 五、出现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 (opens new window)发现其使用的是swiper4：v3.1.3版本

修改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"
  },

1
2
3
4
5
6
7
8

然后 npm install一下

至此运行成功了

#vue-awesome-swiper #nuxt #vue #SSR

上次更新: 10/21/2021, 1:52:09 PM

← Vue项目中增加mockjs模拟接口请求在nuxt中使用vue-video-player→