让接口变成页面。12 章从 Vite 工程化起步,讲到组件化、路由、Pinia、axios 封装、Element Plus,最后把「古典文学网」的四大模块做成一个完整的单页应用(SPA)。全程对接课程二写好的真实接口,不写一行假数据。
为什么用 Vue 3 而不是直接写 jQuery?因为现代前端要解决的核心问题是「数据和界面怎么同步」。传统写法里,你改了数据还得手动去改 DOM;Vue 的响应式让你只关心「数据是什么」,界面会自动跟着变。理解这一点,你就理解了为什么前端会演变成今天这个样子。
Node.js / npm / pnpm、Vite 创建项目、单文件组件 SFC、组合式 API、项目结构(hivue)。
插值 {{ }}、v-bind、v-on、v-model 双向绑定、表单处理。
computed、watch、格式化输出——把「派生数据」和「副作用」讲清楚。
v-if / v-else / v-show、v-for、:key、数组更新——作品列表就靠它。
onMounted 等生命周期、ref / reactive、自定义组合式函数(composables)。
props / emit / slot、父子通信、组件拆分与复用——页面的「积木」。
路由配置、动态路由、导航守卫、懒加载——单页应用怎么「换页」。
store 定义、state / getters / actions、用户状态持久化——跨组件共享数据。
axios 封装、请求/响应拦截器、Token 自动携带、Vite 跨域代理——前后端握手的地方。
表单、表格、分页、轮播图、Upload、Message / MessageBox 反馈——专业界面开箱即用。
首页 / 赏文学 / 书评 / 用户中心四大模块,对接真实后端接口,完成业务闭环。
vite build、环境变量、前后端联调排错——把开发成果变成能部署的静态文件。