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)

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