Vue-Swiper使用

当我们在vue项目中使用轮播图插件swiper时，直接引入swiper需要消耗大量资源vue-swiper是swiper的精简化

在这里，我介绍一下我的经验。

步骤一：安装vue，

# 最新稳定版本

$ npm install vue

# 最新稳定 CSP 兼容版本

$ npm install vue@csp

如果你已经安装了vue，可以忽略。

步骤二：创建vue项目

# 全局安装 vue-cli

$ npm install -g vue-cli

如果安装过就直接下一步

# 创建一个基于 "webpack" 模板的新项目

$ vue init webpack projectName

# 安装依赖

$ cd projectName

$ npm install  //npm自动根据安装package.json文件安装依赖

$ npm run dev   //启动服务

启动服务后如果弹出Vue的起始界面就是安装成功了

步骤三：

安装vue-swiper

npm install vue-awesome-swiper --save

步骤四：

在main.js中引入

import Vue from'vue'

import VueAwesomeSwiper from'vue-awesome-swiper'

然后再mian.js里面全局注册

Vue.use(VueAwesomeSwiper)

步骤五：

在.vue文件中使用

之后再配置路由在网页中就可以看到