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

欢迎加入前端交流群来获取视频资料以及前端学习资料

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

                  转载文章请注明出处!               

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

如果只是要使用轮播效果的话可以参考下一些vue组件;比如这篇文章

--------2019.7.9------------------

请参考swiper官方插件:https://github.com/surmon-china/vue-awesome-swiper

--------2019.7.9------------------

方法一:( 请先使用这种方法;更新于2018-05-14)

下载swiper:

npm install swiper --save-dev

swiper4.0使用入口:http://www.swiper.com.cn/usage/index.html

html:

 
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </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>

在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里(可以把官网例子的启动 var mySwiper =  删掉);

js:

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

css:

在main.js里引入css

  import Vue from 'vue'
import 'swiper/dist/css/swiper.css';

然后我们在用到swiper的组件里写点样式

<style scoped>
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
</style>

-----------------------------------我是分割线-----------------------------------------------------------

方法二:(以下是2017年10月写的)

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删掉即可;

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件的更多相关文章

  1. vue.js 独立引用css文件图片路径错误

    vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...

  2. vue 发布build 本地设置 相对路径 两个地方 一个根目录用./ css文件里面用../../ 【也不好用,还是得手改】

    build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths a ...

  3. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  4. django引入模板时,部分css文件渲染不成功失灵引入不成功

    今天碰到了一件怪事,下载好的模板,在webstorm中就好好地,但是一引入到pycharm的django项目中就各种失灵,位置错乱. 检查一番,发现该设置的都设置对了啊,而且js文件和css文件还有一 ...

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

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  6. Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法

    问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...

  7. vue引入css文件报错Unrecognised input

    一个vue项目中用到了swiper插件,引入swiper.css时报错 显示引入的css文件Unrecognised input ,在文件的line4,column12 . 其实是引入位置不对,样式文 ...

  8. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  9. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

随机推荐

  1. invalidate

    转载请注明出处:                前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 .同时真挚地向渴望了解      A ...

  2. netty可靠性

    Netty的可靠性 首先,我们要从Netty的主要用途来分析它的可靠性,Netty目前的主流用法有三种: 1) 构建RPC调用的基础通信组件,提供跨节点的远程服务调用能力: 2) NIO通信框架,用于 ...

  3. Windows下Word.exe在哪?

    在这里: C:\Program Files\Microsoft Office\root\Office16

  4. PHP 上传文件到其他服务器

    PHP 上传文件到其他服务器 标签(空格分隔): 安装Guzzle类库 **guzzle** 是发送网络请求的类库 composer安装:**composer require guzzlehttp/g ...

  5. ROS-多机通信

    前言:一定要在同一路由的局域网下进行,就是两台电脑的ip要像这样:192.168.191.4和192.168.191.8,只有最后一位不同,这样就能ping通了,否则ping不同. 一.查看ip和主机 ...

  6. 【转】C# ABP WebApi与Swagger UI的集成

    以前在做WebAPI调用测试时,一直在使用Fiddler测试工具了,而且这个用起来比较繁琐,需要各种配置,并且不直观,还有一点是还得弄明白URL地址和要传递的参数,然后才能调用.  最近新入职,公司里 ...

  7. JQuery学习系列篇(二)

    1.事件切换函数 hover([over],out); over鼠标移动到元素上要触发的函数,out鼠标移出元素要触发的函数. 2.togger 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换 ...

  8. mybatis通用的crud的接口

    http://git.oschina.net/jrl/mybatis-mapper https://www.oschina.net/p/mybatis-plus

  9. 快速新建一个纯净的java pom项目 project

    前期的java环境安装就不再阐述了使用步骤java -jar project-creator-0.1.jar projectName [war] 1> 比如你要创建一个项目名字叫 smile-o ...

  10. 关于C++程序运行程序是出现的this application has requested the runtime to terminate it in an unusual way. 异常分析

    今天运行程序是出现了this application has requested the runtime  to terminate it in an unusual way. 的异常报告,以前也经常 ...