前言
generator-new是一个可以简化前端项目初始化的npm包。使用它可以快速搭建一个基础的前端项目架构，让我们可以专注于业务代码的编写，减少不必要的重复劳动。下面将详细介绍如何使用此npm包。
安装
首先，需要全局安装generator-new：
--- ------- -- -------------
安装完成后，就可以在命令行中使用yo new命令了。
使用
初始化项目
使用以下命令初始化一个新的项目：
-- --- ----------
其中，my-project是你的项目名称，可以根据需要进行修改。
在运行yo new my-project命令后，会出现以下提示：
- ----- --- ---- -- ------- ------ -- ---- -------- -----
这里会询问你是否需要在项目中包含jQuery，默认是Y，按回车即可。
然后会继续询问选择使用哪一个模板：
- ----- --- ----- --- ------- ---- ----- ----- - -- ---------- ------ ----- ------ ------------ --- ------- ------------
这里以React为例，选择后按回车即可。
运行命令后，generator-new将自动创建一个新的文件夹my-project，其中包含了一个基本的React应用程序的骨架代码。项目的目录结构如下：
---------- --- ------ - --- ----------- - --- ---------- - --- ------------- --- --- - --- ------- - --- ------ - --- ----------- - --- --------- - --- -------- - --- -------- - --- ---------------- --- ------------ --- ---------
定制化项目
除了选择使用内置的模板，也可以自定义自己的项目骨架，这里以React为例举例说明。
添加组件
在src目录中，可以创建自己的组件：
-- --------------- ----- ---------- -- ----------- ----- -------------
在HelloWorld.js中添加以下代码：
------ ----- ---- --------
-------- ------------ -
------ -
-----
---------- -----------
------
--
-
------ ------- -----------然后，在src/App.js中引入该组件：
------ ----- ---- --------
------ ------------
------ ---------- ---- --------------------------
-------- ----- -
------ -
---- ----------------
----------- --
------
--
-
------ ------- ----这样，在浏览器中打开http://localhost:3000/后，就可以看到Hello, world!这个组件了。
修改样式
在src目录中，可以创建自己的样式文件：
-- --------------- ----- ----------
在styles.css中添加以下代码：
------ - ---------- ----- ------ -------- -
在HelloWorld.js中引入该样式文件：
------ ----- ---- --------
------ ---------------
-------- ------------ -
------ -
---- ------------------
---------- -----------
------
--
-
------ ------- -----------这样，在浏览器中打开http://localhost:3000/后，HelloWorld组件中的文字就会变成36号字体、黑色。
打包项目
在开发、调试完成后，需要将项目打包成可部署的静态资源文件。
使用以下命令打包项目：
--- --- -----
打包完成后，build文件夹中就包含了打包后的静态资源文件。
总结
使用generator-new可以帮助我们快速搭建前端项目架构，简化项目初始化过程。同时，我们也可以根据自己的需求定制化项目骨架，以满足业务需求。希望这篇文章能够帮助您快速上手使用generator-new。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005622181e8991b448df7dc