vue中常用的插件

0，重置css文件

在main.js中 import './assets/styles/reset.css'

用自己习惯的reset就好

1，fastclick 插件，解决移动端点击事件延时300毫秒

npm install fastclick --save

在main.js中

Vue.config.productionTip = false

fasctClick.attach(document.body)

2，解决移动端1像素边框的问题

在main.js中导入border.css文件

网上很多开源的解决1像素边框问题的文件，这里就不展开讨论了

3，滑动插件

npm vue-awesome-swiper --save

在main.js中导入，并在vue中使用

// swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

这里有一个小小的细节，swiper第一次创建的时候，传来的可能是空数据，swiper插件就已经创建完成了，

可能会导致swiper的图片出错，所以要保证有数据的情况下再加载swiper

4，使用Stylus，CSS预处理器

npm install stylus --save-dev

npm install stylus-loader --save-dev

安装完成后，在style标签中加入 lang="stylus"，例如 <style lang="stylus"></style>

可以使用styl为后缀创建stylus文件的变量以及方法， 

例如 a.styl

 ellipsis()
    overflow hidden
    white-space nowrap

    text-overflow ellipsis

$bgColor = #00bcd4

在模板中直接导入就可以使用了

 @import '~@/assets/styles/a.styl'  

     .test
         ellipsis()

         $bgColor

5，使用better-scroll插件，实现css3页面滑动效果

npm install better-scroll --save

import BScroll from 'better-scroll'

this.scroll = new BScroll('.wrapper')

外层元素注意，这里是需要两层嵌套

<div class="list" ref="wrapper">

    <div>

        //里面是写内容

        <div></div>

    </div>

</div>