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)

歡迎通路我的部落格位址 : 部落格位址，也可以手機掃碼觀看。