去哪儿APP vue 2.X —— 开发笔记（七）

1 项目中加入基础动画

1.2 渐隐渐现的动画组件组件封装

slot组件是外部组件插入进来的插槽

FadeAnimation.vue

<template>
    <transition>
        <slot></slot>
    </transition>
</template>
<script>
export default {
  name: 'FadeAnimation'
}
</script>
<style lang="stylus" scoped>
  .v-enter, .v-leave-to
    opacity: 0
  .v-enter-active, .v-leave-active
    transition: opacity 0.5s
</style>
复制代码

2 Vue 项目的接口联调

2.1 前后端联调

前后端联调：之前所有的 Ajax 数据都不是后端返回的数据，都是通过接口 mock 模拟的假数据。开发进行到这样一个节点：前端代码编写完毕，后端的接口也已经写好了，就该进行前后端的调试了，用后端返回的数据替换假数据。

• 后端服务器在本地
• 后端服务器在另外的电脑上、在内网或外网的服务器上
  • 代理要写内网的 IP 地址，或者外网的域名

本项目在本地搭建一个静态资源服务器，访问后台服务器的数据：

2.2 nodejs anywhere 搭建本地静态文件服务

2.2.1 安装 anywhere

在安装了 npm、node 的前提下

npm install -g anywhere
复制代码

2.2.2 使用，在指定目录下启动anywhere

安装完成之后直接在想要启动服务的文件夹下，打开命令行，输入anywhere回车即可启动。

cd XXX
anywhere
复制代码

2.2.3 anywhere --help

anywhere  --help
复制代码

Usage:
  anywhere --help // print help information
  anywhere // 8000 as default port, current folder as root
  anywhere 8888 // 8888 as port
  anywhere -p 8989 // 8989 as port
  anywhere -s // don't open browser
  anywhere -h localhost // localhost as hostname
  anywhere -d /home // /home as root
  anywhere -l // print log
  anywhere -f // Enable history fallback

复制代码

本地后台服务器的端口为 8000 ：

2.3 修改代理 proxy

config -> index.js

 proxyTable: {
      '/api': {
        target: 'http://localhost:8000'
        }
      }
    },
复制代码

• 请求 '/api' 下的地址，通过代理都会转发到本地的后台服务器上来（代理 localhost 默认 为 localhost:80）。 在开发环境下，如果访问 api 这个路径，会把访问 api 这个请求发送到 localhost: 8000 这个端口上（后台服务器的）。

3 Vue 项目真机测试

3.1 真机测试流程

本前端项目是通过 webpack-dev-server 启动的，默认不支持通过 ip 的形式进行页面的访问。要更改 package.json 配置：

这样就可以通过 ip 地址访问页面了，而且手机也可以在同一个局域网内，通过 ip 地址访问网页。

3.2 真机调试遇到的问题

• 事件修饰符，阻止 touchstart 的默认行为

  

• 有的安卓手机打开是白屏

  • 可能是因为浏览器没有 promise ，安装 babel-polyfill ，它会判断并添加 ES6 的新特性。再在 main.js 中引入import 'babel-ployfill'
  • webpack-dev-server 的问题

4 Vue 项目打包上线

4.1 build

npm run build
复制代码

vue 的脚手架工具会自动对 src 目录下的代码打包编译，生成能被浏览器运行的代码，同时这个代码也是个压缩后的代码。 生成一个 dist 目录，就是我们最终要上线的代码。

4.2 把 dist 目录放到后端项目的目录上

• 1 把 dist 目录下的 static 文件和 index 页面放到启动后端服务的文件的根目录下。

  

• 2 若需要前端 build 的项目不在后端的根目录下，要更改config->index.js

  

  
  assetsPublicPath改成/project，指打包的项目要运行在后端的 project 这个目录下，build之后，把生成的 static 文件和 index 页面放到 project 文件夹下。

  

4.3 运行

• 1 localhost: 8000

• 2 localhost: 8000/project

  

5 Vue项目的联调测试上线 异步组件实现按需加载

5.1 build 生成的 dist 文件目录

• CSS
  • .map Source Map文件 调试被压缩过的 CSS 代码
  • css 所有页面要用到的 css 文件
• js
  • app.js 项目各个页面的业务逻辑代码
  • manifest.js webpcak 打包生成的配置文件
  • vendor.js 各个页面、组件公用的代码

首页加载时，会请求：

如果在开发环境运行代码，那么只有 app.js

5.2 Why When

• 访问首页的时候，app.js 把其他的页面也都进行了加载，当项目越来越大，页面变得越来越多，app.js 会变得越来越大（超过1MB），这时候就要通过异步组价对代码进行优化。
• 当 app.js 很小的时候，发一个 http 请求的代价远远比首页多加载一点 js 代码的代价要高，这个时候不用对 app.js 文件进行拆分，使用异步组件。

5.3 How 如何让单页面组件异步加载

在路由中实现组件异步加载

注：所有的组件都可以写成异步加载

6 Vue 学习思路

• ↓ vue 官网查阅
• → vue 生态系统
  • ↓ vue-router 命名路由 重定向和别名 路由守卫...
  • ↓ vuex 核心概念 项目结构 插件...
  • ↓ vue 服务器端渲染...
  • ↓ vue 资源 github 官方推荐的插件
  • ↓ vue 源码
• webpack、 babel、ES6