@via-cli/nuxt3-project-temp

这是一个现代化的 Nuxt 3 项目模板生成器，遵循 Nuxt 3 最新规范和最佳实践。

特性

✨ 核心功能

• 🚀 Nuxt 3.15+ 最新版本
• 💪 完整的 TypeScript 支持
• ⚡ Vue 3.5+ Composition API
• 📁 自动路由生成
• 🔥 热模块替换 (HMR)
• 📦 自动组件导入

🎨 可选配置

• Tailwind CSS 3.x 集成
• ESLint 9.x 代码检查
• Prettier 3.x 代码格式化

🏗️ 项目结构

• 完整的目录结构（pages, components, layouts, composables, utils, server）
• 示例页面和组件
• 服务端 API 路由示例
• 中间件示例
• 错误页面处理
• 类型声明文件

使用方法

通过 via-cli 创建项目

via-cli init my-nuxt-app --template nuxt3-project-temp

独立使用

npm install @via-cli/nuxt3-project-temp
node node_modules/@via-cli/nuxt3-project-temp/index.js

交互式配置

生成器会询问以下信息：

1. 项目名称: 项目的名称
2. 版本号: 初始版本（默认 0.0.1）
3. 项目描述: 项目的简短描述
4. 作者: 项目作者
5. 使用 Tailwind CSS: 是否集成 Tailwind CSS
6. 配置 ESLint: 是否添加 ESLint 配置
7. 配置 Prettier: 是否添加 Prettier 配置

生成的项目结构

my-nuxt-app/
├── .vscode/                 # VS Code 配置
│   ├── extensions.json     # 推荐的扩展
│   └── settings.json       # 编辑器设置
├── assets/                  # 静态资源
│   ├── css/                # CSS 文件
│   │   ├── main.css       # 主样式（非 Tailwind）
│   │   └── tailwind.css   # Tailwind 样式
│   └── scss/               # SCSS 变量
│       └── variables.scss
├── components/              # Vue 组件（自动导入）
│   └── FeatureCard.vue    # 示例组件
├── composables/             # 组合式函数（自动导入）
│   └── useCounter.ts      # 示例 composable
├── layouts/                 # 布局组件
│   └── default.vue        # 默认布局
├── middleware/              # 路由中间件
│   └── auth.ts            # 认证中间件示例
├── pages/                   # 页面组件（自动路由）
│   ├── index.vue          # 首页
│   └── about.vue          # 关于页
├── plugins/                 # 插件
│   └── example.ts         # 插件示例
├── public/                  # 公共静态文件
├── server/                  # 服务端代码
│   └── api/                # API 路由
│       └── hello.ts       # API 示例
├── types/                   # 类型声明
│   └── nuxt.d.ts          # Nuxt 类型扩展
├── utils/                   # 工具函数（自动导入）
│   └── index.ts           # 工具函数
├── .env.example            # 环境变量示例
├── .eslintignore           # ESLint 忽略文件
├── .gitignore              # Git 忽略文件
├── .npmrc                  # npm 配置
├── .prettierignore         # Prettier 忽略文件
├── .prettierrc             # Prettier 配置
├── app.vue                 # 根组件
├── error.vue               # 错误页面
├── eslint.config.mjs       # ESLint 配置
├── LICENSE                 # 许可证
├── nuxt.config.ts          # Nuxt 配置
├── package.json            # 项目依赖
├── postcss.config.cjs      # PostCSS 配置
├── README.md               # 项目说明
├── tailwind.config.ts      # Tailwind 配置
└── tsconfig.json           # TypeScript 配置

项目启动后的命令

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

# 生成静态网站
pnpm generate

# 代码检查（如果启用 ESLint）
pnpm lint
pnpm lint:fix

# 代码格式化（如果启用 Prettier）
pnpm format

# 类型检查
pnpm typecheck

技术栈

核心依赖

• Nuxt: ^3.15.1
• Vue: ^3.5.13
• Vue Router: ^4.5.0

开发依赖

• TypeScript: ^5.7.2
• @nuxt/devtools: ^1.7.4
• @nuxt/eslint: ^0.8.0（可选）
• @nuxtjs/tailwindcss: ^6.12.3（可选）
• ESLint: ^9.18.0（可选）
• Prettier: ^3.4.2（可选）

