这篇文章单纯关于 学习教学视频《vue2.5开发去哪儿网App》做记录，并且是直接来到项目预热章节，本地已安装node与npm，文章里有很多内容是学习过程中进行查阅学习的记录，因此这是一篇主要关于构建与工具的记录，关于vue的学习知识仅保留在本地

使用github管理本地代码版本，使用git

1. 生成本地公钥与私钥，并获取公用密钥

ssh-keygen -t rsa -C 'yourName@xxx.com'
cat ~/.ssh/id_rsa.pub

2. github里添加公钥，将本机公钥加入公钥设置里，实现本地与github无需帐号密码同步

   
   
   add new SSH key

3. 执行ssh -T git@github.com 却出现报错：ssh_exchange_identification: read: Connection reset by peer

4. 执行ssh git@github.com -vT 打印出：

OpenSSH_7.3p1, OpenSSL 1.0.2h 3 May 2016
debug1: Reading configuration data /etc/ssh/ssh_config
debug1: Connecting to github.com [13.229.188.59] port 22.
debug1: Connection established.
debug1: identity file /c/Users/admin/.ssh/id_rsa type 1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_rsa-cert type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_dsa type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_dsa-cert type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ecdsa type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ecdsa-cert type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ed25519 type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ed25519-cert type -1
debug1: Enabling compatibility mode for protocol 2.0
debug1: Local version string SSH-2.0-OpenSSH_7.3
ssh_exchange_identification: read: Connection reset by peer

查询ip 13.229.188.59确实为github地址，并不存在劫持
通过git上该文章https://help.github.com/en/articles/using-ssh-over-the-https-port解决问题
可能会有人跟我一样没有config文件，在.ssh文件夹下手动创建吧，没文件类型哈，文件夹路径为C:\用户\admin.ssh

5. 执行 git clone 下图拿到的ssh地址克隆到本地
   
   clone
6. 在本地拉下来的工程里安装vue脚手架，执行命令npm install -g vue-cli，具体可查阅vue-cli对应的vpm网址
7. 去到工程的上一级（比如现在的文件夹是travel，那就回到上一级），执行vue init webpack travel
8. 回到工程目录，执行npm run dev，会构建一个本地服务器，复制地址到浏览器访问，到这里项目搭建完成
9. 同步到github仓库上，执行git status会列出现在与之前不一致的文件
10. 执行git add .把这些文件添加到git的缓冲区上
11. 执行git commit -m 'project initialized'
12. 执行git push把代码同步到github仓库上
13. 当其他终端克隆该项目时，因为node-modules并不会上传到github，需要手动下载，在该文件夹下执行npm install即可

所有生成文件的简要说明

readme文件 -- 是对项目的简要说明文件
package.json -- 第三方模块依赖
package-lock.json -- package的索引文件，帮助我们确认一些第三方依赖的版本（不过我做的时候没生成该文件出来）
LICENSE -- 开源协议说明
index.html -- 默认首页模板文件
postcsssrc.js -- postcss配置项
gitignore -- 上传到git的文件管理，用来管理哪些文件需要上传哪些不上传
eslintrc.js -- 检测代码规范
eslintignore -- 哪些文件不会被eslintre检测
editorconfig -- 编辑器里的一些语法配置
babelre -- 语法解析器，对vue的语法进行一些转换，让浏览器编译执行
static文件夹 -- 放静态资源，比如静态图片，json数据等
node_modeules -- 第三方依赖包

src -- 整个项目的源代码

• main.js -- 项目的入口文件
• app.vue -- 项目最原始的根组件
• router-index.js -- 项目所有路由
• compontents -- 项目用的组件
• assets -- 项目图片

config -- 整个项目的配置文件

• dev.env.js -- 开发环境的配置信息
• index.js -- 基础配置信息
• prod_env.js -- 线上环境的配置信息

bulid -- 整个项目的webpack打包配置内容（一般不需要修改，所以也不需要太关注）

• webpack.base.conf.js -- 基础的webpack配置项
• webpack.dev.conf.js -- 开发环境的webpack配置项
• webpack.prod.conf.js -- 线上环境环境的webpack配置项

多页应用 vs 单页应用

多页应用

单页应用

安装flexible 与 px2rem

由于项目是移动端，因此像视频一样手动计算rem是不现实的，因此需要添加这两个库来帮助我们计算

1. 下载安装flexible

npm i lib-flexible --save-dev

2. 在main.js里引入lib-flexible

import 'lib-flexible/flexible'

3. 安装px2rem loader

npm install px2rem-loader --save-dev

