本文详细介绍了移动端项目代码初始化的步骤，包括设置meta标签防止手指缩放，引入reset.css和border.css统一样式，解决1px边框问题，消除300ms点击延迟，以及使用iconfont图标。
项目代码初始化（移动端）
首先，在index.html 的meta 标签中加入三项（因为是移动端），手指缩放网页，不会放大缩小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
第二步，引入 reset.css (重置页面的样式表)，在不同的手机的浏览器上，默认的样式是不统一的，所以需要将这些浏览器初始化的样式重置成统一。reset.css 可以网上查找下载。下载后，把它放在src/styles 目录下。然后，去引入这个文件。去项目的入口文件main.js 添加一行 import './assets/styles/reset.css'
第三步，1像素边框的问题，有的手机屏幕分辨率很高，可能是2倍屏 3倍屏，这时，css 设置的1px 的边框可能显示为多个像素，为了解决这个问题，需要额外引入一个css 文件。border.css 也放在styles 里. 然后，和上面一样，在 main.js 中引入这个文件即可。
第四步，移动端的项目中经常会有些小的问题，比如，300ms 点击延迟的问题。具体指，在移动端，某些机型某些浏览器上，click点击事件，会延迟300ms 然后才执行。这样，使用click 的体验就不很好。但是，我们可以引入fastclick 的库，然后就可以正常使用click 事件了。
步骤：
停一下vue 的服务。
然后在项目根目录下，使用npm 下载 fastclick 库（--save 表示开发版本或者打包上线的版本都需要使用这个库的代码）
安装好了后，重启服务，npm run start
这时候 ，项目的依赖文件中就会有fastclick 的依赖（第14行）
引入fastclick 库，在main.js 中引入依赖，加入两行（第6，11行）即可正确使用fastclick 库
初始化最后一步，项目中使用iconfront 。首先去confront 官网，在图标管理，我的项目页面，去新建一个项目。
好了，项目初始化完成，上传代码到远程仓库吧。
先退出vue 服务。
然后，常规git 操作即可。
重新启动服务器，只需进入项目根目录，使用命令： npm run start 即可。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
