大圣前端进阶指南
Return to top
On this page

Vue3 + Typescript + Vite4企业级实战

一个从入门到专家的Vue3企业级实战课程

什么是企业级的项目

课程亮点和收获

一次性学完Vue3进阶的项目和实战难点

让你拥有一个可以写入简历的项目和组件库

  • Vue3 全家桶入门
  • 企业级项目实战全流程
    • 企业级项目基建：规范，工程化，Typescript
    • 功能实现、复杂场景优化
    • 性能优化、发布部署...
  • 设计和开发自己的组件库
  • Vue3 生态框架一览 （Nuxt)

技术栈

课程架构

适合学员

0~5年经验的前端，希望构建前端核心竞争力

有一定的Javascript基础，想要深入Vue框架,成为Vue生态高手

提高面试成功率，进大厂

学习前提

  • 掌握基础的前端基础知识
  • 掌握ES6基础知识
  • 使用Vue开发过简单的项目
  • 有Node.js和Npm的使用经验

讲授方式

  • 从入门到实战 循序渐进
  • 理论和实战结合 体系化提升
  • 手写代码，力求让大家知其然也知其所以然

你将获得

  • 企业级的Vue项目实战
  • 企业级前端架构设计
  • 一个自己的Vue组件库 (类Element3)
  • 更高的前端视野 + 前端核心竞争力 + 良好的学习习惯
  • 一个可以写入简历的亮点的开源项目，不定期的简历点评， 让你面试游刃有余
  • 不定期加餐 （新框架 新技术)

详细大纲

  1. 开课介绍
  2. Vue3 技术栈介绍
    1. Vue实战 & 第一个Vue应用
    2. 什么是组件
    3. composition是什么
    4. 处理用户交互
    5. 事件处理
    6. script-setup语法
    7. Vue3 带来了什么
  3. Vue3 全家桶进阶
    1. 工程化工具Vite
    2. 路由机制 Vue-Roter
    3. 数据管理 Pinia
    4. AntDesignVue实战
    5. Vue进阶API
    6. 组件化进阶
    7. 封装自己的Hooks工具库
    8. 项目实战
    9. 项目打包
  4. 企业级实战
    1. 实现CRUD后，我们能做什么
    2. 性能如何提升
    3. 开发效率如何提高
    4. 如何提高开发质量
    5. 用户体验的提升
    6. 相关技术栈和工具介绍
  5. Vue和Typescript必知必会
    1. 为什么我们需要Typescript
    2. Typescript入门类型
    3. Typescript函数
    4. 宿主环境的类型
    5. Typescript泛型入门
    6. 好用的类型工具函数
    7. Vue中的Typescript
  6. 企业级项目规范搭建
    1. Vite + pnpm
    2. 代码规范
    3. 目录规范搭建
    4. 好用的脚本工具
    5. 工程化系统搭建
  7. 企业级项目实战
    1. 权限系统
    2. 大数据量如何渲染
    3. 大文件如何上传
    4. Vue前端性能优化
    5. 用户体验优化
    6. Vue前端监控
    7. 网络请求封装和优化
    8. 工程化Vite插件定制
    9. 自动化部署 CI / CD
  8. Vue3 组件库 （Element3)
    1. 组件库AntDesignVue学习
    2. 组件库设计概览
    3. 技术选型讨论
    4. 通用组件渲染 （Button，Layout
    5. 表单组件（Form,Input
    6. 弹窗组件（Modal,Notification
    7. 表格组件（Table
    8. 树形组件（Tree
    9. 组件库文档
    10. 组件库发布
  9. 新技术&框架探讨
    1. Nuxt3介绍
    2. Svelte
    3. 前端全栈框架
    4. Vue生态有意思的库（持续更新）
  10. 课程总结
    1. Vue进阶带来了什么
    2. 不定期面试提高
    3. 课程总结与回顾
    4. 头脑风暴

追求持续轻松的职业生涯