4. 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中：

    // 增加px2remLoader
    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
            remUnit: 75,
            baseDpr: 2
        }
    }

    // 这个是为了给全局添加辅助函数，这样就不需要每个文件都去 @import '~style/fn.styl'
    const stylusOption = {
        // 要导入全局的文件
        import:[
            path.join(__dirname, "../src/assets/style/fn.styl")
        ],
        // 全局的路径
        paths:[
            path.join(__dirname, "../src/assets/style/"),
            path.join(__dirname, "../")
        ]
    }

    function generateLoaders(loader, loaderOptions) {
        // 修改loaders规则
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }

        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus', stylusOption),
        styl: generateLoaders('stylus', stylusOption)
    }

这里补充一下，对到px2rem，使用的时候会对所有px单位都进行rem转换计算，但对到某些如同边框，字体这些，有些时候我们并不希望转化为rem，那么这时需要使用下面两个技巧：

• 在px后面添加/*no*/，不会转化px，会原样输出。（边框，圆角等）
• 在px后面添加/*px*/,会根据dpr的不同，生成三套代码。（字体上可以使用）
  如果是使用stylus的同学，记得加 “;” 号，否则还是会编译为rem，有兴趣的同学也可以自行看起github上的项目
  传送门：px2rem地址
  传送门：stylus中文文档

对于路径填写较长的，可以自定义关键字来决定。通过更改添加 bulid 中的 webpack.base.conf 中的 alias键值来增加更改指定路径，就像threejs中的loader类，有一个.setPath()，可以指定对应下载资源的基本路径路径一样

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      //以后路径就不需要用各种./../或@来指定路径，可以直接跑到指定文件夹去
      'style': resolve('src/assets/style'),
      'js': resolve('src/assets/js')
}

//在某个styl里需要用到 fn.styl，则可以使用下面这样
@import '~style/fn.styl'

github上创建分支及合并分支

公司级别的操作一般是需要通过分支合并到主线里来实现代码管理的，公司用的是hg，所以一直也没了解过这些，这次通过学习来记录一下如何通过github上实现分支的管理合并

创建分支

上图我已经新建了一个index-swiper的分支，如果还需要新建其他分支，只需要在这里输入分支的名称，点击下面的create即可，分支创建好后需要同步拉取到本地

1. 执行git pull拉取线上分支
2. 执行git checkout index-swiper将本地分支设置为index-swiper
3. 可以通过git status来查看本地当前分支

切换到分支后便是开发需求功能
开发的过程中由于没像视频里一样直接拿的线上图片，访问静态资源，发现别名在data中无法被编译

swiperList: [
    {
        'imgUrl': "@img/swiper_1.jpg",
        'id': "swiper_1"
    },{
        'imgUrl': "@img/swiper_2.jpg",
        'id': "swiper_2"
    },{
        'imgUrl': "@img/swiper_3.jpg",
        'id': "swiper_3"
    }
]

解决的办法有几个，其中觉得比较实用的是require，代码更改如下：

swiperList: [
    {
        'imgUrl': require("@img/swiper_1.jpg"),
        'id': "swiper_1"
    },{
        'imgUrl': require("@img/swiper_2.jpg"),
        'id': "swiper_2"
    },{
        'imgUrl': require("@img/swiper_3.jpg"),
        'id': "swiper_3"
    }
]

对到使用background背景图要使用别名，除了需要使用~，还要记得url里需要带上双引号：

.icon
    display: inline-block
    width: 33px;/*no*/
    height: 33px;/*no*/
    background-image: url("~@img/entrances.png")
    background-size: 374px 130px;/*no*/
    background-repeat: no-repeat

还有个做法但是我webpack还没学，跟着整一直编译报错，先做个记录：
vue webpack 打包处理stylus中图片的路径问题

当开发完后，需要将自己的分支提交到github上，由管理员审核后合并到主线中，操作步骤如下：

1. 执行git add .把这些文件添加到git的缓冲区上
2. 执行git commit -m 'change'将暂存区里的改动提交到本地的版本库，简要说明为change
3. 如果你的git没有设置邮箱名称，这个时候会提示让你输入你的邮箱与名称，执行
   git config --global user.email "you@example.com"
git config --global user.name "Your Name"
4. 重新执行git commit -m 'change'，这个时候就会显示出本次更改变化的所有文件
5. 执行git push把代码同步到github仓库上（分支上）
6. 执行git checkout master重新切换到master主线上
7. 执行git merge origin/index-swiper，将index-swiper分支合并到主线上
8. 执行git push把代码同步到github仓库上

由于我重新申请了github帐号（之前帐号是瞎填的），需要把本地项目重新推到新的帐号仓库上，查阅很多都不行，还是简书的非复制粘贴靠谱。如果也有同样需求的童鞋可以参考 fatal: remote origin already exists.解决方法

