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

这门课的名字里有个词得先拆开看：「企业级」。它不是说内容有多高深，而是说这个仿知乎专栏的项目里，会碰到真实团队里那些绕不开的麻烦事——登录之后谁能看什么、刷新页面权限还在不在、路由跳转前该拦谁。如果你只是想快速做个能跑的页面，这门课可能会让你觉得慢；如果你想弄明白一个中后台系统到底是怎么把权限串起来的，它的节奏是合适的。

先看哪几讲：从路由和状态管理切入

这套教程的主线是 Vue3 加 TypeScript，配新版 Vuex 和 Vue-Router。我的建议是不要从第一讲老老实实按顺序啃。先跳到讲路由配置和状态管理的那几讲，把「一个页面在什么条件下能被访问」这件事看明白。原因很直接：后面的专栏列表、文章编辑、用户信息展示，基本都是在这套权限骨架上挂内容。骨架不清楚，越往后越容易变成抄代码。

如果你对 Vue3 的 setup 语法和 ref、reactive 还不熟，那还是得先补前面几讲的基础部分。不用全看，看到能自己写出一个带响应式数据的组件就够了。

哪些章节可以跳，哪些不能跳

可以快速扫过的：纯样式和布局的章节。仿知乎专栏的界面部分，跟着敲一遍就行，不需要逐行理解每个 CSS 值。UI 细节不是这门课的重点，你完全可以在自己的项目里换成别的样子。

不能跳的，是这三块：

• 登录态怎么存、怎么在刷新后恢复。这是权限的地基。
• 路由守卫里怎么做判断，以及判断失败时往哪里跳。
• TypeScript 在接口和状态里的类型定义。跳过它，你会一直在 any 里打转。

TypeScript 这部分我要多说一句：如果你之前没怎么用过 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