【新版】Vue3 + TS仿知乎专栏企业级项目

很多人写 Vue3 项目，写到登录之后就卡住了：路由该不该拦、按钮该不该显示、刷新页面权限状态怎么不丢、不同角色看到同一页面为什么内容不一样。这些不是 API 会不会用的问题，而是你有没有真正把「权限」当成一条贯穿前后端的链路来设计。这门课用一个仿知乎专栏的项目，把这条链路从头走一遍。

先说清楚：这门课补的是哪块缺口

如果你已经能用 Vue3 写页面、会用组合式 API 拆组件，但遇到下面这些情况仍然要靠搜索拼凑，那这门课对你是对口的：

• 登录后拿到 token 和用户角色，但不知道在哪一层做判断，是路由守卫、组件内，还是请求拦截器；
• 知道有动态路由这回事，但菜单怎么根据权限生成、刷新后怎么恢复，一直没搞明白；
• Vuex 会写一点，但状态一多就乱，模块怎么拆、类型怎么标注全靠感觉；
• TypeScript 只是给变量加了类型，接口返回、store 状态、组件 props 之间的类型没打通。

换句话说，它不教你怎么写第一个 Vue 组件，而是教你把这些零件组装成一个别人能接手、自己能讲清楚的项目。

项目里真正被反复打磨的几件事

权限不是一处 if，而是一条链路

课程围绕「用户—角色—权限」这条线展开，重点在于把权限判断放到合适的位置：哪些放在路由层统一拦截，哪些放在组件层做细粒度控制，接口层又该怎么配合。仿知乎专栏的场景天然带有多角色和多级内容，正好能把「一登录就全放行」这种偷懒写法暴露出来。

路由控制与状态持久化的配合

动态路由的注册时机、菜单与路由表如何保持一致、页面刷新后权限状态如何恢复，这几个问题在实际项目里经常一起出现。课程把它们放在同一个流程里解决，而不是拆成互不相干的知识点。学完之后你应该能回答：为什么有些方案刷新就 404，问题出在哪一步。

TypeScript 在这里不是装饰

Vue3 加 TS 的组合，容易写成「用 TS 写 Vue2 的思维」。课程会涉及 store 模块的类型定义、接口数据的类型约束、组件间传参的类型校验。目的不是把类型写全，而是让类型在重构时真的能帮你挡掉错误。

看完应该能回答的问题

• 一个新用户登录后，从请求用户信息到页面渲染出可用菜单，中间经过了哪几步？
• 如果产品要求「编辑按钮只对作者本人可见」，这个判断你放在哪一层，为什么？
• Vuex 里存了用户权限，刷新页面后怎么保证不丢失又不产生闪烁？
• 路由守卫、请求拦截、组件内判断，这三者的职责边界你怎么划分？
• 项目里新增一个需要权限的页面，你需要改动哪些文件？

这些问题答不上来，说明权限部分还没真正过关；能答上来，面试时讲项目也不至于只剩「我用了 Vue3 和 TS」。

配套笔记怎么用

课程配有章节笔记，建议不要当讲义通读。更实际的做法是：跟着敲完一节，合上视频，自己用笔记里的要点复述一遍流程，再回到代码里验证。每完成两到三节，把当节涉及的类型定义和权限判断点整理成一份自己的小结。最后一步很关键——不看教程，独立把这个项目的权限链路重新实现一遍，能跑通多少算多少，卡住的地方就是你的真实缺口。

这门课不适合只想快速抄一个后台模板的人。它更适合愿意慢下来，把权限、路由、状态、类型这几件事想透的学习者。缺什么补什么，别假装什么都会，从你答不上来的那个问题开始看，效率最高。

做 Vue3 开发，绕不开权限管理和路由控制这些硬骨头。这套教程就是冲着这些实际痛点去的，基于新版 Vuex 和 Vue-Router 全家桶，带着你从零搭一个仿知乎专栏的企业级项目。

课程推荐

《【新版】Vue3 + TS仿知乎专栏企业级项目》做 Vue3 开发，绕不开权限管理和路由控制这些硬骨头。这套教程就是冲着这些实际痛点去的，基于新版 Vuex 和 Vue-Router 全家桶，带着你从零搭一个仿知乎专栏的企业级项目。【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（156 节）

*   1-1 课程介绍（导学 ）.mp4

*   1-2 代码库和在线文档使用注意事项（必看）.mp4

*   2-1 什么是 Typescript.mp4

*   2-3 为什么要学习 typescript.mp4

*   2-4 安装 typescript.mp4

*   2-5 原始数据类型和 Any 类型.mp4

*   2-6 数组和元组.mp4

