通过

Windows 上的 Nuxt.js 入门

一个指南，可帮助你安装 Nuxt.js Web 框架并在 Windows 上启动并运行。

Nuxt.js 是基于 Vue.js、Node.js、Webpack 和 Babel.js创建服务器呈现的 JavaScript 应用的框架。 它受到 Next.js的启发。 它基本上是 Vue 的项目模板。 与 Next.js一样，它经过精心设计，注重最佳做法，并允许你以简单、一致的方式创建“通用”Web 应用，几乎没有任何配置。 这些“通用”服务器呈现的 Web 应用有时也称为“异态”，这意味着代码在客户端和服务器之间共享。

若要了解有关 Vue 的详细信息，请参阅 Vue 概述 页。

先决条件

本指南假定你已完成设置 Node.js 开发环境的步骤，包括：

  • 安装适用于 Linux 的 Windows 子系统（WSL），包括 Linux 分发版（如 Ubuntu），并确保它在 WSL 2 模式下运行。 您可以通过打开 PowerShell 并输入 wsl -l -v 来检查这一点。
  • WSL 2上安装 Node.js：这包括版本管理器、包管理器、Visual Studio Code 和远程开发扩展。

建议在使用 NodeJS 应用时使用适用于 Linux 的 Windows 子系统，以提高性能速度、系统调用兼容性，以及运行 Linux 服务器或 Docker 容器时的模仿。

重要

使用 WSL 安装 Linux 分发版将创建用于存储文件的目录：\\wsl\Ubuntu-20.04（将 Ubuntu-20.04 替换为正在使用的 Linux 分发版）。 若要在 Windows 文件资源管理器中打开此目录，请打开 WSL 命令行，使用 cd ~选择主目录，然后输入命令 explorer.exe . 不要安装 NodeJS 或存储将在装载的 C 驱动器上使用的文件（/mnt/c/Users/yourname$）。 这样做会显著降低安装和生成时间。

安装 Nuxt.js

若要安装 Nuxt.js，需要回答一系列有关要安装的集成服务器端框架、UI 框架、测试框架、模式、模块和 linter 的一系列问题：

  1. 打开 WSL 命令行（即Ubuntu）。

  2. 创建新的项目文件夹：mkdir NuxtProjects 并输入该目录：cd NuxtProjects。

  3. 安装 Nuxt.js 并创建项目（将“my-nuxt-app”替换为你想要给你的应用命名的任何名称）：npm create nuxt-app my-nuxt-app

  4. Nuxt.js 安装程序现在将询问以下问题：

    • 项目名称：my-nuxtjs-app
    • 项目说明：我的 Nuxt.js 应用的说明。
    • 作者名称：我使用我的 GitHub 别名。
    • 选择包管理器：Yarn 或 Npm - 我们将 NPM 用于我们的示例。
    • 选择 UI 框架：None、Ant Design Vue、Bootstrap Vue 等。 让我们为此示例选择 Vuetify，但 Vue 社区创建了一个很好的 摘要，比较了这些用户界面框架，以帮助你挑选出最适合你的项目。
    • 选择自定义服务器框架：None、AdonisJs、Express、Fastify 等。 让我们选择用于本示例的 None，但你可以在 Dev.to 站点上找到 2019-2020 服务器框架比较。
    • 选择 Nuxt.js 模块（使用空格键选择模块或仅输入（如果不需要任何模块）：Axios（用于简化 HTTP 请求）或 PWA 支持（用于添加服务辅助角色、manifest.json 文件等）。 让我们不要为此示例添加一个模块。
    • 选择 linting 工具：ESLint、更漂亮、Lint 暂存文件。 让我们选择 ESLint（用于分析代码并警告潜在错误的工具）。
    • 选择测试框架：None、Jest、AVA。 选择 “无”，因为在本快速入门中我们不会涉及测试。
    • 选择呈现模式：通用（SSR） 或单页应用（SPA）。 让我们选择 通用（SSR） 作为示例，但 Nuxt.js 文档 指出了一些差异 -- SSR 要求运行 Node.js 服务器来呈现应用和 SPA 进行静态托管。
    • 选择开发工具：jsconfig.json（建议用于 VS Code，以便 Intellisense 代码完成工作）

  5. 创建项目后，cd my-nuxtjs-app 输入 Nuxt.js 项目目录，然后输入 code . 在 VS Code WSL-Remote 环境中打开项目。

    WSL-Remote 扩展

  6. 安装 Nuxt.js 后，需要知道 3 个命令：

    • npm run dev 用于运行具有热重载、文件监视和任务重新运行的开发实例。
    • 你可以使用 npm run build 来编译你的项目。
    • npm start，用于在生产模式下启动应用。

    打开 VS Code 中集成的 WSL 终端（视图 > 终端）。 确保终端路径指向项目目录（即 ~/NuxtProjects/my-nuxt-app$）。 然后，尝试使用：npm run dev 运行新 Nuxt.js 应用的开发实例

  7. 本地开发服务器将启动（显示客户端和服务器编译时的一些酷炫的进度条）。 完成项目生成后，终端将显示“已成功编译”以及编译所需的时间。 将 Web 浏览器指向 http://localhost:3000 以打开新的 Nuxt.js 应用。

    你的 Nuxt.js 应用在 localhost:3000 运行

  8. 在 VS Code 编辑器中打开 pages/index.vue 文件。 找到页面标题 <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> 并将其更改为 <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>。 当 Web 浏览器仍然打开到 localhost：3000 时，保存更改并注意到热重载功能会在浏览器中自动编译和更新更改。

  9. 让我们看看 Nuxt.js 如何处理错误。 删除 </v-card-title> 结束标记，使标题代码现在看起来这样：<v-card-title class="headline">This is my new Nuxt.js app!。 保存此更改并注意，编译错误将显示在浏览器和终端中，告知 <v-card-title> 的结束标记缺失，以及代码中可以找到错误的行号。 替换 </v-card-title> 结束标记，然后保存，页面将重新加载。

可以将 VS Code 的调试器与 Nuxt.js 应用配合使用，通过选择 F5 键，或者在菜单栏中转到 视图 > 调试（Ctrl+Shift+D）和 视图 > 调试控制台（Ctrl+Shift+Y）。 如果在“调试”窗口中选择齿轮图标，将创建启动配置（launch.json）文件，以便保存调试设置详细信息。 若要了解更多信息，请参阅 VS Code 调试工具。

VS Code 调试窗口和 launch.json 配置图标

若要了解有关 Nuxt.js的详细信息，请参阅 Nuxt.js 指南。