Nuxt.js 入门指南 – wiki大全

作者： /

Nuxt.js 入门指南：现代 Vue.js 应用开发的利器

随着前端技术的飞速发展，Vue.js 凭借其简洁的 API 和出色的性能，成为了众多开发者构建用户界面的首选框架。然而，对于复杂的单页应用 (SPA) 或需要服务器端渲染 (SSR) 以优化 SEO 和首屏加载速度的项目，纯粹的 Vue.js 可能需要额外的配置和集成工作。这时，Nuxt.js 应运而生，它是一个基于 Vue.js 的通用应用框架，旨在帮助开发者更轻松、更高效地构建 Vue 应用。

一、什么是 Nuxt.js？

Nuxt.js 是一个开源的、基于 Vue.js 的高级框架，它抽象了构建现代 Vue 应用所需的复杂配置。你可以把它看作是 Vue.js 的一个“上层框架”或“元框架”，它为你预配置了服务器端渲染 (SSR)、静态站点生成 (SSG)、路由、状态管理、代码分割等一系列功能，让你能够专注于业务逻辑的开发。

核心特性：

  • 服务器端渲染 (SSR) / 预渲染 (Pre-rendering)： 极大地改善了首次加载性能和 SEO。
  • 静态站点生成 (SSG)： 将应用预先渲染成静态 HTML 文件，适用于博客、文档站点等。
  • 自动路由： 基于 pages 目录结构自动生成 Vue Router 配置。
  • 模块化： 丰富的模块生态系统，方便集成第三方服务和功能。
  • 代码分割： 自动优化打包大小，按需加载组件。
  • 约定优于配置： 遵循一套合理的目录结构和命名约定，减少了配置的复杂度。

二、为什么要选择 Nuxt.js？

  1. 提升用户体验： SSR 确保用户能更快看到页面内容，尤其是在网络条件不佳时。
  2. 优化 SEO： 搜索引擎爬虫可以直接抓取渲染完成的 HTML 内容，有助于提高搜索排名。
  3. 简化开发流程： Nuxt.js 预设了许多最佳实践，减少了初始配置和整合第三方库的麻烦。
  4. 一致的开发体验： 无论是构建 SSR、SPA 还是 SSG 应用，都能使用统一的开发模式。
  5. 强大的生态系统： 继承了 Vue.js 的所有优点，并拥有自己独特的模块和插件。

三、环境准备

在开始 Nuxt.js 项目之前，请确保你的开发环境中已安装以下工具：

  • Node.js： 推荐使用 LTS (长期支持) 版本。你可以在 nodejs.org 下载安装。
  • npm 或 Yarn： Node.js 安装时会附带 npm。Yarn 是另一个流行的包管理器，通常更快。

你可以通过运行以下命令来检查它们的版本：

“`bash
node -v
npm -v

或者

yarn -v
“`

四、创建你的第一个 Nuxt.js 项目

创建 Nuxt.js 项目最简单的方式是使用 create-nuxt-app。

  1. 打开终端或命令行工具，运行以下命令：

    “`bash
    npx create-nuxt-app

    或者如果你使用 Yarn

    yarn create nuxt-app “`

    将 <project-name> 替换为你项目的名称，例如 my-nuxt-app。

  2. 根据提示进行选择：

    create-nuxt-app 会引导你配置项目，包括：

    • Package manager (包管理器): Yarn 或 Npm
    • UI framework (UI 框架): None, Ant Design Vue, Bootstrap Vue, Buefy, Bulma, Chakra UI Vue, Element UI, SUI, Tailwind CSS, Windi CSS, Vant, Vuetify.js (可根据需求选择，也可不选)
    • Nuxt.js modules (Nuxt.js 模块): Axios, PWA, Content (根据需要勾选，Axios 通常会用到)
    • Linting tools (代码检查工具): ESLint, Prettier, StyleLint, Commitlint (推荐勾选 ESLint 和 Prettier)
    • Testing framework (测试框架): None, Jest, Ava
    • Rendering mode (渲染模式):
      • Universal (SSR): 通用模式 (服务器端渲染 + 客户端渲染)
      • Single Page App (SPA): 单页应用模式 (仅客户端渲染)
      • Static (Static Site Generation): 静态站点生成模式
    • Deployment target (部署目标):
      • Server (Node.js hosting): 适用于需要 Node.js 服务器的应用
      • Static (Static hosting): 适用于静态文件托管 (与 SSG 配合使用)
    • Development tools (开发工具): jsconfig.json, semantic-release
    • Continuous integration (持续集成): None, Travis CI, Circle CI, GitLab CI, GitHub Actions
    • Version control system (版本控制系统): Git

    这些选择为你的项目提供了定制化的起点。如果你是初学者，选择 Universal (SSR) 或 Static (Static Site Generation) 配合 Static (Static hosting) 是不错的开始。

  3. 进入项目目录并运行：

    “`bash
    cd npm run dev

    或者

    yarn dev
    “`

    你的 Nuxt.js 应用现在应该在 http://localhost:3000 运行了！

