前端开发越来越受到关注，因为浏览器的能力变得越来越强大，而且世界各地都有更快速的网络连接。这导致越来越多的人在服务器端使用 JavaScript 来处理请求和响应。
在本文中，我们将深入了解如何使用 Hapi.js 和 Vue.js 构建服务器端网站。我们将从头开始建立一个简单的服务器端网站，并在过程中讲解一些基本的概念和技术。最后，我们会得到一个可扩展和易于维护的服务器端网站。
什么是 Hapi.js
Hapi.js 是一个开源的 Node.js 框架，它专注于构建伸缩性高、可靠性强的 Web 应用程序和服务。Hapi.js 旨在提供足够的特性以便构建大型应用程序，同时也便于使用和学习。
以下是 Hapi.js 的一些特点：
- 路由
- 错误处理
- 插件系统
- 视图处理
- 缓存
- 安全
什么是 Vue.js
Vue.js 是一种基于组件的渐进式框架，用于构建 Web 用户界面。Vue.js 的主要目标是通过尽可能简单的 API 提供数据驱动的视图组件。它对于将数据视图分离和构建大型 Web 应用程序非常有用。
以下是 Vue.js 的一些特点：
- 数据绑定和响应式
- 组件系统
- 模板语法
- 指令系统
- 过渡和动画
- 单文件组件
使用 Hapi.js 和 Vue.js 来构建服务器端网站
下面我们将逐步构建一个简单的服务器端网站。
步骤1：设置
我们需要首先创建一个基本的 Node.js 项目。我们可以通过执行以下命令来完成：
mkdir vue-hapi-website cd vue-hapi-website npm init
这将创建一个名为 vue-hapi-website 的新目录，并在目录中创建一个 package.json 文件。接下来，我们将在此目录中安装所需的依赖项。
我们需要安装 Hapi.js 和一些相关的插件。执行以下命令来完成：
npm install --save hapi@20.1.2 npm install --save @hapi/inert@6.1.2 npm install --save @hapi/vision@6.0.1
我们还需要安装 Vue.js 和一些相关的插件。执行以下命令来完成：
npm install --save vue@2.6.12 npm install --save vue-server-renderer@2.6.12 npm install --save vue-router@3.4.9 npm install --save axios@0.21.1 npm install --save-dev webpack webpack-cli webpack-node-externals cross-env npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env
这将通过 npm 安装必要的依赖项。
步骤2：创建服务器
我们需要创建一个简单的 Hapi 服务器。
在你的项目根目录下创建一个名为 server.js 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ----- - -----------------------
----- ------ - ------------------------
----- ---- - ----------------
----- ------ - -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- -----------------------
----- ------------------------
--------------
-------- -
----- ---------------------
--
----------- -------------------- ---------
----- ----
------- -----
----------- -------------------- ----------------
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ----------------
-
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------这将创建一个简单的 Hapi 服务器，监听在本地端口 3000 上，并返回一个名为 index.html 的视图。
步骤3：创建视图
我们需要创建一个简单的 Vue.js 应用程序。
在你的项目根目录下创建一个名为 views/index.html 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
---- ---------------------------
--------
------------------------ - -----------
---------
------- ---------------------------
-------
-------这将创建一个简单的 HTML 页面，该页面中引用了我们 Vue.js 应用程序的 JavaScript。
现在我们需要创建一个名为 webpack.config.js 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
----- --------------- - ---------------------------------
----- ---- - ----------------
----- ------------ - -------------------- --- -------------
-------------- - -
------ ----------------
------- -
----- ----------------------- -------------
----------- --------------
--------- --------
--
------- -
------ -
-
----- ---------
------- ------------
--
-
----- --------
------- ---------------
-------- ----------------
-
-
--
-------- -
--- -----------------
--
-------- ------------ - ----- - -------------
--这将为我们的 Vue.js 应用程序创建一个 webpack 配置文件。
步骤4：创建 Vue.js 应用程序
在你的项目根目录下创建一个名为 src 的文件夹，并在其中创建一个名为 main.js 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------
------ ------ ---- -----------
------ ----- ---- --------
------------------- - ------
----- ----- - -
------ ------- ------- --------
--
----- --- - --- -----
-------
----- -
-----
--
------- - -- ------
---
------ ------- ----这将创建一个简单的 Vue.js 应用程序。
我们还需要在项目根目录下创建一个名为 App.vue 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
----------
-----
------ ----------- -------
---------------------------
------
-----------
--------
------ ------- -
----- ------
------ ---------
--
---------这是我们 Vue.js 应用程序的主组件 - 它将呈现在我们的服务器端页面上。
最后，我们还需要在项目根目录下创建一个名为 routes.js 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
------ --- ---- ------
------ ------ ---- -------------
----------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- -- -- --------------------------
-
-
---这将创建我们的 Vue.js 应用程序的路由表。
步骤5：创建视图组件
我们需要在我们的 Vue.js 应用程序中创建一个视图组件。
在 src/views 目录下创建一个名为 Home.vue 的文件，并将以下代码复制粘贴到该文件中：
-- -------------------- ---- -------
----------
-----
----------- -- --- ------ ------- -------------
------- ------- --- ----- ----- ------ --- ------------
------
-----------
--------
------ ------- -
----- ------
--
---------这将创建一个简单的视图组件，该组件将呈现在 Vue.js 应用程序中。
步骤6：构建和运行
现在，我们就准备好通过 Webpack 构建我们的 Vue.js 应用程序，以便我们的 Hapi.js 服务器可以呈现它。在你的项目根目录下执行以下命令：
npm run build
这将使用 Webpack 构建我们的 Vue.js 应用程序，并在项目的 public/js 文件夹中生成一个名为 app.js 的 JavaScript 文件。
接下来，我们需要运行我们的 Hapi.js 服务器。在你的项目根目录下执行以下命令：
node server.js
现在，我们已经成功地运行了我们的服务器端网站！我们可以在浏览器中输入 http://localhost:3000 来访问它。我们应该能够看到一个简单的页面，其中显示了一个标题和一些文本。
总结
在本文中，我们探讨了如何使用 Hapi.js 和 Vue.js 构建服务器端网站。我们首先设置了项目，然后创建了一个简单的 Hapi.js 服务器。接下来，我们创建了一个简单的 Vue.js 应用程序，并将其编译为我们的 Hapi.js 服务器可以呈现的 JavaScript。最后，我们创建了一个名为 Home.vue 的视图组件，将其添加到我们的路由表中，以便我们的服务器可以呈现它。
至此，我们已经获得了一个可扩展和易于维护的服务器端网站。我们已经了解了如何在服务器端使用 Hapi.js 和 Vue.js，以及如何构建一个简单的 Vue.js 应用程序。我们希望这能够提供一些深度和学习以及指导意义，并帮助你开始构建自己的服务器端网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af5e6548841e9894b6902d