Nuxt 4 模板
基于 Nuxt 4 + TypeScript 的现代化全栈应用开发模板，支持 SSR、SSG、多语言和完整的开发工具链。
技术栈
- Nuxt 4 - 基于 Vue 3 的全栈框架
- Vue 3 - 渐进式 JavaScript 框架，使用 Composition API
- TypeScript - JavaScript 的超集，提供完整的类型安全
- Vite - 下一代前端构建工具
- Pinia - Vue 3 官方状态管理库
- @nuxtjs/i18n - Nuxt 官方国际化模块
- Tailwind CSS - 实用优先的 CSS 框架
- SCSS - CSS 预处理器，增强样式编写能力
快速开始
创建项目
bash
# 初始化项目
vup init my-project
# 进入项目目录
cd my-project
# 添加 Nuxt 应用
vup add my-nuxt-app
# 选择 Nuxt 模板开发
bash
# 安装依赖
pnpm install
# 启动开发服务器
cd apps/my-nuxt-app
pnpm dev开发服务器将在 http://localhost:9303 启动
构建
bash
# 构建生产版本
cd apps/my-nuxt-app
pnpm build
# 生成静态站点
pnpm generate
# 预览构建结果
pnpm preview项目结构
apps/my-nuxt-app/
├── src/
│ ├── api/ # API 请求层
│ │ ├── request.ts
│ │ ├── types.ts
│ │ └── demo.ts
│ ├── assets/ # 静态资源
│ │ └── images/
│ │ └── nuxt.svg
│ ├── components/
│ │ └── demo/
│ │ └── DemoTaskBoard.vue
│ ├── pages/ # 页面组件（文件路由）
│ │ ├── index.vue
│ │ ├── demo.vue
│ │ └── demo/
│ │ ├── guide.vue
│ │ └── example.vue
│ ├── plugins/
│ │ └── msw.client.ts
│ ├── stores/
│ │ └── demo/
│ │ └── index.ts
│ └── app.vue
├── i18n/
│ └── locales/
│ ├── zh-CN.json
│ └── en-US.json
├── public/
│ ├── favicon.ico
│ ├── robots.txt
│ └── mockServiceWorker.js
├── .env.example
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── tsconfig.build.json核心特性
🎯 TypeScript 支持
完整的 TypeScript 支持，提供类型安全和智能提示：
typescript
// 页面组件中使用 TypeScript
<script setup lang="ts">
interface User {
id: number;
name: string;
email: string;
}
const user = ref<User>({
id: 1,
name: 'John Doe',
email: 'john@example.com'
});
</script>🚀 Nuxt 4 全栈框架
基于 Nuxt 4 的强大功能：
- 服务端渲染 (SSR) - 更好的 SEO 和首屏性能
- 静态站点生成 (SSG) - 预渲染静态页面
- 文件系统路由 - 基于文件结构自动生成路由
- 自动导入 - 无需手动导入 Vue API 和 Nuxt 功能
- 中间件支持 - 路由中间件和插件系统
🎨 样式系统
使用 Tailwind CSS + SCSS 的组合方案：
vue
<template>
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-blue-600">
{{ $t('page.title') }}
</h1>
</div>
</template>
<style lang="scss" scoped>
.container {
@apply bg-white rounded-lg shadow-md;
h1 {
@apply text-blue-600;
}
}
</style>🌍 国际化支持
内置完整的多语言支持：
vue
<template>
<div>
<h1>{{ $t('page.title') }}</h1>
<p>{{ $t('page.description') }}</p>
</div>
</template>
<script setup lang="ts">
// 使用 useI18n 组合式函数
const { t, locale } = useI18n();
// 切换语言
const switchLanguage = (lang: 'zh-CN' | 'en-US') => {
const { $i18n } = useNuxtApp();
$i18n.setLocale(lang);
};
</script>🏪 状态管理
使用 Pinia 进行状态管理：
typescript
// src/stores/demo/index.ts
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
return {
count,
increment,
decrement,
};
});🛣️ 文件系统路由
基于文件结构自动生成路由：
pages/
├── index.vue # / 路由
├── demo.vue # /demo 路由
└── demo/
├── guide.vue # /demo/guide 路由
└── example.vue # /demo/example 路由开发工具
代码质量
- ESLint - 代码质量检查
- Prettier - 代码格式化
- TypeScript - 类型检查
开发命令
bash
cd apps/my-nuxt-app
# 开发服务器
pnpm dev
# 构建项目
pnpm build
# 生成静态站点
pnpm generate
# 预览构建结果
pnpm preview
# 代码检查
pnpm lint
pnpm lint:fix
# 代码格式化
pnpm format
pnpm format:check自动导入
Nuxt 4 提供强大的自动导入功能：
vue
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">点击我</button>
</div>
</template>
<script setup lang="ts">
// 无需导入 ref, computed, onMounted 等 Vue API
// 无需导入 useI18n, useRouter 等 Nuxt 功能
const title = ref('Hello Nuxt 4');
const count = computed(() => title.value.length);
const handleClick = () => {
console.log('Button clicked!');
};
onMounted(() => {
console.log('Component mounted');
});
</script>部署
静态部署
bash
cd apps/my-nuxt-app
# 生成静态站点
pnpm generate
# 部署到静态托管服务
# 如 Vercel、Netlify、GitHub Pages 等服务端部署
bash
cd apps/my-nuxt-app
# 构建生产版本
pnpm build
# 启动生产服务器
pnpm preview部署到 Vercel
Nuxt 应用可以轻松部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。