Nuxt3项目搭建详细步骤

  • Post author:
  • Post category:其他

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工程的初始化就算完成了。

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

yarn install

三、项目启动

在根目录下执行
yarn dev -o 

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

版权声明:本文为凸然网站的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:Nuxt3项目搭建详细步骤