1、Better-scroll （移動端實現頁面滾動）
// 安裝
npm install better-scroll --save
<templat>
<div ref="wrapper">
// ...
</div>
</templat>
<script>
import Bscorll from 'better-scroll'
export default {
name: 'test',
mounte() {
this.scroll = new Bscroll(this.$refs.wrapper,
{
// 配置參數，默認可忽略
})
}
}
</script>
2、stylus （CSS預處理）
// 安裝
npm install stylus stylus-loader --save
<div id="parent">
<div id="child"></div>
</div>
// 使用
<style lang="stylus" scope>
// scope實現樣式私有化，若要修改其他組件(如bootstrap)的全局樣式，如下實現穿透組件
#child >>> #test
font-size: 16px
// 層級書寫
#parent
width: 200px
height: 200px
background: red
#child
width: 100px
height: 100px
background: blue
</style>
3、axios（http請求）
// 安裝
npm install axios --save
axios.get('_path')
.then(callback)
4、vuex （實現數據共享）
// 安裝
npm install vuex --save
// './store/index.js'配置store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.store({
state: {city:''},
actions: {
// ctx爲上下文;city爲外部傳入數據
changeCity_a(ctx, city) {
ctx.commit('changeCity_m')
}
},
mutations: {
// 修改數據的方法
changeCity_m(state, city) { state.city = city }
}
})
// 引入文件
import store from './store/index.js'
// 獲取數據
this.$store.state.city
// 修改數據（官方建議是調用actions方法操作mutations修改數據）
this.$store.dispatch('changeCity_a', city)
// 注意事項
// 列表組件樣式：(position: absolute是必要的，其他可省略)
position: absolute
top: 90px //留給其他插件的空間
left: 0
overflow: hidden
5、vue-awesome-swiper （輪播圖）
詳見：https://www.javascriptcn.com/read-31069.html
npm install vue-awesome-swiper --save
/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//這裏注意具體看使用的版本是否需要引入樣式，以及具體位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
<!--swiperOption 爲對象-->
<swiper :options="swiperOption">
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滾動條
<div class="swiper-button-next"></div> //下一項
<div class="swiper-button-prev"></div> //上一項
<div class="swiper-pagination"></div> //標頁碼
6、iconfont （圖標字體插件）
到 http://iconfont.cn/ 選擇字體並下載，
項目引入4個字體包及1個.css文件，
標籤上需要添加類名"iconfont"，
內容填寫指定代碼，如''
7、Animate.css （動畫效果）
https://daneden.github.io/animate.css/