vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

----------------------------------------------------------

转载文章请注明出处！

----------------------------------------------------------

1.安装vue-cli

参考地址：https://github.com/vuejs/vue-cli

如果不使用严格语法需要在后三项打no；（加了挺头疼的，老是报错，但是对自己的代码规范性也是有很大的帮助的）

2.swiper下载示例代码

参考地址：http://www.swiper.com.cn/usage/index.html

一：单个组件使用：

3.在刚下载好的vue-cli里的helloworld.vue进行代码编写。

3.1html部分：

<template>
<div class="hello">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</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 class="swiper-scrollbar"></div>
</div>
</div>
</template>

3.2 js部分：

这里使用import引入swiper.js文件；

swiper的启动放在mounted里执行；

<script>
import'../assets/js/swiper.min.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}
}
</script>

3.3css部分：

<style scoped>
@import'../assets/css/swiper.min.css';
body {
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}

</style>

4.看似大工告成，这时候会报错：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

这个错误查文档说是：

在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。

因为webpack 2中不允许混用import和module.exports

我们只需要吧.babelrc文件里的第11行代码插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可；

{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}

5.好了问题解决；



二：全局使用：

6.当然也可以全局使用swiper；代码如下；

还是在刚才的helloworld.vue进行代码编写；只是去掉js和css文件的引入！

helloworld.vue代码：

<template>
<div class="hello">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</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 class="swiper-scrollbar"></div>
</div>
</div>
</template>

<script>

export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

body {
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}

</style>

main.js文件代码：



常见报错解决：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

.babelrc文件里的插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可；