这门课盯的是哪几个真问题
面试时被问到「你们项目的权限是怎么做的」，很多人只能答一句「后端返回菜单，前端渲染」。再往下追问动态路由怎么加、按钮级权限怎么控、刷新页面权限丢失怎么办，就答不上来了。这不是背八股能补的，得真的动手写过一遍。
这套教程选的是仿知乎专栏这个题材，好处在于它天然自带一套完整的权限模型：游客能看文章列表，登录用户能写文章、编辑自己的内容，管理员能审核和管人。角色不同，看到的菜单、能进的页面、能点的按钮都不一样。这比拿一个纯展示型项目练手要扎实得多，因为你要处理的是真实业务里最绕的那部分逻辑。
学完能独立做出什么
按课程推进下来，你应该能独立完成一个带登录态、带角色区分的中后台前端。具体来说，能自己设计路由表并按权限动态挂载，能封装请求拦截统一处理 token 失效，能用状态管理把用户信息和权限数据在多个页面间流转，能处理刷新后权限重建这类边界情况。这些能力不是停留在「知道有这个东西」，而是你亲手踩过坑、调过 bug 之后留下来的。
另外值得说的一点是 TypeScript 的介入方式。项目里接口返回、组件 props、状态数据结构都要有类型约束，写的时候会别扭，但正是这种别扭能帮你养成先想清楚数据结构再写逻辑的习惯。这个习惯带到任何前端项目里都值钱。
资料适合什么基础的人
不适合零基础。如果你还没写过组件、不知道什么是响应式、没碰过 npm 装包，直接上这套会比较痛苦，建议先去补 Vue3 组合式 API 的基础写法。适合的是这样一类人：已经能用 Vue 写页面，做过一两个练手项目，但对工程化组织方式没概念，不知道怎么把一堆组件和接口拼成一个像样的应用。转行者如果已经过了语法关，也可以拿来当第一个能写进作品集的项目。
怎么用这套资料效率更高
- 别只看不写。这类项目课最大的坑是「看懂了」，视频里一行行跟着敲和关掉视频自己重写一遍，效果差好几倍。
- 章节笔记适合在两个时间点翻：一是学完当天做小结，二是面试前把权限和路由这两块单独过一遍，这两处是面试高频区。
- 做到权限模块时，可以自己加需求。比如加一个「编辑」按钮，只让作者本人看到，试试能不能不查资料做出来。能独立加需求，说明真掌握了。
- 最后留出时间完整复现一遍。不看教程，从建项目开始，卡住了再回去查。这一遍走完，才算真正变成你自己的东西。
一句实话
这套课不便宜你的时间——它需要你坐下来认真写代码，不会有那种「三天速成」的爽感。但如果你正卡在「会写页面但做不出完整项目」这个阶段，它给的东西是对症的。判断标准很简单：学之前你面对一个空项目会发怵，学之后你能自己规划出目录结构和路由分层，那这钱和时间就花得值。
做 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
