跳转到内容区

前端脚手架

脚手架是前端工程化的起步,本课程中重点探讨前端工程化在项目创建环节中的具体表现。

脚手架可以简单理解为用来自动帮我们创建项目基础文件的工具。看似很普通的需求,背后却饱含哲学,因为除了创建文件,它更重要的是提供给开发者一些约定或规范。

通常我们在开发相同类型的项目时都会使用一些相同的约定,其中包括:

  • 相同的文件组织结构
  • 相同的代码开发范式
  • 相同的模块依赖
  • 相同的工具模块配置
  • 相同的基础代码

这样一来就会出现在搭建新项目时有大量重复工作要做。脚手架工具就是用来解决此类问题的。我们可以通过脚手架工具快速搭建特定类型项目的基础骨架结构,然后基于这个基础结构进行后续的开发工作。

脚手架是前端工程化的起步,本课程中重点探讨前端工程化在项目创建环节中的具体表现。

适用人群

有一些简单前端开发经验,希望深入了解脚手架工具设计思想的同学

知识储备

  • 熟练使用 HTML、CSS
  • 掌握 JavaScript 语言基础
  • 了解 Vue.js 之类的框架更佳

学习目标

  • 了解脚手架工具设计思想
  • 了解常用的脚手架工具
  • 掌握通用脚手架 Yeoman 的开发和使用
  • 掌握 Plop 工具的使用
  • 理解脚手架工作过程的内部原理

课程内容

  1. 脚手架工具概要
  2. 常用的脚手架工具
  3. Yeoman 简介
  4. Yeoman 基础使用
  5. Sub Generator
  6. Yeoman 使用步骤总结
  7. 自定义 Generator
  8. 创建 Generator 模块
  9. 根据模板创建文件
  10. 接收用户输入
  11. Vue Generator 案例
  12. 发布 Generator
  13. Plop 简介
  14. Plop 的基本使用
  15. 脚手架的工作原理