Vue培训大纲的深度解析

Web作为全校中技能掌握难度最大的部门，培训目标就是让不是科班出身、没有编程基础的本科生在几个月内利用课余时间学习前后端全套开发技能，达到软件学院相关专业本科生的开发水平，独立完成相应方向的项目开发。

但是，Web多年来培训工作没有统一且明晰的进路，存在着不同负责人培训课风格差异大、技术之间衔接不够流畅、知识应用实际操作效果不好等一系列问题。

为切实提升培训质量、规范培训流程，山东大学“学生在线”兴隆山校区技术工程工作站Web分站和中心校区技术工程工作站Web分站的骨干成员，根据自身在前后端开发学习的经验和教训，纵览多个平台资料，借鉴业界最新成果，共同交流实战中各技术知识点的使用频率、商定常用功能的实现技巧，编写一套用于所在部门培训的教学大纲。

培训大纲参考资料主要是vue.js的官方文档，由于vue.js框架由华裔开发者尤雨溪（Evan You）开发，故其官方文档的中文版本的可读性非常高，基本同英文原版的文档相同。这为我们的工作提供了极大的便利。

比较难的地方其实还是合理分配培训的内容量。下学期培训时间少但vue.js的内容又多，如何在有限的时间内为参与培训的成员讲解重点内容，是我们安排培训大纲的重点和难点。

关于教授Vue的重要性。

Vue 作为最流行的 Web 前端框架之一，社区活跃，并且具有良好的中文文档支持，核心概念和知识点并不像 JavaScript、HTML、CSS 那样繁多，官方文档的 Guide 也比较适合新手入门，符合培训计划此阶段学员的水平，因此大纲基本按照官方文档 Guide 来组织，整个过程比较顺利，但也遇到了部分难点。

对于选择教授Vue2 还是 Vue3。

Vue3 发布于 2020 年 9 月，至今周边生态已发展良好，许多主流组件库、工具库、框架都已经支持 Vue3，但仍有一些偏门工具没有支持。大家都是学生，大概没有精力重复造轮子。但最终因为 Vue3 太好用了所以还是直接学 Vue3。

对于选择教授组合式 API 还是选项式 API。

经过讨论后，团队成员赞同两者都讲，先讲选项式，优先组合式。

对于工具链的选择。

最开始打算是选择历史悠久、生态繁荣的 Webpack，加上 vue-cli。但是现在 vue-cli 进入维护模式，不再推新，Vue 官方首选推荐使用 Vite，而且 Vite 的生态已经相当成熟，所以改用 Vite。Vite 对 Vue 支持优良，起手式简单，适合此阶段对 node 和 npm 生态尚未了解的学员。而且 Vite的确高效便捷。UnoCSS 用起来很舒适，不用费心调教 TailwindCSS 了；Vue 相关插件丰富，有 SSR、PWA 等一定程度支持；周边生态丰富，许多 Vue 框架也开始支持 Vite。

关于如何面对前端生态，怎么写项目。

这个阶段之前，学员只学习过前端三件套，所有的开发面向浏览器，组织代码的方式基本只教了像是浏览器标签引入 js，不使用模块，写全局作用域。

到了学习 Vue，要接触到 npm 生态，了解 Node.js， 学习包管理器的使用，学习怎么利用前端生态。这之间存在一个相当大的落差。Git 等工具的使用，工具链的配置，项目文件的组织，繁多且混乱，不好组织。由于本来规范就比较模糊，所以需要进一步明确。