static目录是唯一可以被外部访问的目录，因此需要被外部可访问的文件都可以放在static目录下（忽然想起之前在stylus背景使用别名一直报错，有找到一种说把图片放在static目录里，大概就是这原因吧）
当不需要把文件提交到github上，则需要在gitignore中添加对应的目录路径static/mock，这样就不会把本地模拟数据提交到远程仓库上，也不会保存到本地git仓库里
当需要请求走代理的时候，webpack提供了一个proxyTable的属性，在config目录下的index.js，更改proxyTable

    proxyTable: {
      '/api': {  //请求api目录的时候
        target: 'http://localhost:8080',  // 依然是本地路径8080端口
        pathRewrite: {
          '^/api': "/static/mock"  //请求是api开头的目录的时候，转发到/static/mock文件目录里
        }
      }
    }

这里有个小问题需要注意，如果拿到的json文件格式有问题，那么webpack会自动返回成字符串类型，因此当拿到的结果不是对象的形式，那需要去检查一下本地的json是否书写有误（因为我就是多了个逗号结果拿不到数值）

对到多组件间的传值，除了bus总线，还能使用vuex，当然查阅文档的时候发现，如果不是大型单页应用其实也可以不使用vuex，可以使用 store状态管理，唯一不方便的是调试，因此共享状态不多的情况下简单的使用store也是一个不错的选择

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

教学视频毕竟是入门级，很多没说，还是得看官方文档，包括写进计算属性里呀，使用mapState啊等等，这些就不做记录了

当使用全局事件的时候，要记得解绑

    // 这里对到为什么使用keep-alive，而不是常规的mounted感到不解，也没说为何
    activated () {
        // 全局事件绑定，需要注意解绑
        window.addEventListener('scroll', this.handleScroll)
    },
    deactivated () {
        window.removeEventListener('scroll', this.handleScroll)
    }

组件的递归调用，说是个难点…没看出难点也没看出啥亮点，留着做记录，估计组件递归也就这种做固定的

<template>
    <div class="detail-lsit">
        <div class="item"
            v-for="(item, index) of list"
            :key="index">
            <div class="item-title">
                <h3 class="title">{{item.title}}</h3>
            </div>
           <!-- 如果还有children继续赋值调用组件 -->
            <div v-if="item.children"
                class="second-item">
                <detail-list :list="item.children"></detail-list>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailList',
    props: {
        list: Array
    }
}
</script>

<style lang="stylus" scoped>
    .item
        &:nth-child(n+2)
            border-top: 1px solid #ececec
    .item-title
        line-height: 60px
        font-size: 12px;/*no*/
        padding: 0 20px
    .title
        &::before
            content: ''
            display: inline-block
            width: 18px;/*no*/
            height: 18px;/*no*/
            margin-right: 10px
            vertical-align: -12%
            background: url("~@img/ticket.png") no-repeat center / cover
    .second-item
        padding-left: 20px
</style>

对到最后章节，如果需要请求其他端口的json配置，可以使用 http-server（个人就是直接用的http-server）

1. 安装http-servernpm i http-server -g
2. 开启非8080端口 http-server -p 80，这样就在该文件夹下启动了80端口的服务器（我说的该文件夹，是指你放api/***json的文件夹）
3. 更改config下的index.js文件

proxyTable: {
      '/api': {  //请求api目录的时候
        /* 本地调试请求转发 */
        // target: 'http://localhost:8080',  // 依然是本地路径8080端口
        // pathRewrite: {
        //   '^/api': "/static/mock"  //请求是api开头的目录的时候，转发到/static/mock文件目录里
        // }

        /* 本地联调，使用了http-server */
        target: "http://localhost"
      }
    },

webpack-dev-server默认不支持ip访问，如果需要直接访问ip地址，则需要更改package.json文件中对webpack-dev-server的配置定义（由于是json格式，复制代码记得手动去除注释）

  "scripts": {
    /* webpack-dev-server 默认不支持ip直接访问，要通过ip访问需要webpack-dev-server添加 --host 0.0.0.0 */
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

对到真机白屏，有可能是因为不支持ES6新特性，需要安装babel-polyfill

1. travel文件夹下运行 npm i babel-polyfill --save
2. main.js中引入bable-polyfill import 'babel-polyfill'

课程到这里完整结束，后面的章节没什么必要记笔记就没写了，包括项目上线，箭头函数异步加载那些都是比较基础的。接下来会学习webpack，加油！

首页

补充一下，对到视频里每次都去github上创建分支，本地pull的方法实在烦，好在学习webpack之后现在我不需要这么做了，按照我的流程来即可，你完全可以先开发代码再来创建分支：

1. 执行git checkout -b branchName创建名为branchName的分支，并跳到当前branchName分支上
2. 执行git add .将本次修改加入缓冲区
3. 执行git commit -m "description"把文件提交到本地仓库，描述为description
4. 执行git push --set-upstream origin branchName将本地分支提交到远程仓库
   这个时候你再上github上看，会发现多了一条branchName的分支，文件也提交上来了，这样，就不用重复视频创建分支，git pull，git checkout