在前端开发中，快速生成一个基础的项目结构是非常有必要的。此时，我们就可以使用 npm 包 generator-web-vanilla 来帮助我们快速生成搭建我们需要的项目。
什么是 generator-web-vanilla？
generator-web-vanilla 是一个基于 Yeoman 的 npm 包，它可以帮助我们快速生成一个基础的 HTML、CSS、JS 项目结构。使用了这个包以后，我们可以快速获得一个干净且模块化的项目结构，进而更好的去编写我们的代码。
安装
在开始之前，我们需要先安装 Yeoman 和 generator-web-vanilla：
npm install -g yo generator-web-vanilla
安装完成以后，我们就可以使用 yo web-vanilla 来初始化我们的项目。
如何使用
使用 generator-web-vanilla 很简单，下面是使用它的步骤：
步骤 1：初始化项目
yo web-vanilla
运行此命令后，我们将能够获取基本的项目结构。在整个安装过程中，您需要回答一些问题，以在您的项目中设置所需的配置详细信息。
步骤 2：安装 npm 依赖项
npm install
然后，我们可以通过运行上述命令来安装我们项目所需的所有 npm 依赖包。
步骤 3：启动项目
npm start
这个命令可以帮助我们启动本地服务器，并在浏览器中打开一个示例站点。
步骤 4：构建
npm run build
最后，我们可以通过运行上述命令来构建我们的项目，以使它生产使用。
示例代码
下面是一个基于 generator-web-vanilla 的示例代码：
index.html
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
------------------------
----- ---------------- -------------------- --
-------
------
--------- ----------
------- --------------------------
-------
-------css/style.css
-- -------------------- ---- ------- ---- - ------- -- -------- -- - -- - ---------- ---- ------------ ---- ----------- ------- ------ ----- ----------- ---- -
js/main.js
console.log('Hello World!');结论
generator-web-vanilla 是一个非常有用的 npm 包，可以帮助我们快速生成一个基础的 HTML、CSS、JS 项目结构。通过这篇文章的介绍和示例代码，相信您已经能够迅速上手使用了，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597781e8991b448d6fcd