最近有一个企业官网项目用到了nuxt.js
需求:
首页有一个左右滑动的展示效果,果断使用swiper,直接上网搜索关键字“nuxt使用swiper”。
结果:
1. 安装
npm i swiper vue-awesome-swiper -S
我的版本:
"swiper": "^6.4.1",
"vue-awesome-swiper": "^4.1.1"
2. 引入
在plugins文件夹下新建vue-swiper.js,在nuxt.config.js中引入
plugins: [
{ src: "~/plugins/vue-swiper.js", ssr: false }
],
看到网上两种vue-swiper.js写法
- 第一种
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import css from 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, {css})
- 第二种
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper)
}
这种需要在nuxt.config.js中引入css
css: [
"swiper/dist/css/swiper.css"
],
3. 经验
第一个坑:
npm run dev启动就报错
This dependency was not found:
swiper/dist/css/swiper.css in ./src/main.js
To install it, you can run: npm install --save swiper/dist/css/swiper.css
解决办法:
使用import ‘swiper/swiper-bundle.css’, 替换import ‘swiper/css/swiper.css’
在此感谢简书大佬原文地址的文章
第二个坑:(当初使用了第一种vue-swiper.js引入的写法)
- 刷新页面的一瞬间,横向布局的slide变成了竖向排列,相当于块状元素自然换行的效果,也没有了滑动效果,当时给父元素设置display: flex;解决了
- 刷新页面的一瞬间,swiper中所有的slide项全部显示了,每一个slide的宽度都变为以内容撑开的最小宽度
最终用第二种vue-swiper.js写法,两个坑一并解决