Nuxt3项目实战：从入门到上手-原创手记-慕课网

概述

本文详细介绍了Nuxt3项目实战，从环境搭建到项目部署的全过程，帮助开发者快速入门并上手Nuxt3项目。文章涵盖了Nuxt3的基础概念、环境配置、项目结构、路由管理以及API集成等内容，为读者提供了一个全面的Nuxt3项目开发指南。Nuxt3项目实战不仅包括了静态文件的创建和管理，还涉及到了路由守卫、数据缓存和优化等高级主题。

Nuxt3项目实战：从入门到上手

Nuxt3简介与环境搭建

Nuxt3是什么

Nuxt3 是一个基于 Vue 3 的框架，用于构建基于服务器渲染的 Web 应用程序。Nuxt3 提供了一整套功能和最佳实践，包括静态站点生成、服务器端渲染和客户端渲染。使用 Nuxt3 可以快速搭建和维护复杂的 Web 应用程序，同时保持良好的代码组织和性能。

安装Node.js和npm

要开始使用 Nuxt3，首先需要安装 Node.js 和 npm。Node.js 是一个开源、跨平台的 JavaScript 运行时环境，npm 是 Node.js 的包管理器，用于安装和管理 JavaScript 包。

访问 Node.js 官方网站并下载最新版本的 Node.js。
安装 Node.js 后，npm 将自动安装。
验证安装是否成功：

node -v
npm -v

确保你的 Node.js 版本不低于 14.0.0，npm 版本不低于 6.0.0。如果需要更新 Node.js 或 npm，可以使用以下命令：

npm install -g npm

创建Nuxt3项目

使用 Nuxt3 创建一个新的项目，可以通过 NPM 或 Yarn 来安装 Nuxt CLI。接下来，创建一个新的 Nuxt3 项目：

安装 Nuxt CLI：

npm install -g nuxt

或者使用 Yarn：

yarn global add nuxt

创建一个新的 Nuxt3 项目：

npx create-nuxt-app my-nuxt3-app

或者使用 Yarn：

yarn create nuxt-app my-nuxt3-app

在新窗口中，根据提示选择相应的配置，如安装的依赖项、框架版本等。

cd my-nuxt3-app

配置文件详解

创建项目后，生成的项目结构如下：

my-nuxt3-app/
├── .nuxtconfig.js
├── components/
├── layouts/
├── pages/
├── plugins/
├── static/
├── store/
└── app.vue

.nuxtconfig.js 文件是 Nuxt3 的配置文件，用于设置项目全局配置。以下是一些常见的配置选项：

export default defineNuxtConfig({
  // 设置环境变量
  env: {
    apiUrl: 'https://api.example.com'
  },

  // 设置路由模式
  router: {
    mode: 'history'
  },

  // 设置公共样式路径
  css: [
    '~/assets/styles/main.css'
  ],

  // 设置公共脚本路径
  scripts: [
    '~/assets/scripts/main.js'
  ],

  // 设置插件
  plugins: [
    '~/plugins/my-plugin.js'
  ],

  // 设置vuex store
  stores: [
    '~/store/index.js'
  ],

  // 设置构建目标
  buildTarget: 'serverless',

  // 设置dev工具
  devtools: true,

  // 设置代理
  proxy: {
    '/api': { target: 'https://api.example.com', pathRewrite: { '^/api': '' } }
  },

  // 设置css前缀
  cssPrefix: 'nuxt-'
})

安装Nuxt3依赖

运行以下命令来安装项目依赖：

npm install

或者使用 Yarn：

yarn

安装完成后，启动项目：

npm run dev

或者使用 Yarn：

yarn dev

这将启动开发服务器，并在浏览器中打开应用。

项目基本结构与配置

项目文件夹结构介绍

Nuxt3 项目的基本结构如下：

my-nuxt3-app/
├── .nuxtconfig.js
├── components/
├── layouts/
├── pages/
├── plugins/
├── static/
├── store/
└── app.vue

components/：存放全局组件。
layouts/：存放全局布局组件。
pages/：存放页面组件。
plugins/：存放插件。
static/：存放静态文件。
store/：存放 Vuex 状态管理。
app.vue：根组件。

.nuxtconfig.js配置文件详解

.nuxtconfig.js 文件是 Nuxt3 的配置文件，用于设置项目全局配置。以下是一些常见的配置选项：

