【Vue项目】一、去哪儿网APP——前期准备

项目初始化安装准备

1. 安装node 以及 npm。
2. 使用码云平台，创建仓库及项目，接着使用Git命令：git clone将项目克隆到本地。
3. 全局下安装Vue-cli（脚手架），使用以下命令：
   $ npm install -g cnpm --registry=https://registry.npm.taobao.org
4. 使用打包工具webpack，运行命令：vue init webpack 项目名称 。

项目重点概念了解

1. 单文件组件
   以.vue结尾的文件是一个单文件组件。它由三个部分组成，分别是
   （1）<template>：模板
   （2）<script>：逻辑
   （3）<style>：CSS样式
   最后，单文件组件以import的形式导入
2. 路由：根据网址的不同，返回不同的页面给用户。
   在App.vue中，<router-view/>显示的是：当前路由地址所对应的内容。即对应router文件下的index.js。
   可以设置访问根路径“/”时，对应的组件内容。
3. 单页应用 & 多页应用
   （1）单页应用：
   
   即单页应用，页面跳转时，JS动态地删除当前页面的内容，然后将新的页面DOM结构渲染出来。
   在Vue中，页面的跳转使用：<router-link to="/list">列表页</router-link>
   （2）多页应用：
   
   多页应用，页面跳转时，后端返回新的HTML页面。

项目初始化前期准备

1. 设置移动端不能通过手机放大缩小：在index.html中meta中的设置如下

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

2. 初始化样式的统一，为了保证不同浏览器显示效果一样：在assets/styles文件夹下，导入reset.css文件，并在main.js中导入。

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

3. 解决移动端1像素在多倍屏中显示多像素的问题：在assets/styles文件夹下，引入border.css文件，并在main.js中导入。

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

4. 解决移动端点击时有300ms延迟的问题：安装fastclick
   首先，在相应的文件目录下执行以下命令进行安装

npm install fastclick --save

接着，在main.js中引入fsatclick，并使用：

import fastclick from 'fastclick'

fastclick.attach(document.body)

5. 通过iconfont官网配置项目的icon，在iconfont官网创建相应的项目。
6. 最终配置完成代码后，通过以下git指令将代码初次推送至线上同步。

git add .   //将本地修改添加到本地git的缓存区
git commit -m 'project init'   //把文件提交到仓库，并携带‘project init’这个信息
git push   //将文件推送至仓库