在现代 Web 开发中，JavaScript 已经成为了不可或缺的一部分。随着 Node.js 和 Vue.js 的出现和成熟，使用 JavaScript 构建全栈应用已经成为了可能。本文将介绍如何使用 Node.js 和 Vue.js 构建全栈 JavaScript 应用。
Node.js 简介
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以让 JavaScript 代码在服务器端运行。相比于传统的服务器开发技术，Node.js 在性能、开发效率和可扩展性上都有很大的优势。使用 Node.js，我们可以轻松地构建高性能的 Web 应用、实时通信应用、API、CLI 工具等。
Node.js 中有很多流行的框架和模块可供选择，如 Express、Koa、Meteor 等。我们可以根据自己的需要选择适合自己的框架和模块。
Vue.js 简介
Vue.js 是一个渐进式 JavaScript 框架，专注于构建用户界面。它采用了 MVVM 架构模式，使用了虚拟 DOM 技术，支持组件化开发。Vue.js 界面渲染速度快，易于学习和集成到现有的项目中。Vue.js 官方也提供了许多插件和组件库，可以轻松地实现数据绑定、路由管理、状态管理等功能。
在本文中，我们将使用 Vue.js 实现前端界面，并通过 Node.js 提供 API 服务，构建一个全栈 JavaScript 应用。
准备工作
在开始之前，需要先安装好 Node.js 和 Vue.js。可以通过以下命令安装：
# 安装 Node.js curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs # 安装 Vue.js npm install -g @vue/cli
创建项目
我们可以通过 Vue.js 提供的命令行工具快速创建一个项目：
vue create my-app
在创建过程中，可以选择使用默认设置或手动配置各项设置。我这里使用了默认设置。创建完成后，进入项目目录并启动开发服务器：
cd my-app npm run serve
现在在浏览器中打开 http://localhost:8080，就可以看到 Vue.js 默认的欢迎页面了。
接下来，我们需要在项目中添加 Node.js 后端服务。我们可以使用 Express 框架来创建 API 服务。
首先，我们需要在项目根目录下创建一个 server 目录，并在其中创建一个 index.js 文件。在 index.js 中编写以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- --------------- ----- ---- -- - --------------- ---- ----- -- ---------------- -- -- - ------------------- --------- -- ---- ------ --
这段代码创建了一个 Express 应用，监听 3000 端口，并提供了一个 /api 路由，返回 Hello from API。
现在我们需要在 Vue.js 中调用这个 API，获得数据并渲染到页面上。
在 src 目录下创建一个 api.js 文件，并在其中编写以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
----- --------- - --------------
-------- ----------------------------
---------------- ------
-------- -
------- -------------------
--------------- ------------------
-
--
------ ------- -
----- -
------ ------------------
-
-这个文件使用了 axios 库，创建了一个名为 apiClient 的 HTTP 客户端，请求的基础 URL 是 http://localhost:3000/api。它还提供了一个 get 方法，用来请求 / 路由，获取 API 返回的数据。
现在我们需要在 Vue.js 中使用这个 API。打开 src/components/HelloWorld.vue 文件，修改代码如下：
-- -------------------- ---- -------
----------
---- --------------
------ --- -------
----- ------- ------
------
-----------
--------
------ --- ---- --------
------ ------- -
----- -------------
------ -
------ -
---- -------- -- ---- ------ -----
-------- --
-
--
--------- -
------------------ -- -
------------ - --------
--
-
-
---------这段代码使用了前面我们定义的 api.js，在组件创建时，调用 api.get() 请求数据，并将请求到的数据绑定到组件的 message 数据属性中。
现在重启开发服务器，打开 http://localhost:8080，就可以看到从后端获取到的数据了。
部署
在开发完成后，我们需要将应用部署到生产环境中。可以使用以下步骤将应用部署到 Heroku 上：
在 GitHub 上创建一个新的代码仓库，并将代码推送到仓库中。
在 Heroku 上创建一个新的应用。
在 Heroku 上的应用设置中，将 GitHub 与应用关联，选择要部署的代码仓库和分支。
在 Heroku 的部署选项中，选择允许自动部署，并选择需要自动部署的分支。
点击“Deploy”，等待部署完成。
通过 Heroku 提供的链接访问应用。
结语
本文介绍了如何使用 Node.js 和 Vue.js 构建全栈 JavaScript 应用。使用 Node.js 和 Vue.js，可以轻松地构建高性能、易于维护、易于扩展的应用。通过本文的学习，希望能对读者有所帮助，让大家更好地使用 JavaScript 开发 Web 应用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67948e8b504e4ea9bd921712