前言
前端开发中，快速生成项目结构是一个非常棘手的问题。手工搭建项目结构费时费力，而且容易出错。为了快速创建项目结构，我们可以使用 Yeoman，这是一个可扩展的项目脚手架工具，能够快速生成各种语言和框架的模板。
在本文中，我们将介绍如何使用 generator-tmpl，这是一个 Yeoman 的模板，可以帮助你快速生成前端项目结构。我们会讲解该模板的详细使用方法，并提供示例代码。
安装 Yeoman 和 generator-tmpl
在使用 generator-tmpl 之前，我们需要先安装 Yeoman。打开终端，输入以下命令：
npm install -g yo
然后，我们需要安装 generator-tmpl。打开终端，输入以下命令：
npm install -g generator-tmpl
使用 generator-tmpl
创建项目
在终端中输入以下命令：
yo tmpl
然后，你会看到以下提示：
? Project name: my-project ? Description: My awesome project ? Author: John Doe
在提示中输入项目名称、描述和作者，然后按回车键。
然后，你会看到以下提示：
? Which template would you like to use? 1. Basic (HTML, CSS, JS) 2. React app 3. Vue app 4. Angular app
在提示中选择要使用的模板（例如，选择 Basic 模板），然后按回车键。
generator-tmpl 将自动为你创建一个项目结构，包括 HTML、CSS 和 JavaScript 文件。
添加页面
生成项目结构后，你可以使用以下命令来添加页面：
yo tmpl:page
然后，你会看到以下提示：
? Page name:
在提示中输入页面名称，然后按回车键。
generator-tmpl 将自动为你创建一个新页面，包括相关的 HTML、CSS 和 JavaScript 文件。
添加组件
生成项目结构后，你可以使用以下命令来添加组件：
yo tmpl:component
然后，你会看到以下提示：
? Component name:
在提示中输入组件名称，然后按回车键。
generator-tmpl 将自动为你创建一个新组件，包括相关的 HTML、CSS 和 JavaScript 文件。
总结
通过使用 generator-tmpl，我们可以快速生成前端项目结构，并且可以轻松添加新页面和组件。这为我们的工作带来了极大的便利性。希望本文能够帮助你更好地使用 generator-tmpl，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd29d