前言
@nuxt/generator 是一个基于 Vue.js 和 Node.js 的静态站点生成器，用于快速开发静态站点。相比传统的服务器渲染，它具有更高的性能和更好的用户体验。本文将一步步介绍如何使用 @nuxt/generator 来创建静态站点。
安装
在使用 @nuxt/generator 前，需要确保已经安装 Node.js 和 npm。如果尚未安装，请先安装 Node.js 和 npm。安装完毕后，我们可以使用以下命令来安装 @nuxt/generator：
npm install @nuxt/generator
创建静态站点
安装完成后，我们可以使用 @nuxt/generator 提供的命令行工具来创建静态站点。在命令行中输入以下命令：
npx create-nuxt-app <project-name>
其中，<project-name> 是你要创建的项目名称。执行完毕后，会出现以下提示：
-- -------------------- ---- ------- --------------- ------ - ---------- ------- ------- -- -------------- - ------- ----- -------------- - ----------- --------- ---------- - ------- -------- --- - -- ---------- ---- - ------- -------- ----- - ------- ----- ---- ------ - ------- ------ ------ - ------- ---------- ---- - --------- ----- ------ ---- --- - ---------- ------- ------ -------- -------- - ----------- ------ ------ ------- -- ------- --- -- ------ ---- --- -- ------ ---------- - --- - ------------- ------------ --- -- ---- -- ------ --- ----- ----------- - -------- ---- --------
在交互式命令行中，我们可以进行一些选项的配置，例如项目名称、语言、包管理器、UI 框架、Lint 工具、测试框架、渲染模式、部署目标等。在这里我们仅选取一些必须的选项，如下：
- Project name: <project-name>
- Programming language: JavaScript
- Package manager: npm
- UI framework: None
- Nuxt.js modules: Axios - Promise based HTTP client
- Linting tools: ESLint
- Testing framework: None
- Rendering mode: Single Page App
- Deployment target: Server (Node.js hosting)
安装完成后，进入项目目录并执行以下命令：
npm run dev
打开浏览器并输入 http://localhost:3000，即可看到一个由 @nuxt/generator 生成的默认页面。
页面路由
在 @nuxt/generator 中，页面路由的创建非常简单。只需要在 pages 目录下创建一个 Vue 文件，即可自动生成路由。例如，我们要创建一个 /about 页面，只需要在 pages 目录下创建一个 about.vue 文件即可，无需手动定义路由。
<template>
<div>
<h1>About us</h1>
<p>We are a group of web developers.</p>
</div>
</template>服务端渲染
@nuxt/generator 可以实现服务端渲染，从而使页面加载速度更快、SEO 更友好。在这里，我们通过修改 nuxt.config.js 文件来启用服务端渲染。
在 nuxt.config.js 中增加以下代码：
-- -------------------- ---- -------
------ ------- -
-- ---
----- ------------
------- -
----- ---------------- -- -----
----- ---------------- -- -----------
--
--------- -
--------- ----
-
-- ---
-其中，mode 是渲染模式，可以是 'universal'（服务端渲染）或 'spa'（单页应用程序）；server 是服务端配置，包括端口和主机；generate 是静态站点生成配置，在服务端渲染模式下，可以生成静态站点并缓存静态页面。
同时，我们需要对 package.json 文件的 scripts 内容进行修改：
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},增加 generate 命令来生成静态站点。执行以下命令：
npm run generate
静态站点文件将会生成在 .nuxt/dist 目录下，你可以将这些静态文件上传到任何静态服务器上。
总结
到此，我们已经学会了如何使用 @nuxt/generator 快速创建并部署静态站点、创建页面路由和服务端渲染。相信这些知识对于学习和开发前端技术都有着非常重要的意义。
希望本文能对您有所帮助。如果您对本文有任何疑问或建议，欢迎在评论区留言。
示例代码
下面是一个使用 @nuxt/generator 生成的 Hello World 示例：
-- -------------------- ---- -------
----------
---- ------------------
--------- -----------
------
-----------
--------
------ ------- -
--------- -
------ ------ -------
-
-
---------
-------
---------- -
-------- -----
---------------- -------
------------ -------
------- -----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc2a7b5cbfe1ea06120bc