本帖最后由 月亮是我掰弯的 于 2016-10-14 10:24 编辑
当我们在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/1hrmDpcw 和 https://pan.baidu.com/s/1Ixthk
效果如下图：
步骤四：
安装runtime：
终端命令：npm install babel-runtime
步骤五：
修改.eslintrc.js文件如下：
步骤六：在App.vue中添加轮播图代码，注意，这只是app.vue中的代码，需要复制粘贴到app.vue中，不能看出演示结果。
[HTML] 纯文本查看 复制代码 <template>
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="imgload" src="http://mooc.inxedu.com/images/upload/image/20151026/1446026886181.jpg" alt="首页banner图片01">
</div>
<div class="swiper-slide">
<img class="imgload" src="http://mooc.inxedu.com/images/upload/image/20151026/1446026905031.jpg" alt="首页banner图片02">
</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import Swiper from './../static/swiper-3.3.1.min.js'
require('./../static/swiper-3.3.1.min.css')
export default {
components: {},
mounted () {
console.log('挂载好了')
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
console.log(mySwiper)
}
}
</script>
<style>
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#app {
color: #2c3e50;
margin-top: -100px;
max-width: 600px;
font-family: Source Sans Pro, Helvetica, sans-serif;
text-align: center;
}
#app a {
color: #42b983;
text-decoration: none;
}
.logo {
width: 100px;
height: 100px
}
.swiper-container{
width: 500px;
height: 360px;
}
</style>
| 
