Vue app开发踩过的那些坑(二)

最近接了一个活儿，甲方要求用Vue来进行开发，于是乎，从头开始读了一遍官方文档，便开始写代码了。之前接触过Angular js，不过理解不深，但是对上手Vue来说，还是有帮助的。对于CSS，也老是记不住一些属性，在开发过程中，也算进行了复习。这篇文章主要纪录了在开发过程中遇到的坑以及对应的我的解决方案，参照网上的解决方案的大部分都贴了原文地址，如有问题，欢迎指正。

-----------------------------------------------------------------我是分割线--------------------------------------------------------------------------

1、使用移动组件库mint-ui

Mint UI 是基于 Vue.js 的移动组件库，有很多可以使用，参考这里

使用时首先install，

npm i mint-ui --save

之后需要先引入组件，在main.js中

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

使用了date time picker，用来选择日期，Indicator用来显示正在加载，Toast用来弹出提示信息，loadmore的pull-down实现上拉加载更多。

具体使用方法参见文档

注意：pull-down使用时，在进入界面时直接触发继续加载的事件，在滚动的外面需要加一个div并指定其高度，里面的内容超过这个高度才会滚动。

<div ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
  <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill='false'>
  </mt-loadmore>
</div>

在script里需要引入这个组件，而且需要在mounted钩子里加入

import { Loadmore } from 'mint-ui'

mounted: function () {