移动端 Vue 项目初始化步骤

在使用 Vue 开发移动端项目时，常规需要以下初始化步骤，本文进行总结归纳。

步骤

添加 viewport

在 index.html 中添加 viewport 。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

添加 reset.css

将 reset.css 文件放置到项目目录的 assets 下的 styles 中。并在 main.js 入口文件中引入。

该文件中 html 的 font-size 为 50px，使用 1rem 正好是 50px，在设计稿是二倍图的时候。100px 的设计稿刚好是 1rem。实际情况下，是 0.1rem 等于 5px。

import './assets/styles/reset.css'

reset.css 下载地址

添加 border.css

解决移动端 1px 边框的问题。将 border.css 文件放置到项目目录的 assets 下的 styles 中。并在 main.js 入口文件中引入。

import './assets/styles/border.css'

border.css 下载地址

fastclick

使用 fastclick 解决移动端 click 事件 300ms 延迟。重启服务后，在 main.js 入口文件中引入 fastclick。

npm install fastclick --save

重启服务后，在 main.js 入口文件中引入 fastclick，并在 document.body 之上使用 fastClick.attach。这样就使用了 fastclick。

github

为了方便，直接上传了一份 github
https://github.com/evenyao/Vue-Mobile-Init