五、Nuxt.js 项目结构概览

一个典型的 Nuxt.js 项目目录结构如下：

.
├── assets/ # 未编译的静态资源 (Less, Sass, JS, 图片等)
├── components/ # Vue 组件
├── layouts/ # 应用布局
├── middleware/ # 路由中间件
├── pages/ # 应用页面 (自动生成路由)
├── plugins/ # Vue 插件
├── static/ # 静态文件 (不会被 Webpack 处理，直接映射到根路径)
├── store/ # Vuex 状态管理
├── nuxt.config.js # Nuxt.js 配置文件
├── package.json # 项目依赖和脚本
└── README.md

关键目录和文件解释：

  • pages/： 这是 Nuxt.js 最核心的目录之一。每个 .vue 文件在这个目录中都会自动生成一个对应的路由。
    • 例如：pages/index.vue -> /
    • pages/about.vue -> /about
    • pages/users/_id.vue -> /users/:id (动态路由)
  • components/： 存放可复用的 Vue 组件。Nuxt.js 2.13+ 提供了自动导入功能，无需手动注册。
  • layouts/： 定义应用页面的布局。你可以创建不同的布局来适应不同的页面类型（例如，默认布局、管理后台布局等）。default.vue 是默认布局。
  • assets/： 存放需要 Webpack 处理的静态资源，如 SCSS/LESS 文件、图片、字体等。
  • static/： 存放不需要 Webpack 处理的静态文件，例如 robots.txt、favicon.ico 或第三方库，它们会直接映射到应用的根路径。
  • store/： Nuxt.js 自动集成了 Vuex。在这个目录中，你可以创建 Vuex 模块来管理应用状态。
  • plugins/： 存放需要在 Vue 根实例实例化之前运行的 JavaScript 插件。例如，注入全局方法、配置第三方库。
  • nuxt.config.js： Nuxt.js 的主要配置文件，你可以在这里配置路由、模块、插件、构建选项、全局 CSS 等。

六、开发核心概念

1. 页面和路由 (pages/)

在 pages 目录下创建 .vue 文件，Nuxt.js 会根据文件路径自动生成路由。

示例：pages/index.vue

“`vue

“`

示例：pages/about.vue

“`vue

“`

2. 布局 (layouts/)

布局文件定义了页面骨架，包含所有页面共享的 UI 元素，如导航栏、页脚等。

示例：layouts/default.vue

“`vue

“`

所有 pages 目录下的页面默认会使用 layouts/default.vue 布局。你也可以在页面组件中通过 layout: 'custom' 来指定使用其他布局。

3. 组件 (components/)

组件是构成页面的基本构建块。

示例：components/AppLogo.vue

“`vue

“`

在页面或布局中直接使用：

“`vue

“`

4. 数据获取 (异步数据)

Nuxt.js 提供了多种在服务端或客户端获取数据的方法：

  • asyncData： 在组件加载之前异步获取数据，并将数据合并到组件的 data 属性中。这在 SSR 模式下非常有用，因为数据在服务器端渲染时就已经准备好了。

    “`vue


    “`

  • fetch： 同样用于获取数据，但它会将数据填充到 Vuex store 中，并且会在服务器端和客户端都执行。

    “`vue


    “`

七、构建和部署

当你的应用开发完成后，可以使用以下命令进行构建：

“`bash
npm run build

或者

yarn build
“`

这会生成一个 .nuxt 目录，其中包含了生产环境所需的所有文件。

部署方式取决于你的渲染模式：

  • Universal (SSR) 或 SPA 模式 (部署到 Node.js 服务器)：
    运行 npm start (或 yarn start) 来启动一个 Node.js 服务器，提供你的 Nuxt.js 应用。你可以将此部署到 Heroku, Vercel, Netlify Functions, PM2 等。

  • Static (SSG) 模式 (部署到静态文件托管)：
    运行 npm run generate (或 yarn generate)。这会生成一个 dist 目录，包含预渲染的 HTML、CSS 和 JS 文件。你可以将 dist 目录直接部署到任何静态文件托管服务，如 Netlify, GitHub Pages, Vercel Static, Nginx 等。

八、总结

Nuxt.js 提供了一个强大且富有表现力的框架，它将 Vue.js 的开发体验提升到了一个新的水平。通过其约定优于配置的理念，以及对 SSR、SSG 和自动路由的内置支持，Nuxt.js 让开发者能够更专注于构建功能丰富、性能优越的现代 Web 应用。

现在，你已经掌握了 Nuxt.js 的基本概念和入门步骤。继续探索 Nuxt.js 官方文档，了解更多高级功能如模块、中间件、插件和 Vuex 状态管理，你将能够构建出更加强大和复杂的应用。祝你 Nuxt.js 之旅愉快！

滚动至顶部