创建Nuxt3项目-2025-6-5

配置HOST

创建Nuxt项目时，需要从 raw.Githubusercontent.com 下载依赖，但该域名被墙，因此需要配置本地HOST；

Node.js出于安全考虑，禁用了所有代理，所以即便开启了全局翻墙代理，也无法在创建Nuxt项目时访问到 raw.Githubusercontent.com ；

185.199.108.133 raw.githubusercontent.com 

TIP：如果上述IP失效，可以通过 IPAddress.com 查询到域名最新的IP

TIP：如果仍然无法访问 raw.Githubusercontent.com ，请切换网络，例如使用手机热点；

创建Nuxt项目

1.0> 执行安装命令

npm create nuxt <project-name>

2.0> 选中如下模块

TIP：安装过程中，请选择初始为git仓库，否则可能无法显示如下选项

app.vue 是Nuxt3项目的入口文件，其中的NuxtWelcome组件是Next3的欢迎页面；删除该组件，编写自己的组件，就可以开始开发自己Nuxt3应用了：

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

目录结构：（没有的目录需要自行创建）

目里文件和目录
- .nuxt               // 自动生成的目录，用于展示结果
- app.vue             // 项目入口
- nuxt.config.ts      // 项目配置
- layouts             // 布局
- pages               // 页面
- components          // 组件
- middleware          // 中间件
- assets              // 静态资源
- composables         // 代码模块化目录(可复用组合逻辑)
- plugins             // 自定义插件
- server              // 服务器目录

安装配置ESLint

1.0> 安装ESLint

## 安装命令
npm i -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

2.0> 初始化ESLint配置

npx eslint --init

配置选项：请参照https://www.sidoc.cn/doc/1346.html

3.0> 根据ESLint配置提示，安装依赖套件

安装其它依赖

## 安装prettier，以及prettier和eslint的兼容性插件
## eslint-config-prettier用于关闭eslint中与prettier冲突的规则
## eslint-plugin-prettier赋予eslint用prettier格式化代码的能力
npm i -D prettier eslint-plugin-prettier eslint-config-prettier

## 安装sass
npm i sass --save-dev

## 安装element-plus
npm i element-plus --save

## 安装stylelint，以格式化scss
npm install --save-dev stylelint-config-standard-scss

安装如下模块：

pinia：https://nuxt.com/modules/pinia

自动动画：https://nuxt.com/modules/auto-animate

自动导入SVG：https://nuxt.com/modules/nuxt-svgo

兼容nuxt的element-plus：https://nuxt.com/modules/element-plus

安装三方库：

https://sass-lang.com/install/

配置 package.json

添加lint，以及dev-*相关脚本，nuxt脚本命令的使用详见官网：https://nuxt.com/docs/api/commands/add

"scripts": {
    "dev-114": "nuxt dev --dotenv .env.local.114",
    "dev-119": "nuxt dev --dotenv .env.local.119",
    "lint": "eslint . --ext .js,.jsx,.vue,.ts,.tsx --fix"
},

配置nuxt.config.ts

从已有项目复制 自动按需导入、SVG雪碧图等插件配置；

配置.prettierrc.js

直接复制已有项目(vue3-app)的配置内容即可

配置Plugin

在项目根目录创建 plugins/define-nuxt-plugin.js 文件，直接复制已有项目(vue3-app)的配置内容即可

配置 .vscode

直接复制已有项目(vue3-app)的配置即可

重启Vscode

修改.prettierrc.js配置后，可能会发生eslint和prettier再次冲突，或自动格式化未生效，这是因为vscode插件缓存没有及时更新，重启下vscode即可；

配置.env环境配置

直接复制已有项目的配置即可

全局SEO配置

直接复制已有项目的 global-meta.ts 配置即可

默认错误页面配置

直接复制已有项目根目录下的 error.vue 文件即可

配置Typescript声明

直接复制已有项目根目录下的 vite-env.d.ts 文件即可

配置 .vscode > .stylelintrc.json

直接复制已有项目的配置即可

配置PM2

在项目根目录创建文件 ecosystem.config.js，复制已有项目的配置即可

命令详解

# 构建应用
npm run build

# 在本地启动一个静态服务器预览dist文件夹中的程序
npm run preview

项目测试

执行 npm run lint 命令，检查代码和配置的正确性；如果配置有错误，可能导致Eslint、prettier等插件无法正常运行；