export default defineNuxtConfig({
  // 设置环境变量
  env: {
    apiUrl: 'https://api.example.com'
  },

  // 设置路由模式
  router: {
    mode: 'history'
  },

  // 设置公共样式路径
  css: [
    '~/assets/styles/main.css'
  ],

  // 设置公共脚本路径
  scripts: [
    '~/assets/scripts/main.js'
  ],

  // 设置插件
  plugins: [
    '~/plugins/my-plugin.js'
  ],

  // 设置vuex store
  stores: [
    '~/store/index.js'
  ],

  // 设置构建目标
  buildTarget: 'serverless',

  // 设置dev工具
  devtools: true,

  // 设置代理
  proxy: {
    '/api': { target: 'https://api.example.com', pathRewrite: { '^/api': '' } }
  },

  // 设置css前缀
  cssPrefix: 'nuxt-'
})

页面路由配置

在 pages 文件夹中，每个文件名将映射到一个 URL 路由。例如，在 pages/index.vue 中定义的组件会映射到根路径 /。

示例代码

在 pages/index.vue 文件中定义首页：

<template>
  <div>
    <h1>欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

动态路由的定义与使用

动态路由允许基于参数的 URL 路由。例如，可以为用户 ID 创建动态路由，以便显示特定用户的详细信息。

定义动态路由需要在 pages 文件夹中创建一个包含参数的文件。例如，创建 pages/user/[id].vue，其中 [id] 是动态参数。

示例代码

在 pages/user/[id].vue 文件中创建一个用户详情页面组件：

<template>
  <div>
    <h1>用户ID: {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'UserPage',
  async asyncData({ params }) {
    return { id: params.id }
  }
}
</script>

路由守卫的基本概念与实现

路由守卫用于在导航过程中进行一些操作，例如验证用户登录状态或重定向到特定页面。

示例代码

在 plugins/router-guard.js 文件中定义一个路由守卫：

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.router.beforeEach((to, from, next) => {
    const isLogged = localStorage.getItem('logged')

    if (!isLogged) {
      next('/login')
    } else {
      next()
    }
  })
})

页面组件与动态路由

页面组件的创建与使用

页面组件是 Nuxt3 中最基础的组件，用于构建网站的各个页面。每个页面组件对应一个 URL 路由。页面组件放在 pages 文件夹中，文件名将直接映射到 URL 路由。

示例代码

在 pages/about.vue 文件中创建一个关于页面组件：

<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

动态路由的定义与使用

动态路由允许基于参数的 URL 路由。例如，可以为用户 ID 创建动态路由，以便显示特定用户的详细信息。

定义动态路由需要在 pages 文件夹中创建一个包含参数的文件。例如，创建 pages/user/[id].vue，其中 [id] 是动态参数。

示例代码

在 pages/user/[id].vue 文件中创建一个用户详情页面组件：

<template>
  <div>
    <h1>用户ID: {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'UserPage',
  async asyncData({ params }) {
    return { id: params.id }
  }
}
</script>

异步数据获取与API集成

使用asyncData和fetch获取数据

asyncData 和 fetch 是 Nuxt3 中用于异步数据获取的方法。asyncData 用于在组件实例化之前获取数据，而 fetch 则用于在页面加载时获取数据。

示例代码

在 pages/index.vue 文件中使用 asyncData 获取数据：

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData({ $axios }) {
    const { data } = await $axios.get('/api/messages')
    return { message: data.message }
  }
}
</script>

在 pages/index.vue 文件中使用 fetch 获取数据：

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      message: ''
    }
  },
  async fetch() {
    const { data } = await this.$axios.get('/api/messages')
    this.message = data.message
  }
}
</script>

集成API接口

集成 API 接口可以使用 Axios 进行 HTTP 请求。Nuxt3 自带了 Axios 插件，可以通过 this.$axios 访问。

示例代码

在 plugins/axios.js 文件中配置 Axios：

import { defineNuxtPlugin } from '#app'
import axios from 'axios'

export default defineNuxtPlugin(({ $axios }) => {
  $axios.defaults.baseURL = 'https://api.example.com'
})

在 pages/index.vue 文件中使用 Axios 获取数据：

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData({ $axios }) {
    const { data } = await $axios.get('/api/messages')
    return { message: data.message }
  }
}
</script>

使用nuxt的$axios模块

Nuxt3 提供了 $axios 模块，用于简化 Axios 的使用。可以在组件中直接通过 this.$axios 访问。

示例代码

在 pages/index.vue 文件中使用 $axios 获取数据：

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData({ $axios }) {
    const { data } = await $axios.get('/api/messages')
    return { message: data.message }
  }
}
</script>

