在前端开发过程中，我们经常需要使用工具来生成一些项目结构或者代码模板。这时候，npm 包成为了我们不可或缺的工具之一。其中，generator-contcomp 就是一个非常好用的 npm 包，它可以快速生成一个用于比较的项目结构，并为我们提供了许多便捷的功能。
什么是 generator-contcomp？
generator-contcomp 是一个 Yeoman Generator，它用于生成一个针对比较任务的项目结构，可以一键快速生成一个用于比较的前后端分离应用。同时，它还为我们准备了许多基础设施和比较功能，可以极大地提高我们的开发效率。
安装与使用
使用 generator-contcomp 前，需要先安装 Yeoman 和 generator-contcomp。在命令行中输入以下命令进行安装：
npm install -g yo npm install -g generator-contcomp
安装完成后，在需要创建项目的目录中运行以下命令：
yo contcomp
按照提示输入相应的信息，生成模板项目结构。
模板结构介绍
生成的模板项目结构如下：
-- -------------------- ---- ------- - --- ------- - -------- - --- ------ - -------- - --- ------------ - ---- --- ----- --- -------- - ------ - --- ------ - ------ - --- --- - ------ - --- ------------ - -- --- ----- --- ---------- - --- ------ --- --------- - ------ --- ------------------- - ------ ----
其中，backend 目录为后端代码目录，frontend 目录为前端代码目录。在生成的模板项目中，前后端分离，通过 RESTful API 进行数据交互。
常用命令
在生成的模板项目中，我们可以使用一些常用的命令来进行开发和调试：
npm run dev: 同时启动前端和后端服务，并支持实时热更新。npm run build: 构建前端代码。npm run start:backend: 启动后端服务。npm run start:frontend: 启动前端开发服务器，支持实时热更新。
示例代码
在此，我们以使用 generator-contcomp 生成的模板项目为基础，演示一下如何搭建一个前端与后端交互的简单应用。
1. 新建一个 API
首先，在后端代码目录 backend/ 中新建一个 API，我们可以在 backend/app.js 中添加以下代码：
app.get('/api/hello', function(req, res) {
res.send('Hello World');
});这个 API 所使用的路径是 /api/hello，它返回的数据是字符串 Hello World。
2. 调用 API
接下来，在前端代码目录 frontend/src/App.vue 中，我们可以添加一个按钮，用来触发调用后端的 API，并将返回结果显示在页面上。修改后的代码如下：
-- -------------------- ---- -------
----------
---- --------------
------ --- -------
------- ------------------------- ------------
---- -------------------- --------- --------
------
-----------
--------
------ ------- -
----- -------------
----- -------- -- -
------ -
---- -------- -- ---- ------ -----
----------- ------
---------- ---
--
--
-------- -
-------- -------- -- -
-------------------
-------------- -- ----------------
------------ -- -
--------------- - -----
-------------- - -------
---
-
-
--
---------这段代码定义了一个按钮，当用户点击按钮时，通过 fetch 方法调用后端 API，将返回结果显示在页面上。
3. 运行程序
在完成以上代码修改后，我们需要在命令行中运行以下命令启动程序：
npm run dev
然后，访问 http://localhost:8080/，点击按钮即可发起对后端 API 的调用，返回结果将会显示在页面上。
总结
通过本文的介绍与演示，我们了解了 npm 包 generator-contcomp 的使用方法，并通过示例代码演示了如何使用它生成一个前后端交互的项目结构，并搭建了一个简单的应用。在日常开发中，我们可以使用它来快速构建项目结构，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005603581e8991b448de63e