仿去哪儿网项目视频学习总结

     本文就不根据整个项目从头到尾来详写了，掘金社区很多写得很好的大神已经把这整个项目总结的文章写的非常好了，例如：Chrislinlin作者写的Vue.js开发去哪儿网WebApp，还有一些写的好的文章，我就不一一列举了。
     所以本文只记录我个人记录在项目学习笔记本上的一些点。这个仿去哪儿项目的学习，我个人的主要目的是为了了解一个App开发需要如何去做，如何组件化开发，如何利用Git进行代码管理（完整地看过Git操作视频学习，但只看不操作压根就是纸上谈兵，这个项目让我对Git真正有了一个入门的理解），还有巩固学习的vue的知识点。

作者Chrislinlin

Runtime-Compiler和Runtime-Only的区别
         e.Install vue-router?是否安装vue路由，Yes
         f.Use ESlint to lint your code？Yes 是否使用ESlint对代码进行一个规范化约束
              Pick an ESlint prest选择Standand         （说实话ESlint这玩意儿，如果以前没用过，一开始用的时候时不时给你提示一个波浪线、红点错误提示，真的有时候逼死强迫症，但是用了两三天，啊，我的代码真整齐，真舒服，现在如果敲代码没了这东西，我都觉得浑身难受）
         g.Set up unit tests? 是否使用单元测试，这个项目是没使用的No
         h.Set up e2e tests with Nightwatch？ 是否进行端到端的测试，一样的No
         i.npm yarn选择npm做整个项目的包管理
⑦测试脚手架是否成功安装，能否正确运行，输入cd Travel再输入npm run dev回车进入到端口初始页面
⑧同步线上线下初始代码
     1.在项目文件目录里面右键选择git bash here打开git bash
     2.先输入git status以查看在你上次提交之后是否有修改，以及现在所有分支，能看到增加了许多新文件
     3.输入git add .来添加当前项目的所有文件到本地缓存区
     4.输入git commit -m 'xxxxx'xxx内容为你对本次提交的修改的文件的描述
     5.输入git push将上述操作的文件推到云端项目代码管理仓库
做完上述步骤（有一些简单能看懂的步骤我可能直接跳过了没有写入进来），项目的环境就已经搭建完成了，以上是我个人的理解，中间可能有一些写错的地方，或者写的不好的地方还请大家指出。

移动端1像素边框问题

父子组件传值
子组件：

父组件：

③兄弟组件间通过事件车传值
     1.兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据
     2.创建一个Vue的实例，让各个兄弟共用同一个事件机制
     3.传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)

     4.接收数据方，通过mounted(){}生命周期触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数
     实例如下，我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue'

export default new Vue

父组件：

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

子组件a：

<template>
      <div class="components-a">
           <button @click="abtn">A按钮</button>
      </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
      name: 'app',
      data () {
        return {
                'msg':"我是组件A"
        }
      },
      methods:{
           abtn:function(){
                   eventVue .$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
           }
      }
}
</script>

子组件b:

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',
   data () {
        return {
           'btext':"我是B组件内容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn:function(){
            eventVue .$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题
                 this.btext = message      
            })
       }
    }
}
</script>