初次使用Nuxt3脚手架遇见的问题

关于Nuxt

概念

在了解 Nuxt 之前，我们先来了解一下创建一个现代应用程序，所需的技术：

• 支持数据双向绑定 和 组件化（ Nuxt 选择了Vue.js ）。
• 处理客户端的导航（ Nuxt 选择了vue-router ）。
• 支持开发中热模块替换和生产环境代码打包（ Nuxt支持webpack 5和Vite）。
• 兼容旧版浏览器，支持最新的 JavaScript 语法转译（ Nuxt使用esbuild ）。
• 应用程序支持开发环境服务器，也支持服务器端渲染 或 API接口开发。
• Nuxt 使用 h3来实现部署可移植性（h3是一个极小的高性能的http框架）
  • 如：支持在 Serverless、Workers 和 Node.js 环境中运行。

Nuxt 是一个 直观的 Web 框架

• 自 2016 年 10 月以来，Nuxt专门负责集成上述所描述的事情 ，并提供前端和后端的功能。
• Nuxt 框架可以用来快速构建下一个 Vue.js 应用程序，如支持 CSR 、SSR、SSG 渲染模式的应用等。

Nuxt3 环境搭建步骤

在开始之前，请确保您已安装推荐的设置：

• Node.js （最新 LTS 版本，或 16.11以上）

• VS Code ✓ Volar、ESLint、Prettier (可选)

命令行工具，新建项目（hello-nuxt )

• 方式一：npx nuxi init hello-nuxt
• 方式二：pnpm dlx nuxi init hello-nuxt
• 方式三：npm install –g nuxi && nuxi init hello-nuxt

运行项目: cd hello-nuxt

• yarn install
• pnpm install --shamefully-hoist（创建一个扁平的 node_modules 目录结构，类似npm 和 yarn）
• yarn dev

搭建时遇见的问题

我运行的是：

npx nuxi init hello-nuxt 

1.Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: connect ETIMEDOUT 185.199.108.133:443

这个是可能是因为访问github需要连接外网

解决办法1

用个梯子‍

解决办法2

Win 电脑 host 配置路由：
c:/Windows/System32/drivers/etc/hosts
第四步：在host文件中新增一行 ，编写如下配置：

185.199.108.133 raw.githubusercontent.com

检验

重新ping域名，如果通了就可以用了

这种就是好了

2.reason: unable to verify the first certificate

Error: Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: unable to verify the first certificate

证书验证失败了，因为我用的是steam+代理，可能是因为这个的原因吧。

解决办法1

我直接：

git clone -b v3 https://github.com/nuxt/starter.git 01-hello-nuxt

克隆github上的脚手架
后面的“01-hello-nuxt ”是你想初始化的项目名

3.安装依赖超时

npm i

然后直接超时了：

解决方法1

删除：

该会影响我们的下载源，我是把这个文件删了，然后再修改package.json文件：

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0"
  }
}

npm i

改过程可能等的时间比较长，请内心等待

运行项目

文件目录

目录介绍

运行脚手架

npm run dev

运行成功！