Vue 常用组件

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/