vue插件的使用

(1) npm install -S axios //安装axios插件

import axios from ‘axios’ //引入axios插件

config=>index.js=>proxyTable{ '/api':{ target:"http://localhost:8080", pathRewrite:{ '^/api':'/static/mock', } } } methods: { getHomeInFo(){ axios.get('/api/index.json') .then(this.getHomeInFoSucc) }, getHomeInFoSucc(res){ res=res.data if(res.ret&&res.data){ const data=res.data this.city=data.city } } }, mounted(){ this.getHomeInFo() }

(2) npm install vue-awesome-swiper --save //安装vue-awesome-swiper插件

import Vue from ‘vue’ import VueAwesomeSwiper from ‘vue-awesome-swiper’ //main.js中引入插件 import ‘swiper/dist/css/swiper.css’ //main.js中引入css样式 Vue.use(VueAwesomeSwiper) //main.js中使用插件

<template> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> export default { name: 'carrousel', data() { return { swiperOption: { // some swiper options/callbacks // 所有的参数同 swiper 官方 api 参数 // ... } } } }

(3) npm install better-scroll -S //安装better-scroll 插件

import Bscroll from ‘better-scroll’’ //引入滚动插件 mounted(){ setTimeout(()=>{ this.Bscroll=new Bscroll(this.$refs.wrapper,{mouseWheel:true,click:true,tap:true, // bounce: false, //反弹 // snap: { // 滑块切换的一些配置 // easing: { // 滑动切换的动画效果 // style: ‘ease-in’ // }, // threshold:.1, // 滑动切换到超过一半时切换到下一屏 //stepY: window.innerHeight // 纵向切换距离为窗口高度 // } }) },20) }

<div class="wrapper"> //外层div, position: absolute;overflow: hidden;height: 100%; width: 100%; <ul class="content"> //内层scroll块儿 <li>...</li> <li>...</li> ... </ul> </div>

(4) npm install vuex --save //安装vuex插件 新建文件夹: import Vue from ‘vue’ import Vuex from ‘vuex’

Vue.use(Vuex)

欢迎访问我的博客地址 : 博客地址，也可以手机扫码观看。