Vue.js 入门到实战教程

本系列教程涵盖 Vue 基础语法、组件开发、代码测试、以及如何基于 Vue + 后端 API 接口构建单页面应用，希望通过这个系列的学习，可以帮助你快速上手 Vue.js 开发。

基础语法篇

• 数据绑定的基本实现和代码分析
• 使用 Vue.js Devtools 作为调试工具
• 列表渲染的基本使用和动态调整
• 事件监听和异步处理实现示例
• 属性和类名绑定的使用示例
• 通过计算属性动态设置属性值

组件入门篇

• 快速入门：基本使用和组件嵌套
• 组件通信：父子组件之间的数据传递和事件监听
• 组件插槽：父子组件之间的内容分发和插槽作用域
• Vue Loader 篇（上）：基于 Vue CLI 初始化原型项目
• Vue Loader 篇（下）：编写一个单文件 Vue 组件
• 在 Laravel 项目中编写单文件 Vue 组件
• 通过 Axios 发送 Ajax 请求获取接口数据渲染组件

组件实战篇

• Laravel 组件开发快速入门（上）：基于 Inertia + Vue 技术栈编写表单组件
• Laravel 组件开发快速入门（下）：基于 Livewire + Blade 技术栈编写表单组件

以下开始介绍如何在 Laravel 8 中基于纯 Vue 框架编写表单组件：

• 前奏篇（一）：ES2015 新特性一览
• 前奏篇（二）：Tailwind 与 Bootstrap 的区别和使用入门
• 在 Laravel 中基于 Vue + Bootstrap 快速开发表单组件
• 通过 ES6 新语法对 Vue 表单组件进行面向对象重构
• 通过 props 和 Vue 原型实例在不同组件间共享数据状态
• SOLID 原则在 Vue 组件开发中的应用：将单个表单组件拆分成可复用的子组件组合
• 基于子组件构建列表组件并实现视图模式切换功能
• 通过 Vue 过滤器对模型属性值进行格式化
• 基于 Laravel 8 模型工厂快速生成后端接口测试数据
• 基于 Laravel + Vue 组件实现文章发布、编辑和浏览功能
• 基于 Bootstrap + Vue 框架编写模态框组件并完成文章删除功能
• 为 Vue 模态框组件的打开关闭添加过渡/动画效果
• 基于 Laravel + Vue 实现文件异步上传组件和文章封面图片功能
• 在 Vue 框架中实现图片拖放上传组件
• 基于 Flickity 在 Vue 中实现轮播图组件并设置简单的博客布局

测试驱动开发

注：由于 SPA 中会使用 TDD 模式开发，所以先介绍 Vue 组件单元测试。

• 引入 Vue 测试套件 + Mocha + jsdom + Expect 测试 Vue 组件
• 基于 TDD 模式开发评论组件（上）：数据绑定和列表渲染
• 基于 TDD 模式在 Laravel 项目中开发后端评论接口
• 基于 TDD 模式开发评论组件（中）：父子组件之间的通信测试
• 基于 TDD 模式开发评论组件（下）：Axios 请求后端接口测试

构建单页面应用（SPA）

• 通过 Vue Router 初始化单页面应用项目骨架
• 页面布局（上）：基于 Vue Router 命名路由实现动态路由导航
• 页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面
• Laravel 后端博客文章数据相关 API 接口提供
• 通过后端 API 接口返回数据渲染 Vue 页面组件并实现分页功能
• 引入 Vuex Store 管理 Vue 组件数据状态的更新和获取
• 基于 Laravel + Vue + Vuex 实现博客应用文章发布功能
• 基于 Laravel Sanctum + Vuex + Vue 路由导航守卫实现用户认证

项目作业：自行实现用户反馈表单提交 & 后端处理代码，前端基于 Vue 表单页面组件实现，后端除了基本的表单验证，数据库存储之外，还要实现事件监听和异步队列处理邮件发送功能。

更多实战项目

• 全栈工程师系列实战项目

订阅服务

如果你觉得这个系列教程对你学习有帮助，可以选择升级为学院君订阅用户对学院君进行支持：

立即升级为学院君订阅用户