*   2-7 Interface- 接口 初探.mp4

*   2-8 函数.mp4

*   2-9 类型推论 联合类型和 类型断言.mp4

*   2-10 枚举（Enum）.mp4

*   2-11 泛型（Generics） 第一部分.mp4

*   2-12 泛型（Generics） 第二部分 - 约束泛型.mp4

*   2-13 泛型第三部分 - 泛型在类和接口中的使用.mp4

*   2-14 类型别名，字面量 和 交叉类型.mp4

*   2-15 声明文件 第一部分.mp4

*   2-16 声明文件 第二部分.mp4

*   2-17 内置类型.mp4

*   2-18 配置文件.mp4

*   3-1 vue3 新特性巡礼.mp4

*   3-2 为什么会有 vue3.mp4

*   3-3 使用 vue-cli 配置 vue3 开发环境.mp4

*   3-4 使用 vite 创建项目.mp4

*   3-5 代码结构分析以及推荐插件安装.mp4

*   3-6 使用 eslint 规范代码.mp4

*   3-7 vue3 - ref 的妙用.mp4

*   3-8 更近一步 - reactive.mp4

*   3-9 vue3 响应式对象的新花样.mp4

*   3-10 老瓶新酒 - 生命周期.mp4

*   3-11 侦测变化 - watch.mp4

*   3-12 vue3 模块化妙用- 鼠标追踪器.mp4

*   3-13 模块化难度上升 - useURLLoader.mp4

*   3-14 模块化结合typescript - 泛型改造.mp4

*   3-16 Typescript 对 vue3 的加持.mp4

*   3-17 Teleport - 瞬间移动 第一部分.mp4

*   3-18 Teleport - 瞬间移动 第二部分.mp4

*   3-19  Suspense - 异步请求好帮手第一部分.mp4

*   3-20 Suspense - 异步请求好帮手第二部分.mp4

*   3-21 Provide - Inject.mp4

*   3-22 全局 API 修改.mp4

*   3-23 setup 语法糖  基础.mp4

*   3-24 setup 语法糖  进阶-.mp4

*   4-1 项目起航 需求分析.mp4

*   4-2 文件结构和代码规范.mp4

*   4-3 样式解决方案简介和分析.mp4

*   4-4 设计图拆分和组件属性分析.mp4

*   4-5 ColumnList 组件编码.mp4

*   4-6 ColumnList 组件使用 Bootstrap 美化.mp4

*   4-7 GlobalHeader 组件编码.mp4

*   4-8 Dropdown 组件基本功能编码.mp4

*   4-9 Dropdown 组件添加 DropdownItem.mp4

*   4-10 Dropdown 组件点击外部区域自动隐藏.mp4

*   4-11 useClickOutside 第一个自定义函数.mp4

*   5-1 web 世界的经典元素 - 表单.mp4

*   5-2 ValidateInput 第一部分 — 简单的实现.mp4

*   5-3 ValidateInput 第二部分 —抽象验证规则.mp4

*   5-4 ValidateInput 第三部分 — 支持 v-model.mp4

*   5-5 ValidateInput 编码第四部分 — 使用 $attrs 支持默认属性.mp4

*   5-7 ValidateForm 组件需求分析.mp4

*   5-8 ValidateForm 编码第一部分 - 使用插槽 slot.mp4

*   5-9 ValidateForm 编码第二部分 - 尝试父子通讯.mp4

*   5-10 ValidateForm 编码第三部分 - 寻找外援 mitt.mp4

*   5-12 ValidateForm 编码第四部分 - 大功告成.mp4

*   6-1 什么是 SPA（Single Page Application） 应用？.mp4

*   6-2 添加路由页面基础结构.mp4

*   6-4 vue-router 安装和使用.mp4

*   6-5 vue-router 配置路由.mp4

*   6-6 vue-router 添加路由.mp4

*   6-7 添加 columnDetail页面.mp4

*   6-8 状态管理工具是什么.mp4

*   6-10 Vuex 简介和安装.mp4

*   6-11 Vuex 整合当前应用.mp4

*   6-12 使用 Vuex getters.mp4

*   6-13 添加新建文章页面.mp4

*   6-14 Vue router 添加路由守卫 - 前置守卫.mp4

*   6-15 Vue router 添加路由守卫 - 使用元信息完成权限管理.mp4

*   7-1 前后端分离开发是什么.mp4

*   7-2 RESTful API 设计理念.mp4

*   7-3 使用 swagger在线文档查看接口详情.mp4

*   7-4 axios 的基本用法和独家后端API 使用（必看）.mp4

*   7-6 使用vuex action 发送异步请求.mp4

