内容简介# e3 D, S7 ]8 k; g+ d. T2 M& X
Vue作为前端框架的佼佼者，已经受到广大开发者的青睐，因为Vue的简单易用，使得更多后端开发者，或者非开发人员都能上手一二。本课程通过对100多位开发者调查反馈，用心整理了课程大纲，确保每一节课都会在清晰讲解主要主干知识的同时，穿插Vue基础和ES6/7/8等知识，同时还会介绍一些本人在多个项目开发中总结的经验。
) m$ {* p1 B. l- G7 p; E' F$ Z
本课程面对人群：
?* m; V' ` Q0 e2 R5 P. m1 }
对Vue最基础的知识有一定了解的开发者
对ES6+语法不了解但是想学习一些的开发者
有计算机使用基础的非开发人员: r2 e# M- L6 B! |3 C- [
想要开发Vue完整项目的人员
6 v; P/ j6 t6 Z
8 l7 W/ _4 n' e" C! ~. b
课程大纲：
, v2 H# u% W& U' j1 z0 [! c
1. Vue技术栈开发实战-使用vue-cli3创建项目
使用Vue UI创建、管理项目0 W8 u* A0 g% {
项目结构目录整理
初始文件添加( `, p2 G; u7 j7 f
基本配置详解
使用代理解决跨域$ Y1 O$ n/ H" h W0 s
2. Vue技术栈开发实战-路由基础篇) ~% [ l: e; A' l: P
Router-link和router-view组件/ g! q/ ^5 n5 x. b& X) }( G, ]3 l+ W8 m
路由配置1 u( x' S1 C2 v$ L+ x7 i' Z
i. 动态路由% u/ M5 v0 w; C, G$ ]
ii. 嵌套路由+ l+ g5 \3 }- {: k) r( C3 G, f' W
iii.命名路由6 Y! x* k) f. h0 i4 f* s
iv. 命名视图3 p" x9 D9 F; X4 z1 a7 ?& M( L
JS操作路由
重定向和别名9 ]* g: L+ M2 ]/ W. d" u' V
3. Vue技术栈开发实战-路由进阶篇
路由组件传参1 O* g+ x# y- m" [0 M
HTML5 History模式3 L- ^5 y7 b) U) e2 X
导航守卫 g, N$ Y1 y) Q y) e
路由元信息
过渡效果% N9 B" \ H: z9 o* l6 M6 f: T
4. Vue技术栈开发实战-状态管理bus的使用+ S& p, Q3 g- |" C
5. Vue技术栈开发实战-状态管理Vuex（一）
State3 G2 U7 V/ Q- F4 O. j0 g+ o, }' n
Getter, O' ^# M" ~4 @- I
6. Vue技术栈开发实战-状态管理Vuex（二）: j+ ]( T+ W8 h! K0 k2 v
Mutation9 @! k, {) t: i* x2 U
Action
Module
7. Vue技术栈开发实战-状态管理Vuex进阶1 {: @' _' n: U0 B3 n
Vuex插件的开发和使用3 R5 h$ ~+ s D3 h/ x( h; L' T
严格模式# d+ C7 x; X9 J5 }$ O( R$ }" S
Vuex+双向绑定5 E4 j5 g/ O& Q, Q" F; p4 ~' S0 H
8. Vue技术栈开发实战-Ajax请求实战
解决跨域问题
封装Axios# h; V4 T/ N! C% e, ]$ [/ F5 f5 W
i. 列表项目
ii.响应拦截5 M2 @/ h8 g/ u' [; ]
iii.队列管理
请求实战6 [2 @# P1 _/ {# @
9. Vue技术栈开发实战-使用Mock模拟Ajax请求8 ~& G; T( T5 C( c
响应模拟
Mock用法精讲
i. 数据模板8 |5 R7 b; A: d- |5 x a! k$ `
ii. Random方法大全
iii.占位符
10. Vue技术栈开发实战-Vue中第三方JS库的使用) t' R- O2 m N3 Y% X8 p
组件封装基础
组件中使用Id值
获取DOM或组件实例! I+ i/ t3 F1 U4 u. H
11. Vue技术栈开发实战-从SplitPane组件谈Vue中如何“操作”DOM9 K+ P, f% A7 p, o% l
简单两列布局
如何让两个div改变宽度$ Q# t/ R$ } x
鼠标拖动效果
v-model和.sync的用法/ }: z' Q# I# k* S5 A: T
12. Vue技术栈开发实战-渲染函数和JSX快速掌握
render函数
函数式组件
JSX/ [. I" x9 N r
作用域插槽/ u3 q: n) S; q! o
13. Vue技术栈开发实战-递归组件的使用
封装简单Menu组件
递归组件5 j8 o9 Q4 R8 n% Z w. n# c
14. Vue技术栈开发实战-登录/登出以及JWT认证
后端代码概览3 O( `2 q+ Q4 V! I; t
登录以及Token处理$ M& b6 k* {$ l. s# h
Token过期处理
退出登录
15. Vue技术栈开发实战-响应式布局- p7 e6 K+ ~- _. o. X" T4 r5 ]' [
Vue-cli3.0中使用iView
布局组件的使用
栅格组件实现响应式布局
16. Vue技术栈开发实战-可收缩多级菜单的实现
递归组件实战
v-if和v-show对比1 |8 k* ~# h& D6 X/ i. T
17. Vue技术栈开发实战-可编辑表格的实现7 A* v4 m4 f1 J
JSX进阶
iview表格实现单个单元格编辑表格
iview表格实现多单元格编辑表格
18. Vue技术栈开发实战-Tree组件实现文件目录-基础实现
iview - Tree实现Tree组件使用
扁平数据树状化
自定义组件结构
19. Vue技术栈开发实战-Tree组件实现文件目录-高级实现
封装文件目录组件6 p6 \! B @) ?& g$ U) {( X
操作目录: h4 ~$ @, a7 V) e- R; u
多个属性v-model替代方案
增加钩子函数 {+ O1 W# a' ]( j$ o1 w# H2 k% S7 X
20. Vue技术栈开发实战-文件上传前后端(Node.js)实现
Node.js服务
前端上传、下载
iview - Upload高级用法自行控制文件上传6 t4 f; W' J$ t0 `8 {& ]6 R6 y( R, I( Q
21. Vue技术栈开发实战-Form表单6 A' { |' ]- j5 g" u# _4 h
基础表单0 ` ]! O; M+ u; v; I3 {' |
动态组件+ Y$ P* p0 w. V1 f+ ~; i/ g4 g
iview - Form高级用法动态表单, K, O; V3 j( h8 }4 {, K
22. Vue技术栈开发实战-权限控制0 E, N. K# d8 U; l4 Q* V [1 g
简单权限方案 ~" Q$ H3 g) r: [9 W+ C
动态挂载路由2 C. B- Q1 B# K& _
页面和组件级别控制9 M$ T. Z( e6 |8 U9 O
23. Vue技术栈开发实战-Icon组件6 G- k, {! n8 r' t
Unicode&Symbol
font-class2 u4 k: J$ {& B+ f1 M
封装单色和多色Icon组件
24. Vue技术栈开发实战-大数据量性能优化% N0 Y9 C( x3 i1 `6 P6 E: X( Z
列表优化
大型表单优化* I5 m- m" v5 }: N s8 H' C
表格优化
25. Vue技术栈开发实战-多Tab页开发
根据路由列表生成菜单! q' U% l& w' w* T, z6 \7 ?
多标签实现! E6 _* ?9 h% P5 p% O3 C
菜单、URL和标签联动
26. Vue技术栈开发实战-项目部署
项目配置注意点( w' b$ i9 x b+ G& e4 i% H: q
Jenkins配置' @+ `2 m$ d1 i. A. \% U
Nginx配置 R. Q9 h- m- _5 S7 ^
提取码：nb9e
点击阅读原文提取
本文分享自微信公众号 - 会呼吸的Coder（BreathCoder）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
来源：oschina
链接：https://my.oschina.net/u/3358983/blog/4348995