---

项目环境准备

1. 安装node
2. Gitee创建一个自己的仓库

3. git ssh本地免密

4. git clone 项目到本地电脑

5. 全局安装vue-cli

6. 项目初始化

7. 项目启动

npm run dev

目录结构

readme              //项目的说明文件
package.json         //第三方依赖包配置
package.lock.json    //帮助我们去确定安装的第三方依赖包的具体的版本，保持团队编程的统一
license             //开源协议的说明
index.html          //项目默认的首页模版文件
.postcssrc.js        //对 postcss 的配置项
.gitignore          //不需要上传到 git 上的文件管理 
.eslintrc.js        //对写的代码检测是否标准做一个检测
.eslintignore       //配置不需要 eslintrc 检测工具检测的文件
.editorconfig       //配置编辑器总风格统一的自动化格式的语法
.babelrc            //项目写的代码是 Vue 的大文件组件的代码的写法，所以需要通过 babel 这种语法解析器做一些语法上的转换，最终转换成浏览器能够编译执行的代码，babel 需要做额外配置时，就放在文件里面
static                  //static 目录放的是静态资源，要用到的静态图片啊或者后续需要模拟的 json 数据
node_modules                 //项目中需要用到的第三方 node 包
src                         //放的是项目的源代码
src/main.js                  //整个项目的入口文件
src/app.vue                 //整个项目最原始的根组件
src/router/index.js          //项目的路由放置位置
src/components               //项目中要用到的小组件
src/assets                  //项目中需要用到的图片
config                      //放置项目配置文件
config/index.js              //放基础配置
config/dev.ent.js            //开发环境配置信息
config/prod.ent.js           //线上环境配置信息
build                      //放置项目打包的 webpack 配置信息，vue-cli 会自动构建
build/webpack.base.conf.js   //基础的 webpack 配置信息
build/webpack.dev.conf.js    //开发环境的 webpack 配置信息
build/webpack.prod.conf.js   //线上环境的 webpack 配置信息

项目代码初始化

由于做的是webapp，所以需要针对移动端，做相应的准备。

1. meta标签相关设置

项目中的 index.html

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

效果：页面比例始终是1：1，用户通过手指操作缩放是无效的

2. 引入reset.css
   目的：重置页面样式

因为在不同移动端、不同浏览器上页面的初始样式是不一样的，引入reset.css为了保证在每个浏览器上展示出的初始效果是一样的

3. 引入border.css

目的：解决移动端1像素边框问题 原因，不同手机上显示的像素不同(可能有二倍屏，多倍屏)

main.js中代码导入

import  fastClick  from  'fastclick'
import './assets/styles/reset.css'
import './assets/styles/border.css'

4. 项目中安装fastclick

npm install fastclick –save

目的：解决移动端300ms延迟问题

移动端浏览器click事件为什么会有300ms的延迟呢？因为在手机上有个双击方案 —— 在手机上快速点击两下，实现页面放大；再次双击，恢复到原始比例。

那它是如何实现的呢？浏览器在捕捉到第一次点击事件后，会等待一段时间，如果在这段时间内，用户没有再次进行点击操作的话，就执行单击事件；如果用户进行了第二次点击操作的话，就会执行双击事件。这段等待的时间大约300ms。

5. Iconfont阿里巴巴矢量图标注册账号使用

单页应用与多页应用

本项目页面采用的是单页页面

项目下方报error解决

问题：由于esLint校验导致报错或警告

解决