码上问学问代码之理,学编程之道

课程三 · Vue 3 前端开发

让接口变成页面。12 章从 Vite 工程化起步,讲到组件化、路由、Pinia、axios 封装、Element Plus,最后把「古典文学网」的四大模块做成一个完整的单页应用(SPA)。全程对接课程二写好的真实接口,不写一行假数据。

课程三最有成就感的一刻:当你在 Vue 页面里写下第一个 axios.get('/api/article/list'),然后看到数据库里的唐诗真的渲染到了页面上——那一刻,前面两门课的所有铺垫都会连成一条线。这就是里程碑 M4。

为什么用 Vue 3 而不是直接写 jQuery?因为现代前端要解决的核心问题是「数据和界面怎么同步」。传统写法里,你改了数据还得手动去改 DOM;Vue 的响应式让你只关心「数据是什么」,界面会自动跟着变。理解这一点,你就理解了为什么前端会演变成今天这个样子。

12 章导航

48 学时 · 理论 16 + 上机 32

第 1 章 · 前端工程化与 Vue 起步

Node.js / npm / pnpm、Vite 创建项目、单文件组件 SFC、组合式 API、项目结构(hivue)。

NodeViteSFC

第 2 章 · 模板语法与指令

插值 {{ }}、v-bind、v-on、v-model 双向绑定、表单处理。

v-bindv-model表单

第 3 章 · 计算属性与侦听器

computed、watch、格式化输出——把「派生数据」和「副作用」讲清楚。

computedwatch

第 4 章 · 条件渲染与列表渲染

v-if / v-else / v-show、v-for、:key、数组更新——作品列表就靠它。

v-ifv-for

第 5 章 · 生命周期与组合式函数

onMounted 等生命周期、ref / reactive、自定义组合式函数(composables)。

生命周期composable

第 6 章 · 组件化开发

props / emit / slot、父子通信、组件拆分与复用——页面的「积木」。

propsemitslot

第 7 章 · 路由 Vue Router

路由配置、动态路由、导航守卫、懒加载——单页应用怎么「换页」。

Router守卫懒加载

第 8 章 · 状态管理 Pinia

store 定义、state / getters / actions、用户状态持久化——跨组件共享数据。

Pinia状态持久化

第 9 章 · axios 与跨域 重点

axios 封装、请求/响应拦截器、Token 自动携带、Vite 跨域代理——前后端握手的地方。

axios拦截器代理

第 10 章 · Element Plus 组件库

表单、表格、分页、轮播图、Upload、Message / MessageBox 反馈——专业界面开箱即用。

Element Plus表格分页Upload

第 11 章 · 项目前端实战 收口

首页 / 赏文学 / 书评 / 用户中心四大模块,对接真实后端接口,完成业务闭环。

四大模块业务闭环

第 12 章 · 打包构建与联调

vite build、环境变量、前后端联调排错——把开发成果变成能部署的静态文件。

构建环境变量排错

课程配套

前后端怎么对上号

API 接口文档

前端每个页面调哪个接口、传什么、返回什么,都能在这里查到。

联调依据

hivue 项目骨架

Vite + Router + Pinia + Element Plus + axios 封装都已配好的前端骨架。

开箱即用

综合实战

学完本课后,进入综合实战把前后端真正合体、部署上线。

部署上线