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>