课程简介
Vue.js一款用于构建Web界面，易学易用，性能出色且功能丰富的框架，也是前端开发的最主流框架之一。Vue.js既是一个框架，又有一整套的生态，功能覆盖了大部分前端开发常见的需求。但 Web世界又是十分多样化的，我们在Web上构建的东西可能在形式和规模上有很大不同。考虑到这一点，Vue被设计成具有灵活性和可逐步集成的特点。根据你的需求场景，Vue可以按不同的方式使用。所以围绕着Vue的前端架构也有多种选择。
本课程是以讲解为主，全方位讲解目前Vue生态圈里主流的构建工具Vite、Vue CLI和相关的兼容性处理方案，在代码质量治理方向，则会讲解ESLint、TypeScript、测试框架以及调试工具。从各个方面和角度去解析Vue.js应用的前端架构设计。
课程收益
1、快速了解和熟悉Vue.js开发、构建的基础知识以及调试工具；
2、熟悉并掌握企业中常用的Vue.js代码质量保证体系，包括ESLint和TypeScript等；
3、了解Vue.js框架实现细节，测试以及调试工具。
受众人群
1、有一定js基础或者对前端新技术感兴趣：
2、技术主管、架构师、各个阶段的前端开发、喜欢前端的后端开发、全栈开发。
课程周期
1天（6H）
课程大纲
标题 | 授课内容 | 课程要点 |
一、工程化/构建 | 1、概念、工具介绍 | 1) Vue 单文件组件 2) Webpack 与 Vue CLI 3) Vite 4) Vue DevTool 5) 其他工具…… |
2、Vite | 1) 初识 Vite 2) 目录结构介绍 3) 环境变量、开发服务器、构建介绍 4) 拓展功能（样式、资源文件、Glob import） 5) 常用 Vite 插件 6) 自定义 Vite 插件与调试 7) 常见问题：CommonJS 兼容性问题处理、开发与构建不一致的问题处理 | |
3、Vue CLI | 1) …… 参考 Vite 部分目录 2) Vue CLI 项目迁移至 Vite | |
4、兼容性 | 1) 语法编译与 Polyfill 的区别 2) core-js、regenerator-runtime、babel 介绍 3) 常见的 Polyfill 策略，以及如何选择 4) 基于 Webpack / Vue CLI 的兼容性处理 5) 基于 Vite Legacy Plugin 的兼容性处理 6) 针对小众浏览器的兼容性处理思路 7) Node.js Polyfill | |
二、代码质量治理 | 1、ESLint | 1) ESLint 发展现状 2) eslint-plugin-vue 介绍 3) 在新旧项目中的应用思路 选择适合的风格指南 常见风格错误 如何渐进治理已有项目 |
2、TypeScript | 1) Volar 与 vue-tsc 2) 项目配置指南 l @vue/tsconfig l Solution-style tsconfig 3）Options API 的类型实践 4）Composition API 的类型实践 5）<script setup> 中的 TypeScript 类型应用 | |
3、测试 | 1) 测试类型：单元测试、集成测试 2) 单元测试 l 工具介绍：Mocha、Jest、Vitest l 常见概念：Mock、Spy、Snapshot、断言库、覆盖率 l Vue Test Utils 介绍、Vue 组件测试介绍 l 以 Vitest 为例的简单例子 l 衡量单元测试对项目的帮助 3）集成测试 l 工具介绍：Cypress、Playwright、Puppeteer、WebDriverIO、Nightwatch l 常见概念和模式：复习单元测试部分提到的内容，以及网络请求处理、项目组织、视觉回归等概念…… | |
4、调试工具 | 1) Vue DevTools 的介绍、安装与基本使用 2) 使用 DevTools 调试组件、事件 3) 使用 DevTools 调试 Pinia、vue-router 等 |
京ICP备2022035414号-1
