Day 3：01. 基于Nuxt开发个人呢博客项目-初始化项目

一、前言

每个程序员心里都住着一个想要亲手搭建博客的"造物主"，但现实往往是：激情启动、疯狂折腾、然后...悄然搁置。我们都走过这条路。

但这次不一样。在AI已经能一键生成整个网站的时代，为什么还要"手搓"博客？

这恰恰是问题的核心：

当创造变得太容易，亲手搭建的过程反而成了我们对抗技术异化的一种方式。

这不是在重复造轮子，而是在理解轮子为何而转。每一次配置、每一行代码，都是对技术本质的重新触摸。

我选择Nuxt.js，是因为它在"开箱即用"与"深度可控"之间找到了完美的平衡点：

• 服务端渲染（SSR） 让博客天生对搜索引擎友好
• 基于文件的路由让内容管理变得直观自然
• Vue 3的响应式魅力 结合TypeScript的严谨，开发体验流畅而可靠
• Nitro服务器引擎让部署变得轻而易举

这个博客将不仅仅是一个展示窗口，更是我的技术游乐场，你甚至可以把它当成我们"个人公司"的官网，在这里实验新想法、记录踩坑经历、沉淀思考轨迹。如果恰巧这些内容也能帮到正在阅读的你，那便是最好的奖励。

那么，我们开始吧。这次，不是为了追赶技术潮流，而是为了找回编程最原始的快乐：从零开始，建造属于自己的数字角落。

二、项目初始化

技术框架一直在迭代，如果想进一步学习，可以自行去官网查阅官方文档。 官网：nuxt.com/ 中文站点：nuxtjs.org.cn/

1. 新建项目

先决条件

• Node.js-20.x 或更高版本
• 一款自己顺手的编辑器，这里我用 vscode

• 打开终端
• 创建项目

pnpm create nuxt@latest csyblog-nuxt4

• cd csyblog-nuxt4
• code . 快捷打开项目（前提是装了vscode）
• pnpm run dev 启动项目

• 访问 http://localhost:3000/

2. NuxtDevTools

默认会给我们开启调试功能，在这里打开调试面板，如果没有，则需自行修改配置文件到开配置即可。

nuxt.config.ts

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...

• 安装

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小时开始。欢迎在评论区分享你的进展或遇到的卡点，我会逐一查看，尽可能的帮住解决。我们下一篇文章见！