Nuxt3项目搭建详细步骤

Nuxt3是基于vue3的服务端渲染的网络框架,[官网网址]

一、安装环境

1.Nodejs 版本要在14.xx以上,最好为16.9。 按官网上的下载最新的18.xx时会出现问题。
2.VSCode下载最新的.
3.安装vscode 插件volar 对vue3和ts的支持比较好。
4.安装yarn 安装好nodejs后,再执行 npm install -g yarn

二、项目创建。

命令行窗口执行
npx nuxi init <project-name>

如果以上命令执行成功,请忽略此块内容 由于国内众所周知的网络原因,这一步会执行失败:
ERROR Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: getaddrinfo ENOENT raw.githubusercontent.com

本以为开了科学上网就会没问题的。但还是什么出现这个问题。 这时候就要在打开上面错误中的网址https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json 浏览器中返回会数据:

{
  "name": "v3",
  "defaultDir": "nuxt-app",
  "url": "https://nuxt.com",
  "tar": "https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3"
}

然后下载https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3并且解压,并将解压后文件夹中的starter-3目录中的文件拷贝到你自己的项目目录。

上面的手动操作步骤就是模拟npx nuxi init 的操作。 然后这项目的nuxx3工程的初始化就算完成了。

然后用终端打开项目目录,在终端执行下载依赖包。
yarn install

三、项目启动

在根目录下执行
yarn dev -o

这样项目就搭建完成了。步骤很简单,但坑有点多,花了不少时间。