Vue 常用组件

1、Better-scroll （移动端实现页面滚动）

// 安装
npm install better-scroll --save

  

    // ...
  

 

2、stylus （CSS预处理）

// 安装
npm install stylus stylus-loader --save

    


// 使用

 

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 } */)

  
  
  
  
  
  


     //滚动条
   //下一项
   //上一项
    //标页码

 

6、iconfont （图标字体插件）

到 http://iconfont.cn/ 选择字体并下载，

项目引入4个字体包及1个.css文件，

标签上需要添加类名"iconfont"，

内容填写指定代码，如''

 

7、Animate.css （动画效果）

https://daneden.github.io/animate.css/