数据缓存与优化

数据缓存可以通过设置缓存策略来优化应用性能。Nuxt3 支持多种缓存策略，如 vite-plugin-cache 插件。

示例代码

在 nuxt.config.js 文件中配置缓存策略：

export default defineNuxtConfig({
  buildModules: [
    '@nuxtjs/vite-plugin-cache'
  ],
  vite: {
    cacheDir: './.vite-cache'
  }
})

样式与布局管理

基础CSS样式

基础 CSS 样式可以用于简单的页面布局和样式设置。可以将 CSS 文件放在 assets/styles 文件夹中。

示例代码

在 assets/styles/main.css 文件中定义基础样式：

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

在组件中引用 CSS 文件：

<template>
  <div class="container">
    <h1>欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

<style scoped>
@import '~/assets/styles/main.css';
</style>

使用Tailwind CSS或其他CSS框架

Tailwind CSS 是一个实用的工具类框架，可以快速构建自定义样式。

示例代码

在 nuxt.config.js 文件中安装 Tailwind CSS：

npm install tailwindcss

创建 tailwind.config.js 文件：

module.exports = {
  content: [
    './pages/**/*.vue',
    './components/**/*.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建 postcss.config.js 文件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在项目根目录下创建 tailwind.css 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

在组件中引用 Tailwind CSS：

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold">欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

布局组件的创建与使用

布局组件用于定义整个应用的公共布局。可以在 layouts 文件夹中创建布局组件。

示例代码

在 layouts/default.vue 文件中创建一个默认布局组件：

<template>
  <div>
    <header>
      <h1>我的应用</h1>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>版权所有 © 2023</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout'
}
</script>

在 pages/index.vue 文件中使用布局组件：

<template>
  <div>
    <h1>欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  layout: 'default'
}
</script>

布局切换与响应式设计

布局切换可以基于不同设备或条件切换不同的布局组件。响应式设计可以通过 CSS 媒体查询实现。

示例代码

在 layouts/mobile.vue 文件中创建一个移动设备布局组件：

<template>
  <div>
    <header>
      <h1>我的应用（移动端）</h1>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>版权所有 © 2023</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'MobileLayout'
}
</script>

在 pages/index.vue 文件中根据设备切换布局：

<template>
  <div>
    <h1>欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  layout: ({ isMobile }) => (isMobile ? 'mobile' : 'default')
}
</script>

在组件中使用媒体查询实现响应式设计：

<template>
  <div class="container">
    <h1>欢迎来到首页</h1>
    <p>
      <span class="text-sm">一些文本</span>
      <span class="text-md sm:text-lg">一些文本</span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.text-sm {
  font-size: 0.8em;
}

.text-md {
  font-size: 1em;
}

.sm\:text-lg {
  font-size: 1.2em;
}
</style>

部署与上线准备

构建Nuxt3项目

构建 Nuxt3 项目可以确保在生产环境中运行的代码是最优化的。使用 npm run build 或 yarn build 命令来构建项目。

示例代码

构建项目：

npm run build

或者使用 Yarn：

yarn build

项目部署到服务器

部署项目到服务器可以使用任意 Web 服务器，如 Apache、Nginx。确保服务器上已安装了 Node.js 和 NPM。

部署项目需要将构建后的静态文件上传到服务器。例如，使用 SCP 命令：

scp -r dist/* user@server:/path/to/deploy

使用Netlify或Vercel部署

Netlify 和 Vercel 是云部署工具，可以方便地将 Nuxt3 项目部署到云端。

示例代码

使用 Vercel 部署：

注册 Vercel 账号。
安装 Vercel CLI：

npm install -g vercel

或者使用 Yarn：

yarn global add vercel

初始化 Vercel 项目：

vercel

使用 Netlify 部署：

注册 Netlify 账号。
在 Netlify 控制台中创建一个新的应用，选择 GitHub 或 GitLab 仓库中的项目。
在 Netlify 控制台中点击“Deploy site”，然后选择项目仓库。

部署后的常见问题与解决方法

部署后可能会遇到一些常见问题，例如服务器环境配置错误、文件权限问题等。

常见问题与解决方法

服务器环境配置错误：
- 确保服务器上安装了 Node.js 和 NPM。
- 检查构建命令是否正确。
- 检查服务器环境变量是否正确设置。
文件权限问题：
- 确保部署文件的权限设置正确。
- 使用命令 chmod 更改文件权限。