Tag: Vue
128 total results found
基于 Laravel Sanctum + Vuex + Vue 路由导航守卫实现 SPA 用户认证
为了简化流程，我们这里仅支持博客管理员登录并发布文章，也就是前面创建用户 ID 为 1 的测试账号，不提供普通用户的注册登录。 在...
基于 Laravel + Vue + Vuex 实现博客应用文章发布功能
Laravel 后端接口准备 既然是博客应用，肯定要支持文章发布功能。 我们先在 Laravel 后端 PostControll...
引入 Vuex Store 管理 Vue 组件数据状态的更新和获取
为了更优雅地管理页面组件的数据状态，你可以通过引入 Vuex 来存储和更新博客文章的数据信息。 封装 API 接口请求 学院君之...
通过后端接口返回数据渲染 Vue 页面组件并实现分页功能
整体思路 在上篇教程中，我们在 Laravel 后端编写好了文章相关 API 数据接口，接下来，还需要在 Vue 页面组件中通过这...
页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面
在上篇教程中，学院君给大家演示了单页面博客应用前端路由和页面布局的基本构建，不过由于没有应用任何 CSS 样式代码，所以 UI 界面...
页面布局（上）：基于 Vue Router 命名路由实现动态路由导航
我们依然以博客应用为例演示基于 Laravel + Vue 框架构建单页面应用。 页面布局模板 对于博客应用而言，除了首页和关于...
基于 Vue Router 构建单页面应用项目骨架
基于读者的反馈，希望多出一些高级进阶版的教程，所以后续学院君仍然会以后端进阶教程为主，不过单页面应用和相关项目作为全栈开发系列的收尾...
基于 TDD 模式编写 Vue 评论组件（下）：Axios 请求后端接口测试
在本篇教程中，学院君将以评论创建接口为例，演示如何在 Vue 组件中为通过 Axios 调用后端接口编写测试用例。 准备工作 后...
基于 TDD 模式编写 Vue 评论组件（中）：父子组件之间的通信测试
拆分评论列表组件 为了测试 Vue 父子组件之间的通信，我们需要将之前编写的评论组件拆分成两部分 —— 将评论列表拆分成独立的子组...
基于 TDD 模式编写 Vue 评论组件（上）：数据绑定和列表渲染
上篇教程学院君给大家演示了 Vue 组件测试套件（Vue Test Utils + Mocha + jsdom + Expect）的...
基于 Vue 测试套件引入 Mocha + Expect 测试 Vue 组件
Vue 测试套件 天下乌鸦一般黑，天下的单元测试流程也都差不多。 在 Vue 框架中编写单元测试的基本流程和学院君之前在 Lar...
基于 Flickity 在 Vue 中实现轮播图组件并设置简单的博客布局
准备工作 除了自己纯手工从头开始编写之外，还可以基于丰富的第三方 JavaScript 插件更快捷地编写 Vue 组件，这里学院君...
在 Vue 中实现拖放式图片上传组件
在上篇教程中，学院君给大家演示了如何基于 Laravel + Vue 框架快速实现图片上传并且给文章添加了封面图片功能。除了传统的点...
基于 Laravel + Vue 框架实现文件异步上传组件和文章封面图片功能
在今天这篇教程中，学院君将给大家演示如何基于 Laravel + Vue 框架编写一个基本的图片异步上传组件，并且带预览功能，然后把...
给 Vue 模态框组件的打开关闭添加过渡/动画效果
既然我们可以完全掌控模态框的打开和关闭了，不如给它加点过渡/动画效果，让用户体验更好一些，Vue 框架官方提供了组件渲染/隐藏的过渡...