在使用 Vue 开发移动端项目时,常规需要以下初始化步骤,本文进行总结归纳。
在 index.html 中添加 viewport 。
将 reset.css 文件放置到项目目录的 assets 下的 styles 中。并在 main.js 入口文件中引入。
该文件中 html 的 font-size 为 50px,使用 1rem 正好是 50px,在设计稿是二倍图的时候。100px 的设计稿刚好是 1rem。实际情况下,是 0.1rem 等于 5px。
import './assets/styles/reset.css'
reset.css 下载地址
解决移动端 1px 边框的问题。将 border.css 文件放置到项目目录的 assets 下的 styles 中。并在 main.js 入口文件中引入。
import './assets/styles/border.css'
border.css 下载地址
使用 fastclick 解决移动端 click 事件 300ms 延迟。重启服务后,在 main.js 入口文件中引入 fastclick。
npm install fastclick --save
重启服务后,在 main.js 入口文件中引入 fastclick,并在 document.body 之上使用 fastClick.attach。这样就使用了 fastclick。
作者:evenyao
链接:https://www.jianshu.com/p/d70dfd20a7e1



