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>


阅读更多
个人分类: vue
想对作者说点什么? 我来说一句

vue开发浏览器调试插件

2018年04月09日 254KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