Nuxt 4：一个更加完善、更加强大的 Vue 全栈框架

Nuxt.js 是一个基于 Vue.js 的全栈框架，允许你使用 Vue.js 构建服务端渲染 (SSR) 的应用，同时也可以创建单页应用。Nuxt 4 是 Nuxt.js 的下一个主要版本，目前正处于 alpha 阶段。

Nuxt 4 的主要目标是提升开发者体验，提升框架的功能和性能，并提供更好的错误处理和更完善的路由系统。

以下是一个简单的 Nuxt 4 项目的目录结构示例：

- components/
- layouts/
- pages/
- plugins/
- server/
- store/
- nuxt.config.ts
- package.json
- tsconfig.json (如果使用 TypeScript)

nuxt.config.ts 文件示例：

export default defineNuxtConfig({
  // 全局 head 配置
  head: {
    title: 'Nuxt 4 App',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My Nuxt 4 App' }
    ]
  },
  // 全局 CSS 配置
  css: [
    '~/assets/css/main.css'
  ],
  // 插件配置
  plugins: [
    '~/plugins/myPlugin.js'
  ],
  // 组件配置
  components: {
    directory: '~/components'
  },
  // 服务器配置
  server: {
    host: '0.0.0.0',
    port: 3000
  },
  // 构建配置
  build: {
    transpile: [__dirname],
    loaders: {
      scss: {
        additionalData: `@import "~assets/scss/variables";`
      }
    }
  }
})

pages/index.vue 文件示例：

<template>
  <div>
    <h1>Welcome to Nuxt 4!</h1>
  </div>
</template>
 
<script setup>
// 此处可以使用 Vue 3 的 Composition API
</script>

请注意，Nuxt 4 目前还在 alpha 阶段，不建议在生产环境中使用。随着 Nuxt 4 的发展，上述示例代码可能会有所变化。