【Nuxt 实战】01-初始化项目、新增组件库、图标库

前言

我相信大部分前端工程师和我一样，一直以来想使用前端技术来做一个属于自己的个人博客网站，不涉及纯后端语言如 Java、Python 等。

当然我们也可以使用 Node 框架来实现后端技术，如 Koa、Express、Nest。自从 Nuxt 出现之后，使用 Nuxt 这一种框架我们便可以实现前端和后端之间的交互。

但是如果涉及到 Nuxt 框架本身不支持的业务或者特殊需求的业务，还是需要 Node 框架来提供支持。

在 Nuxt 中写接口，在 Nuxt 中与数据库打交道等，涉及到与后端技术的交互，大部分都可以实现。随着 Vue 和 Vite 的逐渐稳定，Nuxt 也变得非常稳定，可以胜任一些中大型网站的建设。

我始终认为学习一门技术，是靠着项目来驱动的，而不是一味的看文档，如果不去实战，是无法理解和体会技术本身所带来的价值的。

我们不妨就从 0 到 1 使用 Nuxt 技术来搭建一个属于自己的个人博客或者技术社区，边实战，边学习技术，我相信我们可以掌握 Nuxt，从而成为一名前端全栈工程师。

初始化项目

根据 Nuxt 官网的教程，我们先初始化一个 Nuxt 项目，如下图，我们使用 pnpm 的方式新建一个项目。

在项目文件夹下的终端命令行输入 pnpm dlx nuxi@latest init femanor-nuxt。

可能会出现上述图片中创建项目失败的情况，从其报错信息来看，意思是访问这个模板下载地址失败。

Mac 电脑 host 配置路径： /etc/hosts

Win 电脑 host 配置路由： c:/Windows/System32/drivers/etc/hosts

此时，我们可以在 hosts 文件中加上这行配置 185.199.108.133 raw.githubusercontent.com。

然后，刷新 DNS。

Mac 电脑在终端执行 sudo killall -HUP mDNSResponder

Win 电脑 在终端执行 ipconfig/flushdns

这时候就可以顺利的创建项目，我们就使用 pnpm 来管理包。

选择完之后，就等待着 nuxi 脚手架帮我们初始化项目。

创建项目完毕，这时候就可以使用 IDE，如 VSCode 打开项目，在终端输入 pnpm run dev。

打开浏览器输入 http://localhost:3000 就可以看到成功运行的 Nuxt 初始化项目。

添加 UI 组件库和图标库

添加 NuxtUI

打开 Nuxt 官网中的 Modules 部分，在这里我们查看有没有我们需要使用的 UI 组件库。

点击进去之后，选择左侧列表的 UI 部分，我们可以看到 Nuxt 给我们提供了非常丰富 UI 组件库。

我们先安装 @nuxt/ui，打开 @nuxt/ui Modules 之后，点击右侧的 Documentation 就可以打开对应的官方文档地址，我们根据官网文档来安装使用 NuxtUI 组件库。

点击进去之后，我们可以看到 NuxtUI 官网提示 NuxtUI 的 v3-alpha 版本已经发布，我们不妨使用其新版本看看如何。

打开 NuxtUI v3-alpha 版本的文档之后，点击左侧列表的 Installation 部分，根据安装步骤进行使用。

首先，在项目终端命令行输入 pnpm add @nuxt/ui@next 安装 NuxtUI。

值得注意的是，如果我们使用的是 pnpm 来管理包，此时我们应该在项目根目录新建 .npmrc 文件，然后在里面输入 shamefully-hoist=true 这行内容。

然后，把安装好的 @nuxt/ui 添加到项目根目录 nuxt.config.ts 配置文件中的 modules。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxt/ui'], // 添加 @nuxt/ui 到 modules 中
})

接着，新建 assets/css/main.css 文件，在里面加上如下内容：

@import "tailwindcss";
@import "@nuxt/ui";

然后把该 css 文件注册到 nuxt.config.ts 中，从而使其能够全局生效。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'] // 全局注册 css
})

最后，如果你在 VSCode 中使用 Tailwind CSS IntelliSense 这个插件，当然强烈建议使用。

那么最好在项目根目录中的 .vscode/setting.json 文件中添加如下内容：

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

验证是否引用成功，参照 Nuxt UI 文档在项目代码中新增 <UButton>Button</UButton> 这个按钮，看是否正确显示在页面中。

添加 ElementPlus

与添加 Nuxt UI 的方式相同，在 Nuxt Modules 中的 UI 列表页，找到 @element-plus/nuxt 后查看。

参照上述安装步骤将组件库引用到项目中。

当然也可以参照官方文档安装，我们参照 Element Plus 官网安装试试。

首先，在项目终端命令行输入 pnpm install -D @element-plus/nuxt。

然后，将 @element-plus/nuxt 注册到 nuxt.config.ts 配置文件中的 modules 中即可。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ 
    modules: ['@nuxt/ui', '@element-plus/nuxt'] // 添加 @element-plus/nuxt 到 modules 中
})

添加图标库

添加图标库的方式也很简单，同样在 Nuxt Modules 中找到 UI 列表项，我们发现有一个官方的图标库叫做@nuxt/icon，我们使用这个。

打开后，我们根据其介绍发现，这个图标库能够提供 20万+ 的图标，对于我们建设项目来说远远足够。

安装非常简单，在项目命令行终端输入 npx nuxi module add icon，这时候 nuxi 脚手架会自动把 @nuxt/icon 这个包添加到 nuxt.config.ts 配置文件中的 modules中。

然后就可以直接使用，如在项目中引入 <Icon name="uil:github" style="color: black" />

值得注意的是，在终端打印出一则警告信息，作者前期忽略了这条警告信息，导致有时候图标加载不出来，看来是有原因的。

其实安装的时候，文档有一条说明，强烈建议安装本地图标数据。

这句话是什么意思呢，也就是说，当我们在使用图标库的时候，如我们打开icones 图标库，可以看到有很多图标库，先随便点一个，例如就第一个 Material Symbols。

点进去之后，随便点一个图标，我们看到冒号 ： 前面是每一类整体的图标库名称，冒号 ： 后面是具体的图标的名称。

上述我们引用的 github 的图标为 uil:github，也就是说使用的图标库为 uil ，这也可能是缩写，使用的具体的图标是 github。

此时，我们在图标库中搜索 uil ，显示的第一个应该就是所使用的图标库。

进去之后，搜索 github，果然搜到这个图标。

这时候，回归正题，安装本地库的意思就是，如果使用 uil:github 图标，就要使用 @iconify-json/uil 安装它的集合，在终端命令行输入 pnpm add -D @iconify-json/uil。

这样，图标可以在本地或从您的无服务器功能中提供，这在SSR和客户端上都更快、更可靠。

项目 Github 地址

结束语

本节，我们初始化了一个 Nuxt 项目，并集成 NuxtUI 和 ElementPlus 这两个组件库，以及引入开箱即用的图标库。UI 和图标库方面的工作我们算是完成了，接下来就是在项目中集成 Pinia、构建导航栏以及实现暗黑模式功能的建设。