Vue 3 应用开发系列课程，严重剧透！

Vue 3 发布以后，我重制了之前全系列的 Vue 课程，几乎可以覆盖 90% 你在开发复杂应用的时候需要的技术、工具、概念 ...   这是一套干系（不掺水）课程，也就是课程内容都是直击要害，用最清晰的方式展示与解释最核心的概念，尽量减小学习时的干扰，这种课程看起来不漂亮（几乎无样式），但是最有效。课程已全部录制完成，会陆续发布在宁皓网上。

现在学会使用 Vue ，除了可以开发出前端应用，还可以开发出各种平台的小程序。后面我打算再补上两节这样的课程，比如使用 uniapp 或者 Taro.js。您要有更好的选择，也欢迎您在评论区留言，制作课程的时候我会考虑加上 ：）

课程安排

1. 理解框架
2. 定义组件
3. 数据表单
4. 理解组件
5. 应用路由
6. 状态管理
7. 过渡动画
8. 组合接口
9. 网络请求
10. 验证身份
11. 文件上传
12. 应用架构

理解框架

• 整体了解一下用  Vue 框架创建的应用。
• 准备 Vue 项目的开发环境与工具（VSCode，Git，Node，NPM，Yarn）
• Vue CLI：项目的命令行工具
• 用 Vue CLI 创建一个 Vue 项目
• 运行 Vue 项目
• 了解 Vue 项目的结构
• 了解 Vue 应用的结构
• 了解 Vue 应用的组件（Components）
• 了解 Vue 应用的路由（Vue Router）
• 了解 Vue 应用的 Store（Vuex）
• VSCode：配置开发 Vue 应用
• 了解如何部署 Vue 应用

定义组件

创建应用实例，了解如何定义组件，在组件模板里使用 Vue 指令。

• 准备一个空白的 Vue 项目
• 创建 Vue 应用实例
• data：Vue 组件里的数据
• created：组件的生命周期方法
• methods：组件里的方法
• computed：组件里的计算属性
• watch：Vue 组件里的数据监视器
• v-on：处理 Vue 组件里发生的的事情（事件处理）
• v-for：在 Vue 组件里显示内容列表
• v-if：按条件显示内容
• 绑定 Class
• 在 Vue 组件里导入样式表文件

数据表单

了解如何在 Vue 组件里使用各种数据表单。

• 准备项目（forms）
• 文本框（Text）
• 多行文本（Textarea）
• 复选框（Checkbox）
• 多值复选框（Checkbox）
• 单选按钮（Radio）
• 选择列表（Select）
• input 事件：元素值变化时发生的事件
• change 事件：用户提交修改元素值时发生的事件
• keyup 事件：按下并抬起键盘按键时发生的事件
• 理解在表单元素上用的 v-model 指令
• v-model 的修饰符：.lazy
• v-model 的修饰符：.number
• v-model 的修饰符：.trim

理解组件

深入理解 Vue 组件，传递属性，触发事件，创建使用动态组件。

• 定义与使用 Vue 组件
• Vue 组件的样式
• scoped：限定组件样式的应用范围
• props：Vue 组件的属性
• 监听子组件的事件
• slot：在 Vue 组件里用插槽分发内容
• 动态组件（Dynamic Components）
• keep-alive：保持动态组件的活动状态
• $refs：引用模板
• 在自定义组件上使用 v-model
• Vue 组件的生命周期方法

应用路由

学会如何创建路由器，定义路由，访问路由地址，显示对应的 Vue 组件。

• VSCode：选择代码格式化工具
• 创建 Vue 应用的路由器
• 定义 Vue 应用的路由
• router-link：路由链接
• 用代码切换路由地址（$router.push 与 $router.replace）
• 给路由起个名字
• 重定向（Redirect）
• 路由模块
• 动态路由（带地址参数的路由）
• 嵌套路由（Nested Routes）
• 给路由组件传递属性
• 导航守卫（Navigation Guards）
• 路由元数据字段（meta）

