Nuxt.js 是一个基于 Vue.js 的应用框架，它使得构建高性能、可扩展的 Web 应用更加容易。Nuxt.js 基于 Vue.js 支持 SSR（服务器端渲染），同时它还提供了一堆开箱即用的特性，如：模块化开发、路由、状态管理、自动化构建和部署等。

继续买的课程，课程使用的nuxt，跟着学一下

准备工作

如果你还没有相关经验，建议先学习它们。

安装 Nuxt.js

使用 Nuxt.js 可以通过 npm 快速安装：

npm install nuxt

创建 HelloWorld 应用

运行以下命令创建一个 HelloWorld 应用：

npx create-nuxt-app my-project

然后会提示你设置一些选项，如：项目名称、描述、作者、UI 框架、测试工具等。你可以根据自己的需求和喜好进行设置。

安装完成后，进入项目目录并启动应用：

cd my-project npm run dev

在本地开发环境中，Nuxt.js 默认会在 http://localhost:3000 上启动应用。

在 Nuxt.js 应用中，所有的页面都可以放在 pages 目录下，Nuxt.js 会根据目录结构为每个页面生成对应的路由。

例如，我们创建一个 pages/index.vue 页面：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

然后我们在浏览器访问 http://localhost:3000，就能看到 Hello World 页面了。

这是因为 Nuxt.js 根据 pages/index.vue 自动生成了根路由 /。

在 Nuxt.js 中，你可以通过文件名来控制生成的路由的层次结构。例如，创建一个 pages/blog/index.vue 文件：

<template>
  <div>
    <h1>My Blog!</h1>
  </div>
</template>

这样，Nuxt.js 就创建了一个 /blog 的路由，可以访问该页面。

如果需要在 Nuxt.js 应用中使用一些静态文件，例如图片、样式等，可以把它们放在 static 目录中。Nuxt.js 会自动将 static 目录下的文件映射到应用的 / 目录下。

例如，创建 static/logo.png 图片文件，可以在页面中通过以下方式引入：

在开发完成后，可以使用以下命令来打包应用：

npm run build

然后使用以下命令来启动生产环境应用：

npm run start

参考文档：