*   7-7 使用vuex action 发送异步请求第二部分.mp4

*   7-9 使用 async 和 await 改造异步请求.mp4

*   7-10 使用axios拦截器添加loading效果.mp4

*   7-11  Loader 组件编码第一部分 - 基本实现.mp4

*   7-12 Loader 组件编码第二部分 - 使用 Teleport 进行改造.mp4

*   8-1 登录第一部分 获取token.mp4

*   8-2 jwt 的运行机制.mp4

*   8-3 登录第二部分  axios 设置通用 header.mp4

*   8-4 登录第三部分 持久化登录状态.mp4

*   8-5 通用错误处理.mp4

*   8-6 创建 Message 组件.mp4

*   8-7 Message 组件改进为函数调用形式.mp4

*   8-8 了解 Vnode 以及 vue 的简单工作原理.mp4

*   8-9 创建 Vnode 以及使用 render function.mp4

*   8-10 使用 h 函数改造 message 组件.mp4

*   8-11 作业：注册页面的编写.mp4

*   9-1 上传组件需求分析.mp4

*   9-2 上传文件的两种实现方式.mp4

*   9-3 (打点 时间) Uploader 组件第一部分.mp4

*   9-4 Uploader 组件第二部分.mp4

*   9-5 Uploader 组件第三部分：自定义模版.mp4

*   9-6 改进路由验证系统.mp4

*   9-7 创建文章页面实现 Uploader 自定义样式.mp4

*   9-8 大功告成 创建文章最后流程.mp4

*   9-9 作业 完成文章详情页.mp4

*   10-1 添加编辑和删除区域.mp4

*   10-2 修改文章编码 第一部分 - 改进 Uploader 组件.mp4

*   10-3 修改文章编码 第二部分 - 改进 ValidateInput 组件.mp4

*   10-4 修改文章编码 第三部分 - 完成编辑功能.mp4

*   10-5 Modal组件编码.mp4

*   10-6 完成删除文章功能.mp4

*   10-7 集成 Easymde 编辑器 第一部分：简介，初步安装和使用.mp4

*   10-8 集成 Easymde 编辑器 第二部分：初步组件化-.mp4

*   10-9 集成 Easymde 编辑器 第三部分：暴露方法.mp4

*   10-10 集成 Easymde 编辑器 第四部分：结合页面完成功能.mp4

*   11-1 可以优化的两个点.mp4

*   11-2 完成帮助函数.mp4

*   11-3 将 store 中的数组转换成对象.mp4

*   11-4 防止重复请求逻辑分析.mp4

*   11-5 缓存优化 第一部分.mp4

*   11-6 缓存优化 第二部分.mp4

*   11-7 useLoadMore 实现分析.mp4

*   11-8 useLoadMore 编码.mp4

*   11-9 useLoadMore 在首页实践.mp4

*   11-10 useLoadMore 支持数据缓存 解决方案分析.mp4

*   11-11 实现分页缓存逻辑.mp4

*   12-1 生产环境和开发环境的异同.mp4

*   12-2 为生产环境生成代码.mp4

*   12-3 使用 vite 构建代码.mp4

*   12-4 vite 对阵 vue-cli：为什么快？.mp4

*   12-5 服务器的概念.mp4

*   12-6 nginx 概念简介.mp4

*   12-7 使用 gitee pages 进行部署.mp4

*   12-8 nginx安装和配置访问静态文件.mp4

*   12-9 nginx 配置代理服务.mp4

*   12-10 上传代码到云主机.mp4

*   13-1 Pinia 简介.mp4

*   13-2 安装 Pinia 以及第一个概念State.mp4

*   13-3 Pinia State 第二部分.mp4

*   13-4 Pinia Getter概念学习.mp4

*   13-5 Pinia Actions 概念学习.mp4

*   13-6 Pinia Setup方式创建 Store.mp4

*   13-7 Store 重新设计.mp4

*   13-8 Pinia 改造第一部分-修改 Global Store.mp4

*   13-9 Pinia 改造第二部分 - UserStore.mp4

*   13-10 UserStore 添加到应用：第一部分.mp4

*   13-11 UserStore 添加到应用：第二部分.mp4

*   13-12 Pinia 改造第三部分 - Column Store 的设计与编码.mp4

*   13-13 ColumnStore 编码第二部分：在应用中使用.mp4

*   13-14 重构 useLoadMore.mp4

*   13-15 Pinia 改造第四部分 - 分析 PostStore 的结构.mp4

*   13-16 完成 PostStore 编码.mp4

*   13-17 分析 PostStore 在应用中的功能点.mp4

*   13-18 Pinia 总结.mp4

*   14-1 课程总结.mp4