vue脚手架引入swiper
方法一:
下载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 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>
在需要使用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 'swiper/dist/css/swiper.css';
然后我们在用到swiper的组件里写点样式
<style scoped>
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
</style>
-----------------------------------我是分割线-----------------------------------------------------------
方法二:
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部分:
1 <template>
2 <div class="hello">
3 <div class="swiper-container">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">Slide 1</div>
6 <div class="swiper-slide">Slide 2</div>
7 <div class="swiper-slide">Slide 3</div>
8 </div>
9 <!-- 如果需要分页器 -->
10 <div class="swiper-pagination"></div>
11
12 <!-- 如果需要导航按钮 -->
13 <div class="swiper-button-prev"></div>
14 <div class="swiper-button-next"></div>
15
16 <!-- 如果需要滚动条 -->
17 <div class="swiper-scrollbar"></div>
18 </div>
19 </div>
20 </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部分:
1 <style scoped>
2 @import'../assets/css/swiper.min.css';
3 body {
4 margin: 0;
5 padding: 0;
6 }
7 .swiper-container {
8 width: 500px;
9 height: 300px;
10 margin: 20px auto;
11 }
12
13
14 </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删掉即可;
1 {
2 "presets": [
3 ["env", {
4 "modules": false,
5 "targets": {
6 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 }
8 }],
9 "stage-2"
10 ],
11 "plugins": [],
12 "env": {
13 "test": {
14 "presets": ["env", "stage-2"],
15 "plugins": ["istanbul"]
16 }
17 }
18 }
5.好了问题解决;
二:全局使用:
6.当然也可以全局使用swiper;代码如下;
还是在刚才的helloworld.vue进行代码编写;只是去掉js和css文件的引入!
helloworld.vue代码:
1 <template>
2 <div class="hello">
3 <div class="swiper-container">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">Slide 1</div>
6 <div class="swiper-slide">Slide 2</div>
7 <div class="swiper-slide">Slide 3</div>
8 </div>
9 <!-- 如果需要分页器 -->
10 <div class="swiper-pagination"></div>
11
12 <!-- 如果需要导航按钮 -->
13 <div class="swiper-button-prev"></div>
14 <div class="swiper-button-next"></div>
15
16 <!-- 如果需要滚动条 -->
17 <div class="swiper-scrollbar"></div>
18 </div>
19 </div>
20 </template>
21
22 <script>
23
24 export default {
25 name: 'HelloWorld',
26 data () {
27 return {
28 msg: 'Welcome to Your Vue.js App'
29 }
30 },
31 mounted(){
32 var mySwiper = new Swiper ('.swiper-container', {
33 loop: true,
34 // 如果需要分页器
35 pagination: '.swiper-pagination',
36 // 如果需要前进后退按钮
37 nextButton: '.swiper-button-next',
38 prevButton: '.swiper-button-prev',
39 // 如果需要滚动条
40 scrollbar: '.swiper-scrollbar',
41 })
42 }
43 }
44 </script>
45
46 <!-- Add "scoped" attribute to limit CSS to this component only -->
47 <style scoped>
48
49 body {
50 margin: 0;
51 padding: 0;
52 }
53 .swiper-container {
54 width: 500px;
55 height: 300px;
56 margin: 20px auto;
57 }
58
59
60 </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 /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- vue中引入swiper插件
这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...
- vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...
- vue脚手架引入MD5加密函数
可以在全局定义一个MD5的方法,然后引入到vue的脚手架中. 首先 npm install crypto --save 然后引用定义一个对象, import crypto from 'crypto'; ...
- vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- angular4(2-2)angular脚手架引入第三方类库(swiper)
试了好多方法,npm install 方法失败了,下载到本地是可以使用的: 将swiper文件放到assets文件下: 项目目录下:(命令行) 因为ts并不能准确识别js语法,所以需要用ts中的int ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- leetcode 783. Minimum Distance Between BST Nodes 以及同样的题目 530. Minimum Absolute Difference in BST
Given a Binary Search Tree (BST) with the root node root, return the minimum difference between the ...
- 【SCOI 2005】 扫雷
[题目链接] 点击打开链接 [算法] 只要第一行第一个数确定了,后面的数也都确定了 递推两遍即可 [代码] #include<bits/stdc++.h> using namespace ...
- ab压力测试-突破最大线程数
ab压力测试中,发现你一次最多只能启动1024个线程 默认情况下,一个线程的栈要预留1M的内存空间 而一个进程中可用的内存空间只有2G,所以理论上一个进程中最多可以开2048个线程 但是内存当然不可能 ...
- bzoj4260 REBXOR——Trie树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 对于每个位置,求一个前缀最大值和后缀最大值: 也就是从1到 i 的异或和要找前面某处的 ...
- Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找
ylbtech-Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找 1.返回顶部 1. Java 实例 - 数组排序及元素查找 Java 实例 以下实例演示 ...
- Mysql 告警 :Establishing SSL connection without server's identity verification is not recommended.
在集成spring与mybatis是,在spring.xml中配置了DataSource配置,数据库连接采用的是mysql的链接字符串: jdbc:mysql://localhost:3306/wor ...
- (转)IE内存泄露,iframe内存泄露造成的原因和解决方案
http://my.oschina.net/jsan/blog/11169 http://blog.csdn.net/tianma630/article/details/8502395 jQuery ...
- bzoj 1602: [Usaco2008 Oct]牧场行走【瞎搞】
本来想爆手速写个树剖,然而快下课了就手残写了了个n方的短小-- 暴力把查询的两个点中深的一个跳上来,加上边权,然后一起跳加边权就行了 #include<iostream> #include ...
- codeforces 880E. Maximum Subsequence(折半搜索+双指针)
E. Maximum Subsequence time limit per test 1 second memory limit per test 256 megabytes input standa ...
- jQuery html操作
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 DOM = Document Object Model(文档对象模型) jQuery 中非常重要的部分,就是操作 ...