vue小项目总结与笔记【三】—

vue小项目总结与笔记【三】——项目代码初始化

因为我做的是移动端的项目，这里主要说一下移动端相关。

第一步：重置meta标签

index.html文件一开始只是这样的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0>
    <title>travel</title>
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

对于移动端，要禁用用户手指缩放，页面比例始终为1:1

在content属性里添加

minimum-scale=1.0,maximum-scale=1.0,user-scalable=no

<!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>
    
  </body>
</html>

第二步：引入reset.css文件，初始化样式

项目的入口文件为main.js，所以在main.js里引入，引入方式为：

import ‘reset.css的路径’

第三步：引入border.css，为了解决多倍屏下，1px边框会被显示成多像素的情况

import ‘border.css的路径’

第四步：解决移动端300ms延迟问题，安装fastclick

先安装依赖:打开cmd，cd到当前目录下，执行命令

npm install fastclick --save

（插个小tips：

安装依赖包的时候

--save：将保存配置信息到pacjage.json的dependencies节点中。

--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。

dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块

devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它

）

安装完成后，再次运行项目 npm run start

在main.js里引入，并将attach方法绑定在document.body上

import fastClick from 'fastclick'



fastClick.attach(document.body)

第五步：在iconfont创建项目，管理本次项目的小图标，去自己的iconfont账号创建就好了。

初始化先到这里。

每次新增代码或者修改代码，要记得上传到线上，养成好习惯。