一、脚手架工具的由来

脚手架工具是前端工程化的发起者。脚手架是我们前端开发再制作网页的时候，可以提前自动生成的骨架，也就是网页的基本结构，通过脚手架可以将我们网页的布局骨架给我们生成，我们直接再该基础上进行开发，可以提高我们的效率，省去很多时间。脚手架就相当于我们搭建房子，建筑，我们的基本架子，只有我们把大概的架子搭好，然后我们再锦上添花，进行搭建。

二、脚手架的作用

脚手架的作用就是创建项目基础结构、提供项目规范和约定。

三、项目基础结构

我们的项目基本结构就是如上图这样，app为项目名，fonts存放字体，images存放图片，scripts存放js代码文件，styles存放css代码文件，那么我们手动去创建这样一个结构，需要花费几分钟的时间，如果我们使用脚手架呢？通过一条命令就可以搞定，是不是很nice呢！

四、脚手架创建项目基本结构

五、脚手架的分类

脚手架分为：通用脚手架Yeoman和专用脚手架，例如我们三大流行框架 react、vue、angular。

我们学习通用脚手架，什么是通用脚手架呢？就是所有地方都能用的脚手架，后期呢我们再学习vue,react,angular框架的时候再去学习专用脚手架。

六、通用脚手架Yeoman

The web's scaffolding tool for modern webapps现代 web 应用程序的 web 支架工具。

七、Yeoman 的基本概念

• Yeoman 是一款脚手架工具

• 可以帮助开发人员创建项目的基础结构代码

• yo 是 Yeoman 的命令行管理工具

• 可以在命令行运行 yeoman 的命令

• 生成器：Yeoman 中具体的脚手架

• 针对不同项目有不同的脚手架（例如：网站，APP，小程序等）

Yeoman概念类比图

八、Yeoman 使用说明

注意：node版本必须要低版本，高版本会报各种错误，博主亲测！推荐12的版本，博主使用16版本报错，降低到12就好了。

全局安装yo命令：npm install --global yo

安装 generator命令：npm install --global generator-webapp

创建目录：mkdir project-name

进入目录：cd project-name

---------------------------注：以上创建目录和进入目录步骤可以手动完成-------------------------------

运行生成器命令：yo webapp

启动应用命令：npm run start

当输入启动应用命令后，会自动弹出如下页面

我们可以再app目录看到我们的基本结构了吧，是不是很方便的都帮我们自动创建好啦。网页也帮我们布局了一些，只需要再原有基础上修改文字就好啦~

（19）脚手架工具Yeoman相关推荐

大前端学习2-1__脚手架工具
脚手架工具脚手架工具脚手架工具介绍常用的及脚手架工具 Yeoman Sub Generator 常用的Yeoman使用步骤自定义Generator 根据模板生成文件接收用户输入 vue Ge ...
（42）Gulp在Yeoman脚手架工具中的应用
一.Gulp在Yeoman脚手架工具中的应用以 Webapp 生成器为例. 二.Generator-webapp 服务运行命令三.为什么要学习Gulp 我们看到如上图使用yeoman脚手架工具会自 ...
Vue 团队公开快如闪电的全新脚手架工具，未来将替代 Vue-CLI，才300余行代码，学它！...
1. 前言大家好,我是若川.欢迎关注我的公众号若川视野源码共读活动ruochuan12 想学源码,极力推荐之前我写的<学习源码整体架构系列>jQuery.underscore.lodas ...
ReactNative进阶（三十二）：前端构建工具--Yeoman
文章目录一.脚手架是什么二.Yeoman是什么? 三.Yeoman 优缺点 3.1 Yeoman 优势 3.2 Yeoman 的不足之处四.Yeoman生态五.安装 yeoman 六.使用 y ...
工程化以及脚手架工具
一.工程化概述 1. 工程化的定义的主要解决的问题前端工程化是指遵循一定的标准和规范,通过工具去提高效率,减低成本的一种手段.一切以提高效率,减低成本.质量保证为目的的手段都属于工程化,一切重复的工 ...
vue 引入的方法用在template_?【有手就行】轻松打造属于自己的Vue工程化脚手架工具...
前言为什么闲得蛋疼要自己做脚手架官方脚手架工具创建的项目不能马上进行搬砖? 每次创建新项目就得复制粘贴旧项目的配置再CRUD? 能不能自己造个劳资御用的个性化定制版脚手架? 以Vue举例来说,虽然 ...
Nodejs开发简单的脚手架工具
脚手架,这个名词对于作为前端的我们来说,也许并不陌生吧,像vue-cli,react-native-cli等,全局安装后,只需要在命令行中敲入一个简单的命令,便可帮我们快速的生成一个初始项目,如vue ...
使用 Node.js 开发简单的脚手架工具
前言像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我 ...
从零搭建前端脚手架工具
所谓脚手架其实就是帮助我们快速搭建项目的工具,通常只需要跑一个命令就可以帮助我们生成一个项目,让用户不需要再思考项目的目录结构,单元测试,所需要的依赖等繁琐的事情前言在实际的开发过程中,从零开始建 ...

（19）脚手架工具Yeoman