前言
身为前端工程师开发网页，代码编辑器肯定必不可少，在这个系列将会使用 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) 相比，好像少了点什么，怎么有用了 却没看见在哪里 import 的呢？
其实呢， 这个元件就是我们前面浏览器看到的欢迎画面，是 Nuxt 框架自带的一个组件，而且 Nuxt 自动导入元件的更是其特色之一，后面的系列我们会再提到自动导入 (Auto Imports)。
在这里直接移除 就可以了，我们将 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 的伙伴。
