在前端开发过程中，使用好的工具可以极大地提升我们的效率。npm 是一个非常优秀的包管理工具，能够帮助我们快速地安装和管理各种类库与工具包。在这个过程中，create-sagui-app 是一个值得推荐的 npm 包，可以为我们打造一个全栈 web 应用程序的项目架构，包括了前端 React 和后端 Node 的整合，这篇文章将带给您这一工具的详细使用教程。
安装 create-sagui-app
使用 create-sagui-app 前需要先安装它，打开您的终端并输入以下命令来实现：
$ npm install -g create-sagui-app
创建一个新项目
接下来，使用 create-sagui-app 来创建您的项目，我们首先需要创建一个新的目录并在其中输入以下命令：
$ create-sagui-app my-app
这个命令会在 my-app 目录中创建一个新的项目。在这个过程中，create-sagui-app 会问您需要使用的模板类型，您可以选择 Fullstack、API、Webapp/SPA、Parcel、Next.js 等模板。这里我们选择 Fullstack（全栈）模板，该模板支持使用 React 构建前端部分，并与后端部分使用 Node 整合在一起。
运行您的项目
完成项目创建后，进入项目目录并输入以下命令来启动应用程序：
$ cd my-app $ npm run dev
这会启动应用程序，同时会创建一个运行在 http://localhost:3000 上的本地 Web 服务器来为您提供这个应用程序。如果这个端口被占用了，create-sagui-app 会使用另一个可用的端口。如果您想在生产环境中运行您的应用，请使用 npm run build 命令来编译您的应用并将它部署到您的 Web 服务器上。
配置您的应用程序
create-sagui-app 支持自定义配置，如果您想更改一些应用程序的设置（比如应用程序中使用的环境变量或者端口号），您可以打开项目中的 sagui.config.js 文件并编写您的自定义配置。如果您需要自定义 Webpack 配置，您可以在项目根目录中创建一个名为 sagui.config.js 的文件，并在其中编写您自己的 Webpack 配置。
示例代码
这是一个简单的示例代码来展示您如何使用 create-sagui-app 响应式地构建一个颜色选择器组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- -------- ------------------ -
-- --------- --- -------------------
----- ----- ------- - ------------
----- ------------ -------------- - --------------
----- ----------- ------------- - -------------
-- ---------
-------- ------------------- ------- -
---------------------------
-- ---------------- -
---------------- ---- ----------- --------- ---
-
-
-- ----- --- --------
-------- -------------------------- -
------ ------------ --------------- ----------------
-
-- ---------
------ -
---- ------------------------
----
-------------------------------
-------- ---------------- -------------------------- --
--
------
----------------------------
------------
-------
---------
-----------
----------------- -- ------------------- --------
--
------
-----------------------------------
------------
-------
---------
------------------
----------------- -- ------------------- ---------------
--
------
----------------------------------
------------
-------
---------
-----------------
----------------- -- ------------------- --------------
--
------
--
-上面的代码展示了一个最简单的 React 组件，并使用 React Hooks 使它具有交互功能。使用 create-sagui-app，您可以快速地搭建一整个前端与后端完全整合的 web 应用程序以支持您的颜色选择器组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ee181e8991b448dc94b