1. FaskClick

1. 为什么使用FastClick

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击，为了能够立即相应用户的点击事件，才有了FastClick。
项目地址：https://github.com/ftlabs/fastclick

2. 安装fastclick

npm install fastclick

3. 初始化FastClick实例

初始化FastClick实例建议再页面的DOM文档加载完成后。
在项目main.js中加入如下代码

impot FastClick from ‘fastclick‘
if (‘addEventListener‘ in document) {
  document.addEventListener(
    ‘DOMContentLoaded‘,
    () => {
      (FastClick as any).attach(document.body);
    },
    false,
  );
}

4. 不需要使用fastclick的情况

1. fastclck对PC浏览器访问无影响，不会添加监听事件
2. Android版本Chrome32+设置viewport meta标签值为with=device-width就不会出现300ms延迟，因此监听事件不会添加。
   <meta name="viewport" content="width=device-width, initial-scale=1">
3. 所有Android Chrome版本设置viewport meta标签值为user-scalable=no也不会出现300ms延迟，但是注意user-scalable=no会禁用缩放功能。
4. 对于IE11 +，您可以使用touch-action: manipulation;禁用某些元素（如链接和按钮）上的双击缩放。对于IE10使用-ms-touch-action: manipulation

2. vue-event-calendar-pro(事件日历)

1. 简介

Vue2的简单事件日历，除Vue2外没有其他依赖项。响应式和移动优先。
npm官方地址：https://www.npmjs.com/package/vue-event-calendar

2. 安装

npm install vue-event-calendar

3. 在main.js中引用

//^1.1.10, CSS has been extracted as one file, so you can easily update it.
import ‘vue-event-calendar/dist/style.css‘ 
import vueEventCalendar from ‘vue-event-calendar‘
//locale can be ‘zh‘ , ‘en‘ , ‘es‘, ‘pt-br‘, ‘ja‘, ‘ko‘, ‘fr‘, ‘it‘, ‘ru‘, ‘de‘, ‘vi‘
Vue.use(vueEventCalendar, {locale: ‘en‘}) 

4. 样例

<template>
  <vue-event-calendar :events="demoEvents"></vue-event-calendar>
</template>
 
<script>
export default {
  data () {
    return {
      demoEvents: [{
        date: ‘2016/11/12‘, // Required
        title: ‘Foo‘ // Required
      }, {
        date: ‘2016/12/15‘,
        title: ‘Bar‘,
        desc: ‘description‘,
        customClass: ‘disabled highlight‘ // Custom classes to an calendar cell
      }]
    }
  }
}
</script>

3. @xunlei/vue-lazy-component懒加载插件

1.特性

• 支持组件可见或即将可见时懒加载
• 支持组件延时加载
• 支持加载真是组件前展示骨架组件，提高用户体验
• 支持真实组件代码分包异步加载

2. 安装

npm install @xunlei/vue-lazy-component

3. 在线demo

包地址：vue-lazy-component
样例地址：demo

4. 使用

1. 注册组件

方式1利用插件方式全局注册

import VueLazyComponent from ‘@xunlei/vue-lazy-component‘
import Vue from ‘vue‘
 
Vue.use(VueLazyComponent)

方式2局部注册

import { component as VueLazyComponent } from ‘@xunlei/vue-lazy-component‘
 
export default {
  // ...
  components: {
    ‘vue-lazy-component‘: VueLazyComponent
  }
}

2. 模板语法

<vue-lazy-component
  @init="init"
  @beforeInit="beforeInit"
 >
  <!-- real component-->
  <st-series-sohu/>
  <!-- skeleton component -->
  <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

4. vue-skeleton-loading骨架加载

是一个让我们快速和方便写出自定义 skeleton loading 的插件。

1. Demo

vue-skeleton-loading

2. 安装

npm install vue-skeleton-loading --save

3. 使用

1. 项目入口文件main.js全局注册

import VueSkeletonLoading from ‘vue-skeleton-loading‘;
Vue.use(VueSkeletonLoading);

2. 模板语法

共有5个组件，两个基础组件CircleSkeleton、SquareSkeleton，两个布局组件Column、Row，一个容器组件SkeletonLoading。

1. 样例1

<template>
    <div class="list1">
        <skeleton-loading>
            <row
                    v-for="i in 6"
                    :key="i"
                    :gutter="{top: ‘10px‘, bottom: ‘10px‘}"
            >
                <column :span="3" :gutter="10">
                    <circle-skeleton></circle-skeleton>
                </column>
                <column :span="20" :gutter="10">
                        <square-skeleton 
                            :count="2"
                            :boxProperties="{
                                bottom: ‘15px‘,
                                width: ‘250px‘,
                                height: ‘15px‘
                            }"
                        >
                        </square-skeleton>
                </column>
            </row>
        </skeleton-loading>
    </div>
</template>
 
<script>
    export default {}
</script>

效果

2. 样例2

<template>
    <div class="page">
        <skeleton-loading>
            <row 
                :gutter="{
                    bottom: ‘15px‘
                }"
            >
                <square-skeleton 
                    :count="2"
                    :boxProperties="{
                        top: ‘10px‘,
                        height: ‘26px‘
                    }"
                >
                </square-skeleton>
            </row>
            <row>
                <column :span="4">
                    <circle-skeleton></circle-skeleton>
                </column>
                <column :span="20" :gutter="20">
                    <square-skeleton 
                        :boxProperties="{
                            top: ‘10px‘,
                            width: ‘70px‘,
                            height: ‘15px‘
                        }"
                    >
                    </square-skeleton>
                    <square-skeleton 
                        :boxProperties="{
                            width: ‘100px‘,
                            height: ‘15px‘,
                            top: ‘10px‘
                        }"
                    >
                    </square-skeleton>
                </column>
            </row>
            <row :gutter="{top: ‘20px‘}">
                <square-skeleton 
                    :count="4"
                    :boxProperties="{
                        bottom: ‘10px‘
                    }" 
                >
                </square-skeleton>
            </row>
            <row>
                 <square-skeleton 
                    :boxProperties="{
                        bottom: ‘10px‘,
                        height: ‘200px‘
                    }"    
                >
                </square-skeleton>
            </row>
        </skeleton-loading>
    </div>
</template>

<script>
    export default {}
</script>

<style lang="less">
    .page {
        padding: 15px;
    }
</style>

效果

vue开发webapp常用组件汇总（未完）

原文：https://www.cnblogs.com/always-chen/p/12559950.html