封装css属性

mixins.styl

ellipsis()  overflow: hidden  white-space: nowrap  text-overflow: ellipsis

引入方式：

动态计算分页的数量

场景：比如你得到一组list数据要展示在页面上，一页展示8条，超过8条要展示在下一页，滑动翻滚展示那种。可以利用计算属性来达到效果

 ajax获取后台数据

vue提供了好几种ajax的方法，但是我们这边采用的是axios  模块，是vue官方提供的模块。

 npm  install  axios  --save  下载

 import axios from 'axios'    引用

 使用方法：

export default {    name: 'Home',    components: {    HomeHeader,    HomeSwiper,    HomeIcons,    HomeRecommend,    HomeWeekend  },  methods: {    getHomeInfo () {      axios.get('/api/index.json?city=' + this.city)   // 利用axios执行ajax请求        .then(this.getHomeInfoSucc)                    // 请求成功之后执行这个回调函数    },    getHomeInfoSucc (res) {      res = res.data      if (res.ret && res.data) {        const data = res.data        this.swiperList = data.swiperList        this.iconList = data.iconList        this.recommendList = data.recommendList        this.weekendList = data.weekendList      }    }  },  mounted () {               //  挂载的时候执行这个函数    this.lastCity = this.city    this.getHomeInfo()  },}

转发请求来实现前后端接口分离

为啥要有这个功能呢？思考一下，我们前端开发的时候，数据是我们模拟的，接口url也是我们模拟的，然后我们开发ok之后后台给我们接口，我们再一个修改修改url，这样是很不友好的，也容易犯错，难不能这样呢？我们写的url就是后台真正的url，但是可以做一个转发，转发到我本地的数据源，这样当真正上线的时候，我们就不用再一个修改接口了。实现这个效果需要在配置文件中配置下。

\config\index.js 中

proxyTable: {      '/api': {        target: 'http://localhost:80',        pathRewrite: {          '^/api':"/static/mock"       //意思是当我们请求api开头的接口时，vue就会帮我们自动转发到/static/mock路径下        }      }    },

下拉实现

利用 better-scroll插件来实现的

https://www.cnblogs.com/xiaohaifengke/p/7308943.html    博客推荐

https://github.com/ustbhuangyi/better-scroll      gitHub地址

mounted () {    this.scroll = new Bscroll(this.$refs.wrapper)   // 实现滑动效果  }   this.scroll.scrollToElement(element)    //这个方法是说 你获取到element的Dom元素，放进去，会自动滚动到相关的dom位置