|
发表于 2017-2-6 21:05:58
|
显示全部楼层
第1章 课程简介
* F8 i- m& ]3 p9 ^介绍课程的学习目标和学习内容。
7 i6 @/ g, K; |2 C5 U7 s b6 Y ]' H8 @5 {* l9 L; U3 l2 Y
第2章 Vuejs介绍9 T* }$ Q( F& y8 n X
从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化。
# \8 @' P1 r6 D ~' f; S ?) P( c6 @ O
第3章 Vue-cli 开启 Vuejs 项目 @+ b6 Q, U# ~5 [
介绍 Vue 项目的脚手架,如何安装,对脚手架生成的目录文件做介绍,介绍 Vue 组件的编写方法,最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理。$ I5 Y8 k0 t g/ |$ _$ Y. g- U
1 |" p% d3 j d- Y
第4章 项目实战-准备工作
8 h6 N4 ]) Y4 [" r1 L+ B分析外卖 APP 商家页面的需求,准备图片资源,利用 icon-moon 把 svg 制作成图标字体,对代码的目录结构设计,最后 mock 测试数据。
) F- B- E' J& a$ z
! h, s8 I, d0 P: M. z, b3 c% e( i \第5章 项目实战-页面骨架开发% a. i8 g- U4 P8 \( i
设计页面的骨架,拆分组件,商品、评论和商家详情页利用 Vue-router 做切换,最后还介绍了 flex 弹性布局以及移动端 1 像素 border 实现的小技巧。' G: ^5 \2 p( \7 R% X) |
6 b# t% p0 X7 i) U第6章 项目实战-header组件开发
: S+ E' \& O5 r% ]# l编写 header 头部组件,应用 Vue-resource 从服务端读取数据,介绍如何在 Vue.js 中使用过渡动画,如何编写 css sticky footer 布局,如何从需求中抽象出 star 星星组件。
7 ~( U& o" F1 e8 Q+ x0 O% P: h& [0 n* B9 ?6 V' M6 M |; B" @
第7章 项目实战-goods 商品列表页开发
1 T7 b x% J7 s编写 goods 商品组件,包括它的子组件 shopcart 购物车。介绍了如何在 Vue.js 应用第三方 JS 插件 better-scroll实现列表滚动,并配合 Vue.js 的计算属性来实现左右列表的联动。应用了自定义 Vue.js 过渡动画实现了购物车的飞入动画效果,介绍了在 Vue.js中父子组件如何通讯。...
M. p+ o& H6 i7 E& @1 J
: @2 x W" Q3 [% N' L5 V1 Y4 u) A第8章 项目实战-food 商品详情页实现5 `: C" Z1 A+ w# t% O& T' |
编写 food 商品详情页组件,介绍了图片占位的技巧,并从需求中抽象出的 split 分隔组件和 ratingselect 评论组件,实现自定义过滤器 datefilter。
/ s8 i& V, Y6 R/ S. X6 F
6 F) `/ R4 u; b" d! P4 {4 M第9章 项目实战-ratings评价列表页实现
" a4 u' T% I4 c5 J9 n y& g; C编写 ratings 评价列表页,感受在 Vue.js 中复用组件的好处,实现快速开发。+ n Y% T2 q- z9 O% Q9 l9 N; s
* y# h" @1 A0 n# x% X. j
第10章 项目实战-seller 商家详情页实现
) I0 @0 }' V4 A! k1 d编写 seller 商家详情页,实现一套通用移动端数据存取方案,以及对项目做一些体验上的优化。( W t. Y: m- G/ i. F2 J) v+ {
# O$ A9 Q( n" u
第11章 项目实战-项目编译打包
4 a L2 w3 q [3 B. a上线前的最后一步,编译打包Vue.js 项目。介绍了 webpack 编译时的配置,如何利用node.js 开启一个server本地调试。
( x& B6 H. [& y% c) ~. J; B8 S* X5 k1 A( ^1 I5 n. J; k& N$ `
第12章 课程总结
: Y+ [: D% S+ t* N/ C2 W% t* Z* _+ m1 r" w对课程做总结,并列出了课程所提到的主要知识点的链接,作为课程的延伸学习。0 O3 n! H. K2 r( X0 W
+ |6 J) v5 S. K( X# k0 M+ U. @
下载地址: |
|