vue-cli实现《去哪儿旅行》App笔记（一）首页

创建git项目

 1. 添加公钥
	查看git的用户名和邮箱
		git config user.name
		git config user.email
	通过邮箱生成ssh公钥
		ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

安装Vue-cli脚手架并初始化Webpack项目
之前用npm install -g vue-cli安装过，就没截图了
留个位置写一下当时用cnpm代替npm

vue init webpack命令搭建webpack项目，后面的目录名可以是已存在的目录，也可以是新建的项目

运行项目，这里有个小问题，运行要在项目根目录下运行，截图中所在路径有问题，下一张图的是对的。

默认端口号8080

在浏览器中打开localhost:8080，出现Vue自带的一个页面

Vue-cli所生成的项目结构

其中main.js是整个项目的主入口，它声明了根实例Vue，将其挂载到了index.html中id为app的div上，并声明了子组件App，以下是main.js的代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这个App子组件很重要，他是根实例里唯一的子组件，也就是未来项目中添加的各种组件的父组件。以下是代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

.vue类型是组件文件，分为template、script和style三部分，template中默认的模板内容对应的就是8080页面里那个V字图标和下方的内容部分，而内容部分是通过router-view标签访问路由显示的。script中的export指令将组件文件以特定的名字（name）导出，在其它的文件中通过import指令引用该组件。styles用来定义模板内容样式。
路由是在router/index.js文件中设置的，代码如下：

//'vue'是'../../node_modules/vue/dist/vue.js'的简写
import Vue from 'vue'
//'vue-router'是'../../node_modules/vue-router/dist/vue-router.js'的简写
import Router from 'vue-router'
//引用组件
import HelloWorld from '@/pages/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

可以看到当访问根路径’/'时会显示HelloWorld子组件。

移动项目的代码初始化
屏幕尺寸
修改index.html中的meta标签，添加minimum-scale=1.0,maximum-scale=1.0,
user-scalable=no三个参数，让用户无法修改页面比例，页面和物理屏幕比始终为1:1。

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

重置样式
在assets文件中新建styles文件夹，引入reset.css文件。

一像素边框
在assets/styles文件中引入border.css文件。
因为移动端会有视网膜屏幕，也就是说在相同宽高尺寸的屏幕上，视网膜屏可以用4个像素来显示原来的1个像素。而在css中定义的1px到了视网膜屏可能会变成2px或者3px。这也就是为什么移动端需要使用2倍图来开发，之前面试时也遇到过这问题。这里有一篇讲解前端2倍图的帖子。

解决点击事件300毫秒延迟问题
在项目根目录下输入命令：cnpm install fastclick --save，--save的意思是在研发和线上打包时都需要这个fastclick项目依赖。

最后再main.js中引入以上的样式和依赖文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import './assets/styles/reset.css'
import './assets/styles/border.css'

Vue.config.productionTip = false
fastclick.attach(document.body)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

项目实现
首页
设计图

首页共分为5各部分：头部、轮播图、图标区域、热销推荐和周末去哪儿，分别对应5个组件。将原来的components文件删除，建立5个vue文件。

修改router/index.js文件中的路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

App.vue的template内容中的img标签，还有样式都去掉。
以Header.vue为例，简单设置一下每个子组件：

<template>
  <div>头部</div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style></style>

5个子组件都设置完成后，在整个Home.vue组件中引入并完成注册，一起显示。

<template>
  <div>
    <div>首页</div>
    <home-header></home-header>
    <home-swiper></home-swiper>
    <home-icons></home-icons>
    <home-recommend></home-recommend>
    <home-weekend></home-weekend>
  </div>
</template>

&