vue中引入swiper关键问题解决

原创 zth558 随笔 vue 185阅读 2018-01-02 11:01:01 举报

当我们在vue项目中使用轮播图插件swiper时,可能不知道如何引入,或者引入中总有一些坑,在这里,我介绍一下我的经验,
步骤一:安装vue,

最新稳定版本

        $ npm install vue
       # 最新稳定 CSP 兼容版本
       $ npm install vue@csp
     如果你已经安装了vue,可以忽略。

步骤二:创建vue项目

全局安装 vue-cli

$ npm install -g vue-cli
 # 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project

$ npm install
$ npm run dev
步骤三:下载swiper相关的js,然后导入到static文件夹下,swiperjs网址如下:https://pan.baidu.com/s/1hrmDpcwhttps://pan.baidu.com/s/1Ixthk
效果如下图:

vue中引入swiper关键问题解决;
步骤四:
安装runtime:
终端命令:npm install babel-runtime

步骤五:
修改.eslintrc.js文件如下:

vue中引入swiper关键问题解决;
步骤六:在App.vue中添加轮播图代码,注意,这只是app.vue中的代码,需要复制粘贴到app.vue中,不能看出演示结果,html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复