Nuxt3项目搭建步骤[忽略GFW]
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
这样项目就搭建完成了。步骤很简单,但坑有点多,花了不少时间。