Nuxt.js 搭建教程

Nuxt.js 搭建教程

环境准备

1. 安装 Node.js (建议版本 14 或更高)
2. 安装 npm 或 yarn (推荐 yarn)

创建 Nuxt.js 项目

方法1: 使用 create-nuxt-app 脚手架

npx create-nuxt-app <项目名>
# 或
yarn create nuxt-app <项目名>

安装过程中会询问一些配置选项：

• 编程语言 (JavaScript/TypeScript)
• 包管理器 (npm/yarn)
• UI 框架 (如 Element UI, Tailwind CSS 等)
• Nuxt.js 模块 (如 Axios, PWA 等)
• 渲染模式 (Universal/SSR 或 SPA)
• 测试框架 (可选)

方法2: 手动安装

1. 初始化项目

mkdir nuxt-app
cd nuxt-app
npm init -y

2. 安装 Nuxt.js

npm install nuxt

3. 添加脚本到 package.json

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

项目结构

nuxt-app/
├── assets/         # 未编译的静态资源
├── components/     # Vue 组件
├── layouts/        # 布局文件
├── pages/          # 路由页面
├── plugins/        # JavaScript 插件
├── static/         # 静态文件
├── store/          # Vuex 状态管理
├── nuxt.config.js  # Nuxt 配置文件
└── package.json

基本开发流程

1. 创建页面 (自动生成路由)

# 在 pages 目录下创建 .vue 文件
touch pages/index.vue

2. 启动开发服务器

npm run dev
# 访问 http://localhost:3000

3. 示例页面 (pages/index.vue)

<template>
  <div>
    <h1>欢迎使用 Nuxt.js</h1>
    <p>当前路由: {{ $route.path }}</p>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页'
    }
  }
}
</script>

部署应用

服务端渲染 (SSR) 部署

1. 构建应用

npm run build

2. 启动生产服务器

npm run start

静态站点 (SSG) 部署

1. 生成静态文件

npm run generate

2. 部署生成的 dist 文件夹到任何静态主机 (如 Netlify, Vercel, GitHub Pages)

常用配置 (nuxt.config.js)

export default {
  // 应用模式
  mode: 'universal', // 'universal' 或 'spa'
  
  // 全局页面头部
  head: {
    title: '我的 Nuxt 应用',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  
  // 全局 CSS
  css: ['~/assets/css/main.css'],
  
  // 插件
  plugins: ['~/plugins/my-plugin.js'],
  
  // 模块
  modules: ['@nuxtjs/axios'],
  
  // 构建配置
  build: {
    extend(config, ctx) {
      // 自定义 webpack 配置
    }
  }
}

进阶功能

1. 使用 Vuex: 在 store 目录下创建文件自动启用
2. API 调用: 使用 @nuxtjs/axios 模块
3. 认证: 使用 @nuxtjs/auth 模块
4. SEO 优化: 使用 head() 方法或 vue-meta 配置

注意事项

• 遵循 Nuxt 的目录结构约定
• 服务端渲染时注意浏览器 API 的访问 (使用 process.client 检查)
• 静态生成时注意动态路由的处理

完成以上步骤，你就成功搭建了一个基本的 Nuxt.js 应用！