Nuxt3踩坑指南 - 技术栈

前言

笔者最近在做一个官网，选用了技术栈是Nuxt3,比较早之前接触过Nuxt2然后就推荐了这个框架,毕竟还能SSR(服务端渲染),而且官网项目这种肯定选择SSR会更好，然后我就开始了Nuxt3的踩坑之旅。

Nuxt3项目的初始化

没想到一开始就凌乱了

nuxt3初始化项目

swift 复制代码

npx nuxi@latest init <project-name>

没想到一开始就报错了，我此时的心情，一万个草泥马飞腾而过

vbnet 复制代码

 ERROR  Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

看报错的信息提示，就是v3.json获取失败,考虑就是访问的问题.

我查询了网上的解决方法有以下两种

修改hosts(修改完还是可能会失败，但是多试几次会成功)
自己下载包文件解压搭建

这里先讲第一种:

首先是找到系统中的host文件

通常在C:\Windows\System32\drivers\etc\hosts

然后在hosts中加入以下代码

bash 复制代码

# 将 Nuxt 下载请求的服务器域名与其服务器 IP 直接映射
185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

修改完hosts cmd的命令窗口一定要重新打开(这一步很重要)

我重新运行了指令npx nuxi@latest init test-nuxt3,第一次就成功访问到了，这里特别说明，修改了hosts多试几次，我一开始不知道，还是会失败,后来多试几次误打误撞成功了(重要的事情说三遍：多试几次修改hosts只是提高访问的成功率)

初始化项目流程：

1.选择包管理器这里根据自己的喜好选择就行了

我选择npm

2.是否初始化为git 仓库

我选择Yes

然后就初始化完成了

我靠这么草率的吗？居然其他都没有配置可选需要自己装，强烈吐槽官方

nuxt3的时候还能选择 element eslint 等一系列插件

接着讲第二种初始化方式:

直接访问这个操作信息的链接

ruby 复制代码

https://github.com/nuxt/starter/blob/templates/templates/v3.json

接着访问tar的链接codeload.github.com/nuxt/starte...
打开后浏览器就会开始下载

接着解压出来

解下文件如上

然后执行npm i

执行完就已经初始化成功了，我执行一下npm run dev

看这里我都怀疑官方是不是就感觉会失败，直接不做组件的选择，让大家自行下载压缩包进行解压

好了解下来回归整体，集成依赖组件

安装eslint

nuxt3引入eslint文档参考链接： Eslint Module

这一开始我是通过网上查询别人的博客去引入eslint，发现目前很多博客与最新版的文档内容对不上，不知道是不是版本更新的问题

大家以后使用框架还是以官方的文档为主吧，话不多说

安装依赖

css 复制代码

npm install --save-dev @nuxt/eslint eslint

2.修改nuxt配置

在nuxt.config.ts修改一下配置

arduino 复制代码

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    // options here
    checker: true // 这里开启开发时实时校验
  }
})

因为checker开启，所以还需要安装另一个插件，大家根据自己的构建库如进行选择，我是vite选择vite-plugin-eslint2

bash 复制代码

# For Vite
npm i -D vite-plugin-eslint2

# For Webpack
npm i -D eslint-webpack-plugin

4.接着创建在根目录创建eslint.config.mjs文件，加入以下代码

arduino 复制代码

export default [
  {
    rules: {
    }
  },
  { ignores: [".nuxt/"] }
];

5.这一步是我自己需要安装的大家可以根据自己的喜欢进行安装

css 复制代码

npm i eslint-plugin-vue @eslint/js -D

接着对eslint.config.mjs文件配置文件进行修改

javascript 复制代码

import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";


export default [
  pluginJs.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {
    rules: {
    }
  },
  { ignores: [".nuxt/"] }
];

文章以eslint进行举例

大家如果需要引入其他框架

请查看官方文档

nuxt.com/modules

需要注意的是nuxt3很多框架都有nuxt版本，需要根据modules中去查询