&web_id=" language="JavaScript">
Fork me on GitHub

Vue.js H5 项目初始化一般步骤

在使用 Vue 进行 H5 页面开发的过程中,经常会需要初始化整个项目,本文就初始化项目的一般步骤进行相关的总结。

步骤流程

一、更改 viewport

index.html 中更改 viewport

1
2
3
4
5
6
7
/* width=device-width 宽度是设备屏幕的宽度
* initial-scale 初始的缩放比例
* minimum-scale 最小的缩放比例
* maximum-scale 最大的缩放比例
* user-scalable 用户是否可以调整缩放比例
*/
<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 的目的是初始化整个项目的 CSS 样式,包括统一项目的根元素的 font-size 属性,方便进行 rem 计算。
reset.css 文件放置到项目目录的 assets 下的 styles 中,并在 main.js 入口文件中引入该资源。

注意:该文件中 htmlfont-size50px,使用 1rem 正好是 50px,在设计稿是二倍图的时候。100px 的设计稿刚好是 1rem。方便进行相关的计算。

1
2
// main.js
import './assets/styles/reset.css'

reset.css 下载地址

三、添加 border.css

解决移动端 1px 边框的问题。因为自从 retina 屏以来,不同的手机又不同的像素密度,CSS 中的 1px 并不等于移动设备中的 1px, 最直接的表现就是 1px 边框问题: 简单说就是将 border 的 CSS 变更为 1px ,来到移动设备上却变粗了显示成 2px,所以在项目中我们引入一个 border.css 解决这个问题。
border.css 文件放置到项目目录的 assets 下的 styles 中。并在 main.js 入口文件中引入该资源。

1
2
// main.js
import './assets/styles/border.css'

border.css 下载地址

四、添加 FastClick 库

FastClick 是一个简单易用的库,用于消除物理点击和 click 事件在移动浏览器上触发事件之间 300 毫秒的延迟。目的是使应用程序感觉不那么迟钝和响应更快,同时避免干扰程序当前的逻辑。

打开终端,安装 FastClick

1
$ npm install fastclick --save

重启 serve 服务后,在 main.js 入口文件中引入 FastClick, 并在 document.body 上利用 fastClick.attach 进行绑定使用。

1
2
3
// main.js
import FastClick from 'fastclick'
FastClick.attach(document.body);
Godlike Meteor wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
我知道不会有人点开,但万一真有人想不开呢?
------ 本文结束 ------