前言
在现代 web 应用开发中，前端框架和工具层出不穷，而且更新频繁。如何让自己的项目快速搭建和开发变得尤为重要。npm 包 generator-antjs 就是一种能够大大提高开发效率的工具。它是一个 Ant Design 的脚手架工具，可以创建基于 TypeScript 和 React 技术栈的项目，并提供了各种规范、配置和工具类，让你的项目开发更加规范和高效。
在本文中，我们将详细介绍 generator-antjs 的使用方法，帮助你了解如何使用这个工具来提高项目开发效率。
安装
npm 包 generator-antjs 提供了一键安装方式，即通过 npm 安装：
npm install -g yo generator-antjs
安装完成之后，就可以在命令行工具中运行 yo antjs 命令，创建一个新项目。
创建项目
初始化项目
首先，在需要创建项目的文件夹中打开终端窗口，运行下述命令：
yo antjs
这时，会出现一个命令行交互式工具，可以根据提示输入项目名称、项目描述、作者等信息。这些信息将在创建项目过程中用到。
接下来，将需要选择一些配置项，比如项目的安装选项、界面框架、状态管理器等。
运行项目
当项目创建完成后，运行以下命令启动开发：
cd [project_name] npm install npm run start
运行成功之后，就可以在浏览器中访问 http://localhost:3000/，查看项目运行情况。
代码结构
生成的项目代码结构相对较为简单，主要包含以下文件和文件夹：
-- -------------------- ---- -------
- ------------
- ------
- ----------
- ---
- ------
- ----------
- ------
- --------
- -----
- ----
- ---------
- -----------------
- -------------
- ------------
- ----------
- ---------------
- --------------
- -----------------
- ------------
- ---------
- -------------
- -----------------
- --------------
- ---------------可以看到， src 目录是我们日常开发中使用的目录，其中：
- assets 文件夹：存放项目中的静态资源，比如图片、样式文件等；
- components 文件夹：存放项目中的通用组件，减少重复开发；
- models 文件夹：存放项目中的数据模型，可供状态管理器访问和维护；
- services 文件夹：存放项目中的服务模块，包括网络请求、接口封装等；
- pages 文件夹：存放页面组件，其中每个页面组件包含一个 tsx 和一个样式文件。
使用示例
创建页面
创建一个新页面非常简单，只需要在 pages 文件夹下新建一个文件夹，然后在文件夹中创建名为 index.tsx 和 style.module.less 的文件即可。比如，创建一个名为 Contact 的页面：
cd src/pages mkdir Contact cd Contact touch index.tsx touch style.module.less
然后，编写 Contact 页面的 tsx 和样式文件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------------
------ ------- -------- --------- -
------ -
---- ---------------------------
----------- -------
--------- ----------------
--------- ---------------------------
------
--
-这里的 style.module.less 中的样式格式与 CSS 相同，只是采用了 CSS Modules 的方式来管理样式类名。这样做的好处是可以防止样式冲突。
-- -------------------- ---- -------
-------- -
----------- -------
-- -
---------- -----
-------------- -----
-
- -
---------- -----
-------------- -----
-
-使用组件
在使用组件时，需要将组件导入并在 JSX 中引用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------
------ ------ ---- ----------------------
------ ------- -------- ---------- -
------ -
---- ------------------------
----------- -- ----------
------- -------------- ------------ ----------- -- -----------------
----- --
---------
------
--
-这里我们引入了 Ant Design 的 Button 组件，并在 JSX 中使用了该组件。
使用服务
在使用服务时，需要在组件中导入服务模块，然后调用其方法。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----------- - ---- -------------------------
------ ------ ---- ----------------------
------ ------- -------- ---------- -
----- ---------- ------------ - -------------
------------ -- -
----------------------- -- -
------------------
---
-- ----
------ -
---- ------------------------
-------------
----
------------------ -- -
--- ------------------------------
---
-----
------
--
-在这里，我们使用了 getListData 方法，它是在 services/dataService.ts 中定义的。在 useEffect 中调用该方法，获取数据并渲染到页面上。
import { request } from "@/utils/request";
export async function getListData() {
const res = await request("/api/getListData", {
method: "GET"
});
return res?.data || [];
}这里的 request 是一个请求数据的工具类方法，它封装了 axios 实例的使用，可以方便地发起请求。
总结
通过本文，我们了解了 npm 包 generator-antjs 的使用方法，以及如何创建项目和使用组件和服务。generator-antjs 提供了一个便捷的 Ant Design 脚手架，帮助我们快速开发高效率的网页应用。在实际应用中，也可以根据自己的需要进行魔改，使其更符合自己的开发习惯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66ed