介绍
imicros-scripts 是一个基于 Node.js 的 npm 包，提供了一个开箱即用的架子，可以写出一些简单的前端应用程序。它是基于 react-scripts 的，但是在后期做了许多更新，使其更适合单页应用程序。
在本教程中，我们将介绍如何使用 imicros-scripts 来生成一个具有基本功能的单页应用程序，并为每种功能提供示例代码和说明。
安装
要使用 imicros-scripts，您需要先安装 Node.js，因为它是一个基于 Node.js 的 npm 包。下面是 Node.js 的官方下载链接：https://nodejs.org/en/download/
安装 Node.js 后，您可以使用以下命令来安装 imicros-scripts：
--- ------- -- ---------------
建立新项目
现在您已经安装了 imicros-scripts。要创建一个新项目，请使用以下命令：
--------------- ------ ------ -- ------ --- -----
这将创建一个名为 my-app 的新文件夹，并在其中创建一个基本的单页应用程序。它还将在浏览器中打开默认端口 3000 的开发服务器。
网页布局
与许多基于 React 的应用程序一样，imicros-scripts 遵循了一个具有顶部导航栏，边框栏和主要内容部分的基本布局。您可以在 src/App.js 文件中找到此布局的基本实现。
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
- -- -- ---- - ------------ -- -
---------
---- ------------------------
- -- ---- -- -
------
------- -----------------------
- -- ------ -- -
---------
------
--
-
------ ------- ----您可以在 header、div 和 footer 标记中添加自己的组件来实现自己的布局。
添加路由
要向您的应用程序添加路由，您需要使用 react-router-dom 库。请使用以下命令来安装它：
--- ------- ------ ----------------
然后，在 src/App.js 文件中，您可以使用以下代码来添加一个基本的导航栏和两个路由：
------ ----- ---- --------
------ ------------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
-------- ----- -
------ -
--------
---- ----------------
------- -----------------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
---------
---- ------------------------
--------
------ ----- ---------
----- --
--------
------ --------------
------ --
--------
---------
------
------- -----------------------
- -- ------ -- -
---------
------
---------
--
-
------ ------- ----在这个例子中，我们定义了两个路由 - '/' 路由匹配主页，'/about' 路由匹配关于页面。实际上，Home 和 About 对应的是两个组件，可以参考一下 这个官方文档 以了解更详细的内容。
添加样式表和图片
添加样式和图片时，您需要将它们添加到您的 src 文件夹中，并使用相对路径导入它们。
假设您有以下文件结构：
---- - ------- - --------
在 App.js 中正确导入要这样做：
------ ----- ---- --------
------ ------------ -- ------
------ ---- ---- ------------- -- ------
-------- ----- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- -- --- -- ---
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----构建项目
当您准备好在生产环境中启动应用程序时，您需要运行以下命令来构建应用程序：
--- --- -----
这会生成一个名为 'build' 的新文件夹，其中包含构建的应用程序。然后您可以把它们上传到 Web 服务器并在生产环境中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067380890c4f72775841e6