最佳实践

1. 组件开发

• ✅ 使用 <script setup> 语法
• ✅ 使用 TypeScript 定义 Props 和 Emits
• ✅ 组件自动导入，无需手动 import
• ✅ 使用 Composition API

2. 路由管理

• ✅ 基于文件系统的自动路由
• ✅ 使用动态路由 [id].vue
• ✅ 嵌套路由使用文件夹结构
• ✅ 路由中间件保护页面

3. 数据获取

• ✅ 使用 useFetch 进行数据获取
• ✅ 使用 useAsyncData 处理复杂数据逻辑
• ✅ 服务端 API 路由在 server/api/

4. 状态管理

• ✅ 使用 useState 管理全局状态
• ✅ 使用 Composables 封装可复用逻辑

5. 样式管理

• ✅ 支持 Scoped CSS
• ✅ 支持 SCSS/SASS 预处理器
• ✅ Tailwind CSS 实用优先（可选）
• ✅ 全局样式在 assets/css/

6. SEO 优化

• ✅ 使用 useHead 设置页面 meta
• ✅ SSR 服务端渲染
• ✅ 支持静态站点生成 (SSG)

与其他模板的对比

vs vue-bu-temp (Vue 组件库模板)

• 用途: Nuxt 3 用于完整应用，vue-bu-temp 用于组件库
• 路由: Nuxt 3 自动路由，组件库无路由
• 服务端: Nuxt 3 支持 SSR 和 API 路由
• 构建: Nuxt 3 构建应用，组件库构建独立组件

vs ts-utils-temp (TypeScript 工具库模板)

• 用途: Nuxt 3 用于 Web 应用，工具库用于纯 TypeScript 函数
• 框架: Nuxt 3 基于 Vue，工具库框架无关
• 运行环境: Nuxt 3 浏览器和服务端，工具库任何 JS 环境

配置说明

Nuxt 配置 (nuxt.config.ts)

export default defineNuxtConfig({
  // 开发工具
  devtools: { enabled: true },
  
  // TypeScript 严格模式
  typescript: {
    strict: true,
    typeCheck: true
  },
  
  // Tailwind 模块（可选）
  modules: ['@nuxtjs/tailwindcss'],
  
  // 应用配置
  app: {
    head: {
      title: '项目名称',
      meta: [/* ... */]
    }
  }
})

TypeScript 配置 (tsconfig.json)

• 继承 .nuxt/tsconfig.json
• 严格模式启用
• 支持 JSX
• 模块解析策略：bundler

ESLint 配置 (eslint.config.mjs)

• 使用 @antfu/eslint-config
• Vue 3 和 TypeScript 支持
• 自动格式化 CSS 和 HTML

环境变量

创建 .env 文件（参考 .env.example）：

NODE_ENV=development
APP_URL=http://localhost:3000
API_BASE_URL=http://localhost:3000/api

在代码中使用：

const config = useRuntimeConfig()
// 访问公共环境变量
console.log(config.public.apiBaseUrl)

部署选项

1. 静态站点（SSG）

pnpm generate
# 部署 .output/public 到静态托管服务

2. Node.js 服务器（SSR）

pnpm build
# 启动服务器
node .output/server/index.mjs

3. 支持的平台

• Vercel
• Netlify
• Cloudflare Pages
• AWS Amplify
• 任何 Node.js 服务器

常见问题

Q: 如何添加新页面？

A: 在 pages/ 目录创建 .vue 文件，路由自动生成。

Q: 组件如何自动导入？

A: 放在 components/ 目录的组件会自动注册，直接使用即可。

Q: 如何调用服务端 API？

A: 在 server/api/ 创建文件，然后用 useFetch('/api/xxx') 调用。

Q: 如何配置代理？

A: 在 nuxt.config.ts 的 nitro.devProxy 中配置。

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT © ViaCli Team

相关链接

• Nuxt 3 官方文档
• Vue 3 文档
• TypeScript 文档
• Tailwind CSS 文档
• Via CLI 主仓库