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 的问题
- 可能是因为浏览器没有 promise ,安装 babel-polyfill ,它会判断并添加 ES6 的新特性。再在 main.js 中引入
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