zoukankan      html  css  js  c++  java
  • vue中使用swiper vue-awesome-swiper 实现轮播

    github的使用
    当我安装包

    npm install vue-awesome-swiper --save
    

    在main.js中全局配置

    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
    

    运行项目一直报错

    This dependency was not found:
    * swiper/dist/css/swiper.css in ./src/main.js
    * swiper/css/swiper.css in ./src/main.js
    
    

    明显是提示找不到文件,原因是每个版本的文件存放位置不一样,
    解决方法:
    你可以到项目的 node_modules模块中去找到 swiper 查看swiper-bundle.cssswiper.css存放的位置,在main.js引入的时候更改一下路径就可以,有些版本没有swiper.css,而是swiper.min.css
    我自己电脑上的目录是如下:直接是在swiper目录下

    所以我在main.js中引用就直接是这样的

    //swiper组件
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    import 'swiper/swiper.min.css'
    Vue.use(VueAwesomeSwiper)
    

    如果想要低版本,也可以先卸载之前的版本

    npm uninstall swiper
    npm uninstall vue-awesome-swiper --save
    
  • 相关阅读:
    leetcode-237-删除链表中的节点
    leetcode-125-验证回文串
    leetcode-217-存在重复元素
    leetcode-189-旋转数组
    leetcode-121-买卖股票的最佳时机
    leetcde-27-移除元素
    redis相关
    leetcode-26-删除排序数组中的重复项
    leetcode-16-最接近的三数之和
    基础-递归
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14780920.html
Copyright © 2011-2022 走看看