前言

本文章会比较粗略的介绍什么是Nuxt3，后续我们创建的项目大概会由哪些模块组成，以及各个模块的具体实现。

官网：Nuxt: The Intuitive Web FrameworkNuxt logoNuxt logoNuxt logo

Nuxt 是一个完全开源，容易入门和上手且可扩展的全栈web框架，基于Vue3的语法，主要功能和React的Next框架类似，适用于大型，且需要做SSR和SEO的项目。

项目介绍

本次整个项目涉及到的主要核心模块和第三包工具如下：

• Nuxt3 全家桶（pages/components/composables/layouts/middleware/modules/pages/plugins/servers/stores/utils）
• 项目环境变量配置（开发，测试，灰度，生产）
• VueUse | VueUseGitHubDiscordTwitterGitHubDiscordTwitter
• I18n module for Nuxt · @nuxtjs/i18n
• Introduction · sidebase (nuxt-auth)
• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
• Getting Started · Nuxt Image
• Element-plus Module · NuxtNuxt logoNuxt logoNuxt logoNuxt logo
• Documentation · Nuxt Color Mode
• 如何自定义Proxy 代理，Nuxt开启Proxy代理的几种方式
• 如何使用sidebase（和next-auth,nuxt-auth类似）定制授权鉴权逻辑规则
• Nuxt 实现接口请求的几种方式，如何接入带有服务端session验证的其他域名的API服务
• 使用typescript分装自己的全局API请求，如何全局托管，拦截API并更具返回码做对应的操作。
• Pinia ，等其他依赖包，如何实现状态管理
• 系统权限配置，如何根据服务端Api逻辑去定制自己的web路由权限
• 简单的后台登录系统，以及包含多级路由的菜单（Nested Routes）
• 主题定制（默认模式和黑夜模式）
• 国际化，多语言配置
• 如何打包自己的项目，并成功部署到生产环境访问等等。

下面是目前出版的首页截图

目前先大致介绍该系统的组要模块，下篇文章将会带你踏入Nuxt世界的第一步！如何使用Nuxt构建一个维护性强，功能强大的项目[笑]，有兴趣的伙伴可以点个关注，一起交流学习。