项目中使用vue-awesome-swiper

一.简介

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

下载安装

打开 surmon-china/vue-awesome-swiper，参考安装使用教程。

1. 选用npm下载安装

项目目录

win7下，cmd终端，进入根目录，cnpm install [email protected] --save

我的网速慢，使用cnpm代替npm，@2.6.7表示安装的版本，--save本地测试还是项目上线，都会用到[email protected]

安装完成后，在项目的node_modules目录下会找到

2.使用

全局挂载：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件挂载

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

由于我们要在很多地方用到该插件，选用全局方式，把上述全局代码复制到src/main.js中
2.SPA在单页面开发中的应用
新建一个.vue文件，按照以下代码模式更改

例如：