前言
身为前端工程师开发网页，代码编辑器肯定必不可少，在这个系列将会使用 VS Code 进行开发，不过呢，也并没有说一定非得使用 VS Code，所以说不论你是 Vim 派、VS Code 抑或是使用 WebStorm，自己用的顺手最重要。接下来我将带你开始建立 Nuxt 3 的项目。
只是玩玩而已啦
如果你还在观望还不想安装相关工具与环境，那么可以点击下面其一链接，在 StackBlitza 或 CodeSandbox 的线上编辑器环境稍微玩玩，直接线上体验 Nuxt 3。
开始建立第一个项目
前提条件
开始之前，依照 Nuxt 3 官网的起手式我们有几个项目需要做一下检查，我们这里仅先注意一下 Node.js 的版本，建议使用目前最新 LTS 版本 v16.17.0 (包含 NPM v8.15.0)。
使用 nuxi 建立 Nuxt 3 项目
nuxi 全名为 Nuxt Command Line Interface，是由 Nuxt 提供开发的标准工具，Nuxt CLI 就像是 Vue CLI 可以建立 Vue 项目，我们当然也就可以使用 Nuxt CLI 来建立 Nuxt 的项目。
首先，打开终端机 (Terminal)，将目录切换至自己习惯的工作区，接着输入如下的 nuxi 提供指令并执行，来初始化建立一个 Nuxt 3 专案。在此，我们的专案名为 nuxt-app。
npx nuxi init nuxt-app
如下图，npx 会询问你是否安装最新版本的套件 nuxi@3.0.0-rc.10 输入 y 即可。
执行完命令后直到出现如下提示，说明项目已经初始建立成功，完成后可以发现目前目录下多了一个名为 nuxt-app 的文件夹，这个文件夹也就是 Nuxt 3 项目的根目录。
接下来，我们可以进入项目目录 nuxt-app。
在 nuxt-app 目录下可以看到熟悉的 package.json，我们就可以开始安装 Nuxt 3 的相关依赖。
Nuxt CLI 如同 Vue CLI 已经在建立时帮我们初始完成许多事情，再安装完相关依赖后输入下列命令，我们就可以在开发环境下启动 Nuxt 了。
如果没有意外，可以看到 Nitro 帮我们启动了 Nuxt 3 的服务。
根据提示，我们可以在浏览器输入网址 http://localhost:3000/ 看看服务是否正常运作。
如果看到如下图的欢迎画面，恭喜你！我们已经成功建立第一个 Nuxt 3 项目咯！
现在你可以尝试打开在项目目录下的 app.vue 文件之中，app.vue 是我们 Nuxt 项目的入口，它的内容如下：
可以发现它与 Vue 3 的单一文件 (Single File Component, SFC) 相比，好像少了点什么，怎么有用了 <NuxtWelcome /> 却没看见在哪里 import 的呢？
其实呢，<NuxtWelcome /> 这个元件就是我们前面浏览器看到的欢迎画面，是 Nuxt 框架自带的一个组件，而且 Nuxt 自动导入元件的更是其特色之一，后面的系列我们会再提到自动导入 (Auto Imports)。
在这里直接移除 <NuxtWelcome /> 就可以了，我们将 app.vue 调整如下，并保存文件。
可以看见因为 Nuxt 预设 Vite 构建并且支持HMR (Hot Module Replacement)，我们可以在浏览器快速的看见修改后的结果。
至此，大家就可以先简单的玩玩 Nuxt 3，接下来我将补充一些 nuxi 的指令与参数简介。
Nuxt CLI 常用指令
以下将简单介绍一些常用的命令，如果你在项目目录下记得使用 npx 来执行 nuxi。
另外在此提醒，下面所列的指令部分参数会进行省略，若有兴趣翻翻完整的指令与参数说明，可以参考 Nuxt 3 官方文件
nuxi init
这个 nuxi init 指令是用来初始化一个 Nuxt 项目，等价 nuxi create 指令，dir 你可以填写文字作为项目与文件夹名称，也可以填写完整路径来建立项目目录。
nuxi dev
当我们在本地端进行开发时，需要运行开发环境，当我们执行 npm run dev -- -o 时，依据 package.json 中的 scripts 所列，其实就是在执行 nuxi dev -o，其中的 -o 表示服务启动后开启浏览器。
如果启动服务发现 Port 冲突，你也可以通过 -p 来将预设的监听的 Port: 3000 调整为其他数值。
e.g. nuxi dev -p 3001 或 npm run dev -- -o -p 3001
nuxi cleanup
nuxi cleanup 等价 nuxi create 指令，用来删除 Nuxt 自动产生的文件和缓存包括：
.nuxt
.output
node_modules/.vite
node_modules/.cache
nuxi upgrade
这个命令可以用来将目前项目的 Nuxt 3 升级至最新的版本，如果有一些可能行为调整或不相容的情况，可以再依据实际情境搭配 -f 参数来强制更新。
如下图，只要一行指令 npx nuxi upgrade 就可以将项目版本由 3.0.0-rc.9 升级至 3.0.0-rc.10，在 RC 阶段或之后想定期升级版本来说非常好用，但也请记得升级前可以先看一下官方的 Changelog。
小结
这篇主要介绍了如何建立 Nuxt 3 项目与 Nuxt CLI 常用指令，所谓「工欲善其事，必先利其器」，在我们开始深入介绍 Nuxt 3 前，会先带领大家把环境搭建完善，虽然接下来需要多花一点篇幅来介绍配置，但是这些配置都将有利于开发 Nuxt 。
感谢大家的阅读，也欢迎大家给予建议 ：）
如果对这个 Nuxt 3 系列感兴趣，可以关注一下小编，也欢迎分享给喜欢或正在学习 Nuxt 3 的伙伴。
