zoukankan      html  css  js  c++  java
  • vue-awesome-swiper踩坑总结

    一、背景

    在项目中使用最新版本的vue-awesome-swiper插件时,发现分页器的显示有bug
    因此决定重新安装旧版本

    注意:Swiper6 对应的是 vue-awesome-swiper的最新版本
    接下来介绍的是基于Swiper2 的 vue-awesome-swiper的v2.6.7版本

    二、全局安装

    安装 swiper

    npm install swiper -S
    

    安装指定版本的 vue-awesome-swiper

    npm install vue-awesome-swiper@2.6.7 --save
    

    在main.js中 引入vue-awesome-swiper

    import VueAwesomeSwiper from 'vue-awesome-swiper'
    

    在main.js中 引入对应的CSS文件

    import 'swiper/swiper-bundle.css'
    

    注意:如果引入CSS的路径出错,就会导致“找不到swiper模块”的编译错误
    建议大家直接打开项目根目录下的node_modules文件夹
    找到vue-awesome-swiper中的CSS文件
    再将此路径放入上面这条import语句中

    在main.js中 全局注册vue-awesome-swiper

    Vue.use(VueAwesomeSwiper)
    

    三、使用swiper时的报错

    按照文档编写轮播图相关的代码后
    image.png
    使用npm run dev运行项目后报错如下:

    Maximum call stack size exceeded
    

    造成堆栈溢出的原因可能是使用了递归并写错了递归结束的条件
    但在排除这些错误后,页面依然报错
    这时我才发现这个轮播图组件的命名是 'Swiper.vue',与swiper这个依赖重名了
    因此,在页面根组件渲染时,会发生堆栈溢出的错误
    将轮播图所在组件改名后,页面就能正常运行了

  • 相关阅读:
    Windows 7 下安装 docker 应用容器引擎
    jmeter压力测试
    1分钟为Win10瘦身!把吃掉的硬盘找回来
    关于IIS应用程序池的默认参数设置解决
    IIS将应用程序池配置为在计划时间执行回收 (IIS 7)
    什么是IIS应用程序池
    WinCE知识介绍
    odoo12 通过一个字段控制另一个Many2one字段的domain
    odoo12 数据库过期问题
    odoo12
  • 原文地址:https://www.cnblogs.com/baebae996/p/13700947.html
Copyright © 2011-2022 走看看