Nuxt.js 模板
基于 Nuxt 3 + TypeScript 的现代化全栈应用开发模板，支持 SSR、SSG、多语言和完整的开发工具链。
技术栈
- Nuxt 3 - 基于 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.js 模板开发
bash
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev开发服务器将在 http://localhost:9303 启动
构建
bash
# 构建生产版本
pnpm build
# 生成静态站点
pnpm generate
# 预览构建结果
pnpm preview项目结构
my-nuxt-app/
├── src/
│ ├── assets/ # 静态资源
│ │ └── images/
│ │ └── nuxt.svg
│ ├── components/ # Vue 组件
│ │ └── Demo.vue
│ ├── composables/ # 组合式函数
│ ├── layouts/ # 布局组件
│ ├── middlewares/ # 中间件
│ ├── pages/ # 页面组件（文件路由）
│ │ ├── demo.vue
│ │ └── index.vue
│ ├── utils/ # 工具函数
│ └── app.vue # 根组件
├── i18n/ # 国际化文件
│ └── locales/ # 语言包
│ ├── zh-CN.json # 中文语言包
│ └── en-US.json # 英文语言包
├── public/ # 公共静态资源
│ ├── favicon.ico
│ └── robots.txt
├── nuxt.config.ts # Nuxt 配置
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
└── tsconfig.build.json # 构建时 TypeScript 配置核心特性
🎯 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 3 全栈框架
基于 Nuxt 3 的强大功能：
- 服务端渲染 (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
// stores/counter.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 路由
├── about.vue # /about 路由
└── blog/
├── index.vue # /blog 路由
└── [slug].vue # /blog/:slug 动态路由开发工具
代码质量
- ESLint - 代码质量检查
- Prettier - 代码格式化
- TypeScript - 类型检查
开发命令
bash
# 开发服务器
pnpm dev
# 构建项目
pnpm build
# 生成静态站点
pnpm generate
# 预览构建结果
pnpm preview
# 代码检查
pnpm lint
pnpm lint:fix
# 代码格式化
pnpm format
pnpm format:check自动导入
Nuxt 3 提供强大的自动导入功能：
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 3');
const count = computed(() => title.value.length);
const handleClick = () => {
console.log('Button clicked!');
};
onMounted(() => {
console.log('Component mounted');
});
</script>最佳实践
组件开发
- 使用 Composition API
- 优先使用
<script setup>语法 - 合理使用 TypeScript 类型定义
- 遵循 Vue 3 和 Nuxt 3 风格指南
页面开发
- 利用文件系统路由
- 使用
<Head>组件管理 SEO - 合理使用中间件
- 优化服务端渲染性能
样式开发
- 优先使用 Tailwind CSS 类
- 复杂样式使用 SCSS
- 保持组件样式的作用域
- 使用 CSS 变量进行主题定制
状态管理
- 使用 Pinia 进行状态管理
- 合理拆分 store
- 使用 TypeScript 定义 store 类型
- 避免在组件中直接修改状态
部署
静态部署
bash
# 生成静态站点
pnpm generate
# 部署到静态托管服务
# 如 Vercel、Netlify、GitHub Pages 等服务端部署
bash
# 构建生产版本
pnpm build
# 启动生产服务器
pnpm preview部署到 Vercel
Nuxt 应用可以轻松部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。