从零开始的nuxt3之路（1），项目构建

为了优化一下自己的简历，拓展一下技术栈，顺便了解新知识，于是就想做了个新项目。

考虑了自己的技术栈和空余时间，个人选了nuxt3+vue3+pina来做这个简单的项目。

正文

我为什么要整理这样一套开发文档？

一是因为市面上的文档都较为零散，即便是nuxt3官网，他们给的文档也相当模糊，有些官方示例甚至跟不上最新版本的nuxt。

二是因为通过整理文档加深学习，能让自己更手中的技术栈更系统，更方便，通过和大家交流，查漏补缺。

官方的文档副本，推荐nuxt3中文网，不过仅供参考，具体要系统化的学习项目，还是需要自己梳理一遍。

另外，个人推荐Nuxt 实战系列 - 白雾茫茫丶的专栏，他的这篇专栏很详尽，开发的也较为系统。

需求分析

这里我先要明晰我的开发方向。

项目是类博客的论坛，文档展示为主，面向C端，可供游客阅览，偏静态化的网站，便于SEO。

以下是该项目未来的规划方向，如果您也有以下兴趣，欢迎提交PR来丰富项目。

• 以文档为主，后续会增加用户和评论
• 极简设计，减少各种无用的装饰和功能
• 文件下载，注册的用户可以简单的上传下载

如果您的开发方向和我类似，我推荐您可以star或fork我的项目：CrazyStudent13/nuxt3-article，和我一起来完善这个项目。

Nuxt3优势

市面上有很多人吹nuxt3的优势，但是整体开发之后个人体验感觉一言难尽。

要说好用，nuxt3官方封装了很多插件，只要你能适应他这套写法，确实算是还不错，省事，效率高。

可因为过度封装，nuxt3很多东西需要你特别了解，学习成本略有提高，需要一定时间成本去适应。

• 支持Vue3 的优势：Nuxt3 充分利用了 Vue3 的所有优点，包括性能优化、更好的 TypeScript 支持。
• 官方插件丰富：Nuxt3 提供了许多开箱即用的插件，如状态管理、中间件、页面过渡动画等，使得开发过程更加简单和高效。
• 性能优化：Nuxt3 通过使用最新的 Web 技术和优化技巧，无论是服务端渲染还是静态站点生成，提供了更好的性能和更快的加载速度。
• 文件系统路由：Nuxt3 的文件系统路由允许开发者通过简单的文件和目录结构来组织应用路由，使得开发过程更加简洁明了。这有助于减少配置工作量，提高开发效率。
• 服务端渲染（SSR）和静态站点生成（SSG）：Nuxt3 支持服务端渲染和静态站点生成，这有助于解决单页应用（SPA）中的 SEO 问题，提高页面加载速度，从而改善用户体验。
• 模块化：Nuxt3 具有丰富的模块化生态系统，使得开发者能够轻松地扩展应用的功能，减少开发工作量。通过模块化的方式，开发者可以更加高效地组织和管理代码，提高开发效率。

项目开发

环境推荐node18以上，因为pnpm最低的要求就是node18，如果你没有安装pnpm，推荐全局安装一下pnpm。

当然，这是个人喜好，如果您现在的包管理工具很稳定，就按自己的来就好。

npm install pnpm -g

直接在cmd，打开你要创建项目的目录，使用以下命令创建一个新的入门项目。

pnpm dlx nuxt@latest init <project-name>

当然，如果你已经创建好了目录，可以不用输入project-name

pnpm dlx nuxt@latest init

如果没到文件夹，记得切换到项目文件夹。

cd <project-name>

安装依赖项，在运行pnpm install之前，确保你在 .npmrc 中有 shamefully-hoist=true

pnpm install

完善规则

一开始创建的目录并不完善，比如文件忽略提交，代码格式化规则，代码检测规则。

这些文件，如果我们不配置明白的话，在项目开发中，如果有人和你协同开发，会变得极其麻烦，所以我们这里配置好对应的规则。

这里就不展开细说了，每个人都有自己的配置习惯，可自行配置。

我个人喜欢的是eslint与.prettierrc配置，这里我之前写过文档，如果您感兴趣，可以参考我的代码规则书。

当然，您也可以直接fork我的CrazyStudent13/nuxt3-article参考，具体细节可以感觉自己的喜好自行调节。

项目结构

目录结构如下，其实其中有些目录是用不到的，不过这个可以根据大家自己的需求酌情决定。

我的项目没那么多配置文件，个人习惯用不到那么多的奇怪文件。

这里只是展开所有的目录，便于大家查看。

📁 .nuxt // Nuxt在开发中使用.nuxt/目录来生成你的Vue应用程序,记得忽略提交。
📁 .output // 当构建你的应用程序用于生产时，Nuxt 会创建 .output/ 目录,记得忽略提交。
📁 assets // 用于添加所有将由构建工具处理的网站资源,打包后会被处理。
📁 components // 放置所有 Vue 组件的地方。
📁 hooks // 将你的Vue组合式函数自动导入到你的应用程序中。
📁 layouts // Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取为可重用的布局。
📁 middleware // Nuxt 提供了中间件来在导航到特定路由之前运行代码。
📁 modules // 在应用程序中自动注册本地模块。
📁 node_modules // 包管理器会将项目的依赖存储在 node_modules/ 目录中,记得忽略提交。
📁 pages // Nuxt 提供了基于文件的路由功能，用于在你的 Web 应用中创建路由。
📁 plugins // Nuxt拥有一个插件系统，可以在创建Vue应用程序时使用Vue插件和其他功能。
📁 public // 文件夹主要用于存放静态资源文件。这些文件会在构建过程中被直接复制到输出目录的根路径下，不会经过任何处理或编译。
📁 server // 用于在应用程序中注册API和服务器处理程序。
📁 utils // 在整个应用程序中自动导入你的工具函数。
📄 .env // 用于指定构建和开发环境变量。
📄 .gitignore // 指定了Git应该忽略的故意未跟踪的文件。
📄 .nuxtignore // 允许 Nuxt 在构建阶段忽略项目根目录下的文件。
📄 app.vue // Nuxt 应用的主要组件，入口文件。
📄 nuxt.config.ts // Nuxt可以通过一个单独的nuxt.config文件进行简单配置。
📄 package.json // 包含了应用程序的所有依赖项和脚本。

结语

本篇文档就到这里，下一篇开始构建项目模板，从路由文件夹到组件和框架的引入，让项目更符合自己开发习惯。

nuxt3中文网上的很多demo我看了，那些demo真就是完全的demo，不够完善，不够健全，解释也不够，用起来很麻烦。

所以，本次从零开始，自然是会按照最全面，最体系化的方式做，尽可能做一个能够调用接口的项目。

参考

Nuxt3 实战 (一)：初始化项目这篇文章介绍了Nuxt框架的基本信息，包括什么是Nuxt以及Nuxt3的优点。文章还 - 掘金

Nuxt3实战系列之集成ElementPlus UINuxt框架由于做了一些封装处理，已经将入口文件完全隐藏了，因此对于 - 掘金