Nuxt 项目教程

Nuxt 项目教程

nuxt.newCreate a new Nuxt project from your address bar.项目地址:https://gitcode.com/gh_mirrors/nu/nuxt.new

1. 项目的目录结构及介绍

Nuxt 项目的目录结构如下：

nuxt-project/
├── components/       # Vue 组件
├── pages/            # 页面组件
├── plugins/          # 插件
├── public/           # 静态资源
├── server/           # 服务器文件
├── test/e2e/         # 端到端测试
├── .gitignore        # Git 忽略文件
├── .npmrc            # npm 配置文件
├── LICENSE           # 许可证
├── README.md         # 项目说明
├── app.config.ts     # 应用配置
├── app.vue           # 主应用组件
├── budget.json       # 预算文件
├── nuxt.config.ts    # Nuxt 配置文件
├── package.json      # 项目依赖
├── playwright.config.ts # Playwright 配置
├── pnpm-lock.yaml    # pnpm 锁定文件
├── renovate.json     # Renovate 配置
├── tailwind.config.ts # Tailwind CSS 配置
├── tsconfig.json     # TypeScript 配置

目录介绍

• components/: 存放 Vue 组件。
• pages/: 存放页面组件，Nuxt 会根据文件名自动生成路由。
• plugins/: 存放插件文件。
• public/: 存放静态资源，如图片、字体等。
• server/: 存放服务器文件。
• test/e2e/: 存放端到端测试文件。
• .gitignore: 指定 Git 忽略的文件和目录。
• .npmrc: npm 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• app.config.ts: 应用配置文件。
• app.vue: 主应用组件。
• budget.json: 预算文件。
• nuxt.config.ts: Nuxt 配置文件。
• package.json: 项目依赖和脚本。
• playwright.config.ts: Playwright 配置文件。
• pnpm-lock.yaml: pnpm 锁定文件。
• renovate.json: Renovate 配置文件。
• tailwind.config.ts: Tailwind CSS 配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

Nuxt 项目的启动文件主要是 package.json 中的脚本和 nuxt.config.ts。

package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }
}

• dev: 启动开发服务器。
• build: 构建项目。
• start: 启动生产服务器。
• generate: 生成静态站点。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // 配置选项
})

nuxt.config.ts 文件用于配置 Nuxt 项目，包括路由、插件、模块等。

3. 项目的配置文件介绍

nuxt.config.ts

nuxt.config.ts 是 Nuxt 项目的主要配置文件，包含以下配置选项：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // 全局设置
  head: {
    title: 'Nuxt Project',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt Project Description' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // 模块
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  // 插件
  plugins: [
    '~/plugins/

nuxt.newCreate a new Nuxt project from your address bar.项目地址:https://gitcode.com/gh_mirrors/nu/nuxt.new