|
|
发表于 2017-2-6 21:05:58
|
显示全部楼层
第1章 课程简介
5 `2 n* v: ?* L! V! _介绍课程的学习目标和学习内容。) U3 s. L$ x# R4 J! b
6 a* l, T" B( O第2章 Vuejs介绍
8 Z4 [9 q" ]2 T从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化。
" K- S# j1 m6 X- t2 X7 F" D7 ?
( O# Y) n6 R- L- J6 N- \第3章 Vue-cli 开启 Vuejs 项目
4 g& V( |0 ~: h' O) q) _介绍 Vue 项目的脚手架,如何安装,对脚手架生成的目录文件做介绍,介绍 Vue 组件的编写方法,最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理。
! c0 T* O8 h0 J1 M U. `% H! Z4 V
' P( X: V- z. n. v+ \第4章 项目实战-准备工作0 Q5 J2 e0 m/ w' Y5 ], Q; q
分析外卖 APP 商家页面的需求,准备图片资源,利用 icon-moon 把 svg 制作成图标字体,对代码的目录结构设计,最后 mock 测试数据。1 p& m+ X. {. X; r- B% ]
( `, p$ V9 j" s; |5 J- { k! y第5章 项目实战-页面骨架开发! ]3 x* k) j; \: n" H* m
设计页面的骨架,拆分组件,商品、评论和商家详情页利用 Vue-router 做切换,最后还介绍了 flex 弹性布局以及移动端 1 像素 border 实现的小技巧。. L, @. W4 n0 ~1 ?
1 u x8 n, y! k1 Z' `# F2 d, j第6章 项目实战-header组件开发- l( B% b7 L) S
编写 header 头部组件,应用 Vue-resource 从服务端读取数据,介绍如何在 Vue.js 中使用过渡动画,如何编写 css sticky footer 布局,如何从需求中抽象出 star 星星组件。( p7 u; K' ~9 C: T5 a
6 H. h% G2 x" Z
第7章 项目实战-goods 商品列表页开发
) }6 r) {% h% ~' s, N9 V+ d! d* R编写 goods 商品组件,包括它的子组件 shopcart 购物车。介绍了如何在 Vue.js 应用第三方 JS 插件 better-scroll实现列表滚动,并配合 Vue.js 的计算属性来实现左右列表的联动。应用了自定义 Vue.js 过渡动画实现了购物车的飞入动画效果,介绍了在 Vue.js中父子组件如何通讯。...% s* e# a3 [/ `. {) J& ^' p
9 o8 r) O- v; ]9 }. i
第8章 项目实战-food 商品详情页实现' T% U8 J* E* @3 s
编写 food 商品详情页组件,介绍了图片占位的技巧,并从需求中抽象出的 split 分隔组件和 ratingselect 评论组件,实现自定义过滤器 datefilter。
3 E, b1 c( L0 D c
- {0 R8 m: v0 x' S6 _0 b4 Q- a0 `第9章 项目实战-ratings评价列表页实现) I1 |; R8 j6 @$ } U/ }# _5 `
编写 ratings 评价列表页,感受在 Vue.js 中复用组件的好处,实现快速开发。: V4 y# G0 v' n" R. s; a \8 |
: D$ P. B9 [( o, e第10章 项目实战-seller 商家详情页实现8 k, s9 F g* A% q+ U5 }& Q
编写 seller 商家详情页,实现一套通用移动端数据存取方案,以及对项目做一些体验上的优化。
! z D1 a l( G1 u! c, N) h# y3 v" X' G6 J0 l5 _- Y
第11章 项目实战-项目编译打包3 [, B$ R; ~2 @* O* q. l4 {! |) [
上线前的最后一步,编译打包Vue.js 项目。介绍了 webpack 编译时的配置,如何利用node.js 开启一个server本地调试。
' q! g5 M" g# {; R, F# f; C! [8 f% U" F& {% f' y) c8 |/ @
第12章 课程总结
5 P+ [% i6 h5 i7 [$ E对课程做总结,并列出了课程所提到的主要知识点的链接,作为课程的延伸学习。1 {& X% q9 X9 R( H7 N
9 n: [) K; g7 a/ h
下载地址: |
|