简介
express-vue-renderer 是一个基于 Vue.js 的服务器端渲染解决方案，它可用于在 Node.js 中使 Vue 组件成为 Express 中的视图渲染器。使用它可以方便地将 Vue 应用程序渲染为 HTML。
安装
express-vue-renderer 可以通过 npm 进行安装，使用以下命令即可：
npm install express-vue-renderer --save
使用
使用 express-vue-renderer，首先要在项目中添加相应的配置，可以将其放在一个单独的文件中，例如 vue-renderer.js：
-- -------------------- ---- -------
----- ---------- - --------------------------------
----- ----------------- - -
-- --- ----
----- -
-------------- -------- --- ------
--
-- ------
--------- -
------
------
-- -- ----------------------- - --
--- --------------------- ---
-- - --
---------- ----- -----------
-------
------
---- ------ ---
--- --------- ---
---- ------ ----- ---
-- -- ---------- - --
-------------------------------- - --- -------- -------------
-- - --
---- ---------- ---
-- -- ------------------------- - --
--- ----------------------- ---
-- - --
-------
-------
--
-- --- --- ----
---- -
-- --- ----
--
--
-- -- ----------- ---
----- ------------- - -----------------------------------------
-------------- - --------------然后在 Express 应用程序中使用此中间件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ------------- - --------------------------
-- ------
------------------------------------------- ------------
-- -- ----------- ---
-----------------------
-- ----
------------ -------- ----- ---- -
--------------------- -
----- -
----- --------
--
---
---
-- -----
---------------- -------- -- -
------------------- --------- -- ---- --------
---这里定义了一个简单的 Express 应用程序，使用静态文件中间件处理 public 目录的静态文件，然后添加了 vueMiddleware 中间件。这里的路由处理函数里使用了 res.renderVue 函数，这个函数是 express-vue-renderer 提供的，用于渲染 Vue 组件、数据和选项。
配置
在上述示例中，我们创建了一个中间件配置项 middlewareOptions，这里相比默认配置项定制了一些选项：
head选项包含了一些 HTML 头部信息，这些信息将被注入到渲染出来的 HTML 中，例如在这里使用了 titleTemplate 模板字符串。
template选项用于定义 HTML 模板，这里的模板使用了内置的渲染变量，例如
{{{ renderCmp }}}，它用于渲染 Vue 组件。还注入了 state 数据、meta 数据和 JSON-LD 数据等。vue选项这里的选项将由 Vue 实例接收，例如可为 Vue 实例添加插件、定义全局组件、设定路由等。
除了配置选项，在 Express 应用程序中还可以使用 res.renderVue 函数，它的第一个参数是组件名，第二个参数是可选的选项对象，该对象包含要渲染的数据。
示例代码
以下是一个使用了 express-vue-renderer 的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ------------- - --------------------------------
----- ----------------- - -
----- -
-------------- ------- -- ------- ---- -----
--
--------- -
------
------
--- --------------------- ---
---------- ----- -----------
-------
------
--- --------- ---
-- -- ---------- - --
-------------------------------- - --- -------- ----
---------
-- - --
-------
-------
--
---- -
-- ----- --- ----
---
--
--
-- -- ----------- ---
----- ----------- - --------------------------------------------
-- -----
---------------------
------------------------------------------- ------------
------------ -------- ----- ---- -
-- -- ------------- -- --- --
--------------------- -
----- -
-------- ------ -------
--
---
---
----------------- -------- ----- ---- -
---------------------- -
----- -
-------- ----- -- --- ----- ------
--
---
---
-- -----
---------------- -------- -- -
------------------- --------- -- ---- --------
---在此示例中，我们首先定义了 middlewareOptions 对象，在这里定义了我们想要的一些 Vue 实例选项和 HTML 模板选项等。然后，我们使用中间件工厂函数创建了一个 express-vue-renderer 中间件并添加到 Express 应用程序中。在路由处理函数中，我们使用了 res.renderVue 函数将 Vue 组件呈现为 HTML 响应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/126044