一、前言
每个程序员心里都住着一个想要亲手搭建博客的"造物主"，但现实往往是：激情启动、疯狂折腾、然后...悄然搁置。我们都走过这条路。
但这次不一样。在AI已经能一键生成整个网站的时代，为什么还要"手搓"博客？
这恰恰是问题的核心：
当创造变得太容易，亲手搭建的过程反而成了我们对抗技术异化的一种方式。
这不是在重复造轮子，而是在理解轮子为何而转。每一次配置、每一行代码，都是对技术本质的重新触摸。
我选择Nuxt.js，是因为它在"开箱即用"与"深度可控"之间找到了完美的平衡点：
- 服务端渲染（SSR） 让博客天生对搜索引擎友好
- 基于文件的路由让内容管理变得直观自然
- Vue 3的响应式魅力 结合
TypeScript的严谨，开发体验流畅而可靠 - Nitro服务器引擎让部署变得轻而易举
这个博客将不仅仅是一个展示窗口，更是我的技术游乐场，你甚至可以把它当成我们"个人公司"的官网，在这里实验新想法、记录踩坑经历、沉淀思考轨迹。如果恰巧这些内容也能帮到正在阅读的你，那便是最好的奖励。
那么，我们开始吧。这次，不是为了追赶技术潮流，而是为了找回编程最原始的快乐：从零开始，建造属于自己的数字角落。
二、项目初始化
技术框架一直在迭代，如果想进一步学习，可以自行去官网查阅官方文档。 官网：nuxt.com/ 中文站点：nuxtjs.org.cn/
1. 新建项目
先决条件
- Node.js-20.x 或更高版本
- 一款自己顺手的编辑器，这里我用 vscode
- 打开终端
- 创建项目
sql
pnpm create nuxt@latest csyblog-nuxt4
cd csyblog-nuxt4code .快捷打开项目（前提是装了vscode）pnpm run dev启动项目
2. NuxtDevTools
默认会给我们开启调试功能，在这里打开调试面板，如果没有，则需自行修改配置文件到开配置即可。
nuxt.config.ts
php
export default defineNuxtConfig({
devtools: { enabled: true },
})更多详细说明看这里：devtools.nuxtjs.org.cn/guide/getti...
3. 目录结构说明
Nuxt 默认提供了一套目录结构，基本涵盖了日常开发的所有情况，所以我们只要遵循这套约定，就能将更多的精力用在业务上，提高工作效率。当然除了默认规则，也提供了自定义修改的入口，非常灵活。具体可在这里查看。nuxtjs.org.cn/docs/4.x/gu...
4. 整合 tailwindcss
点击模块，这里提供了很多模块，我们可以快速集成到项目中，提高开发效率。
点击 css, 找到 tailwindcss ，根据文档完成安装，文档链接：nuxtjs.org.cn/modules/tai... 、tailwindcss.nuxtjs.org/getting-sta...
- 安装
sql
npx nuxi@latest module add tailwindcss- Tailwind CSS IntelliSense 插件安装
- 测试
可以看到，已经生效了。
常见问题：
没有代码提示！！！
这里虽然通过命令可以帮我们快速整合，但是vscode插件没法获取，我们需要自己手动引入一下，插件里也有说明。
按照要求，完成修改即可
测试代码提示正常了。
三、总结
如果只是完成和我一样的进度，那可能你只需要2分钟就可以了，但是我希望你能够清楚的知道，为什么是这样的，并且这些命令的出处，以及后续深入探索时应该去哪里看。大白话，我想传达的是一种学习方式，而不是行为。
为了方便查看，这里列出所有出现的文档链接。
nuxt官网： nuxt.com/
nuxt中文站点： nuxtjs.org.cn/
tailwindcss官网： tailwindcss.com/
tailwindcss中文站点： tailwind.nodejs.cn/
nuxt tailwind插件： tailwindcss.nuxtjs.org/
千里之行，始于足下。你的"个人公司"从这第一个2小时开始。欢迎在评论区分享你的进展或遇到的卡点，我会逐一查看，尽可能的帮住解决。我们下一篇文章见！