状态管理

复杂的前端应用需要一套管理应用状态的方案，我们要学会的是基于官方提供的 Vuex 管理应用的状态。

• 在 Vue 应用里创建与使用 Store
• State：数据
• mapState
• Getters：获取器
• Mutations：修改器
• mapMutations
• Actions：动作
• mapActions
• 动作的 Context 参数
• 实践：加载状态
• modules：Vuex Store 模块
• namespaced：Vuex Store 模块的命名空间
• 创建与使用 Vuex Store 插件

过渡动画

组件元素进入与离开的时候，切换显示组件的时候，数组状态发生变化的时候，可以应用一种过渡与动画效果。

• 准备一个演示组件
• 基于 Class 的过渡
• 基于 Class 的动画
• transition：进入与离开过渡
• transition：指定过渡效果的名字
• transition：进入与离开动画
• transition：自定义过渡类
• 组件之间的过渡
• 列表的过渡与动画
• 状态的过渡

组合接口

组合式接口是 Vue 3 提供的一套新的创建组件的方法，理解一下 Vue 的反应系统与组合接口。

• JavaScript：Proxy 与 Reflect
• 理解 Vue 的反应系统
• Composition API：组合式接口
• 声明具有反应特性的数据（ref）
• 声明具有反应特性的数据（reactive）
• 解构反应数据（toRefs）
• 组合式接口：提供组件方法
• 组合式接口：生命周期方法
• 组合式接口：监视数据（watch）
• 组合式接口：计算属性（computed）
• setup：组合式接口的入口

网络请求

Vue 应用里需要的数据可以请求服务端接口获取到，也可以把用户在应用上生产的数据发送给服务端应用。

• 准备服务端应用接口
• 解决服务端跨域资源共享问题（CORS）
• 安装与使用 HTTP 客户端请求服务端接口（axios）
• 处理在 Vue 应用里使用 axios 发送请求时发生的错误
• 使用 async await 处理 axios 请求
• axios 请求的配置
• 修改 axios 默认的请求配置
• axios 的请求与响应的拦截器（Interceptors）
• 创建与使用 axios 实例
• 发送 POST 类型的 HTTP 请求
• 在请求里配置头部数据
• 发送 PATCH _ PUT 类型的 HTTP 请求（修改内容）
• 发送 DELETE 类型的 HTTP 请求（删除内容）

验证身份

实现基于 JWT（JSON Web Token） 的用户身份验证。

• 理解用户登录与验证用户身份
• 创建用户登录组件
• 请求用户登录接口
• 处理用户登录
• 获取当前用户数据
• 在 Vue 应用里记住用户的登录状态
• 退出登录

文件上传

把用户选择的文件上传到服务端应用。

• 选择文件用的文件字段
• 使用 FileReader 生成预览图像
• 请求上传文件
• 显示文件上传进度
• 使用拖拽的方式选择要上传的文件（dragover, drop）
• 切换拖放文件时的激活状态

应用架构

学会一套能应对复杂应用的结构，你可以基于这套应用结构开发出相对复杂的前端应用。

• 应用的数据管理（Vuex）：创建与使用 Store
• 应用的数据管理（Vuex）：定义使用 Store 模块
• 应用的数据管理（Vuex）：解决 Store 模块的类型问题
• 应用的路由：Vue Router
• HTTP 客户端（axios）：请求服务端应用接口
• Vue 应用的环境变量配置
• 在 Vue 应用里定义与使用组件
• 在 Vue 组件内部请求服务接口获取组件需要的数据
• 在 Vue 组件里使用 Store 里的动作与数据
• 内容页面：定义 Store 模块
• 内容页面：定义路由与组件
• Mixin：制作一个设置页面标题的混合

课程地址

https://ninghao.net/package/vuejs-javascript-framework

宁皓网 9 周年，真的很感谢您，现在订阅全年多送一年，续订或重订多送两年。马上订阅 →