|
|
发表于 2017-2-6 21:05:58
|
显示全部楼层
第1章 课程简介6 I( T, Y# i4 i( T
介绍课程的学习目标和学习内容。8 m8 M0 B4 }3 _) Y9 i4 P
; F W# L2 y% C% s
第2章 Vuejs介绍% y+ ^! j& H; [% |2 \( `
从前端开发趋势分析开始，引入 MVVM 开发框架和 Vue.js，接着对比流行框架Angular 和 React，最后详细介绍 Vue.js 的核心思想-数据驱动和组件化。! Z: F" H/ o9 h* O+ b
6 W5 t3 W( ]) h0 e第3章 Vue-cli 开启 Vuejs 项目! P/ e$ W9 x' @4 f$ U
介绍 Vue 项目的脚手架，如何安装，对脚手架生成的目录文件做介绍，介绍 Vue 组件的编写方法，最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理。7 K' o9 L% _: r9 ^ B, S
7 c8 ^9 f3 Z$ Z4 }第4章 项目实战-准备工作# Q6 P/ \3 _1 ?+ c( ~" z: D" A2 l! E4 }
分析外卖 APP 商家页面的需求，准备图片资源，利用 icon-moon 把 svg 制作成图标字体，对代码的目录结构设计，最后 mock 测试数据。
3 V/ C) b" O* @% @1 B4 `1 O* ^' |& l( z1 ^/ G! M
第5章 项目实战-页面骨架开发
6 r0 B7 _- j9 y设计页面的骨架，拆分组件，商品、评论和商家详情页利用 Vue-router 做切换，最后还介绍了 flex 弹性布局以及移动端 1 像素 border 实现的小技巧。
6 @; G$ i* w, Q5 L! A4 S" z
: a: Q; ^. u- ]# U M# ^6 d& D+ D4 [1 n% B第6章 项目实战-header组件开发1 ?& A% {% b1 h' l% K3 j* l+ A
编写 header 头部组件，应用 Vue-resource 从服务端读取数据，介绍如何在 Vue.js 中使用过渡动画，如何编写 css sticky footer 布局，如何从需求中抽象出 star 星星组件。$ `, Q, m0 l- e& ^' D
! U# L# B; ~, U4 m3 ^第7章 项目实战-goods 商品列表页开发+ {+ I# U+ a) o% h/ K; O9 G1 Q+ {
编写 goods 商品组件，包括它的子组件 shopcart 购物车。介绍了如何在 Vue.js 应用第三方 JS 插件 better-scroll实现列表滚动，并配合 Vue.js 的计算属性来实现左右列表的联动。应用了自定义 Vue.js 过渡动画实现了购物车的飞入动画效果，介绍了在 Vue.js中父子组件如何通讯。...
7 x) @$ b5 G0 K) C% F) Q; \4 v1 D. v/ Z0 L+ e: u. ?$ s
第8章 项目实战-food 商品详情页实现
4 s# n" s7 g. A; T! U9 f编写 food 商品详情页组件，介绍了图片占位的技巧，并从需求中抽象出的 split 分隔组件和 ratingselect 评论组件，实现自定义过滤器 datefilter。
3 [2 K# B4 j4 J) d6 ^9 @( f; } B2 k7 N5 G' x. t
第9章 项目实战-ratings评价列表页实现
8 Q3 g' D; `) q1 f% l编写 ratings 评价列表页，感受在 Vue.js 中复用组件的好处，实现快速开发。5 b6 W8 h7 d" Z; a* K/ S# Y+ F# D
5 W& ]$ R* x* H
第10章 项目实战-seller 商家详情页实现
; o* F! ^% _& j' S3 h% c编写 seller 商家详情页，实现一套通用移动端数据存取方案，以及对项目做一些体验上的优化。5 w* C7 O; ` R z( F
, f7 ~9 j8 p2 a$ @7 P) Z2 C
第11章 项目实战-项目编译打包0 q" ^7 u0 C9 I. |2 h5 j, ?& d# y
上线前的最后一步，编译打包Vue.js 项目。介绍了 webpack 编译时的配置，如何利用node.js 开启一个server本地调试。% q3 c/ ?9 x: D; N: t( ~
" U% U! G: S7 F+ d; d. e( N9 K
第12章 课程总结
# ?* X& S& E4 Z3 k7 R' f对课程做总结，并列出了课程所提到的主要知识点的链接，作为课程的延伸学习。
( m7 h% d. E( d5 b. x% E# ]( G) V% r
下载地址： |
|
[复制链接]
