背景介绍：

最近来了个活，更新公司官网。公司官网项目一共两个，PC端和移动端。PC端业务技术栈为jQuery，移动端技术栈为Vue2。因为时间要求比较紧，并且由于改动官网影响较大，设计那边需要反复确认官网内容，所以留给我们的时间更不多了。领导开会也提出了要求：lighthouse跑分90以上、重点关注SEO、支持中英文国际化，考虑项目扩展性和维护性。

设计选型

通过这些要求和历史背景，我决定新开两个项目对应之前的PC和移动端，因为PC和移动端共用一个会出现样式和现实问题，并且两个端的官网设计也不是一样的。目前需求只对部分页面进行重构，所以新项目只需要新增改动的页面，在老项目中通过链接嵌入新项目的方式应对本次需求，后续再逐步替换网站其它内容。

技术选型

基于技术升级的理念以及SEO的重点要求，决定选择Nuxt3作为项目的基础框架，相比于Nuxt2从性能、模块化、插件、开发体验等方面3版本明显优于2，并且更重要的是Nuxt3 改进了静态站点生成功能（SSG），能更好支持SEO。

1.## 创建 Nuxt3 应用

在你想要创建项目的文件夹内打开终端运行

pnpm dlx nuxi@latest init <your app name>

1.1选择包管理器

一般来说推荐yarn和pnpm，速度快且不容易丢包

1.2git初始化

如果需要就选yes，不需要可以暂时不选，后面随时可以初始化git 使用命令git init就👌🏻 确定后就完成了基本的Nuxt3脚手架的初始化，下面使用VSCode打开项目进行进一步配置。

2.配置完善项目

先在终端运行

pnpm run dev  或者
yarn dev

成功后默认本地地址为http://localhost:3000/

如果打开地址后出现下图，证明已经初步成功了

2.1配置Typescript

Nuxt3 在创建时已经支持TypeScript， 可以在tsconfig.json中进行额外配置。

第一步：安裝 VS Code 插件

安装Vue - Official 这个插件为 Vue.js 开发者提供了丰富的功能和优化，以提高开发效率和代码质量，因为Nuxt3基于Vue3，包含了上色、语法提示、编辑器快速分割等強大功能，而且也是 Nuxt3 推荐的编辑器插件。

第二步：安裝 Vue 类型检查依赖

pnpm install -D vue-tsc

这里需要注意，先看第三步再安装

第三步  nuxt.config.ts 设置

在 nuxt.config.ts 中，设置 typescript.typeCheck: true 来让开发时期能执行类型检查。

export default defineNuxtConfig({
    typescript: { typeCheck: true }
})

注意：开启Typescript检查时会报错Cannot restart nuxt:  Cannot find module 'vue-tsc/out/index'   排查后发现vue-tsc在2.0版本有重大更新出现了冲突，目前解决办法是将vue-tsc版本做降级处理

我这边指定安装了1.8.22版本

pnpm install vue-tsc@1.8.22

2.2配置ESLint

现在，我们至 Nuxt 文件根目录下，开始安装 ESLint 相关依赖，当然，你也可以挑自己喜欢的进行配置，不过在这里选择以 Nuxt 3 官方提供的 ESLint 设定来做标准配置，并添加支持 Vue 3 的 ESLint 设定。

第一步

pnpm create @eslint/config

这是我安装后的选择

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint@9.x, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm

注意因为4月5日 ESLint更新了V9版本，不再使用eslintrc.js而是eslint.config.js并使用扁平化配置，忽略文件不再是新建一个eslintignores文件。而是直接在eslint.config.js中配置ignores字段 详细可去ESLint官网查看配置

这是NUxt初始化后生成的eslint.config.js文件内容

第二步

在package.json的scripts中添加脚本命令：

   "lint": "eslint .",
   "lint:fix": "eslint . --fix"

终端运行 pnpm run lint后会发现eslint检测到了nuxt目录下的文件错误，这不是我们想要的，我们只需要检测自己所写文件就可以了，需要在eslint.config.js中进行配置

import withNuxt from "./.nuxt/eslint.config.mjs";
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default withNuxt([
  {
    languageOptions: {
      globals: { ...globals.browser, ...globals.node, ...globals.es2021 },
      ecmaVersion: "latest",
      parser: tseslint.parser,
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"], // Vue3
  {
    files: ["app.vue", "error.vue", "pages/**/*.vue", "layouts/**/*.vue"],
    rules: {
      "vue/multi-word-component-names": "off",
    },
  },
  { ignores: [".nuxt/"] }, // 忽略校验 .nuxt/ 目录下的所有文件
]);

按照这样做配置就没有问题了，运行pnpm run lint:fix可以让eslint修复代码错误。

3.配置src目录

因为 Nuxt3 项目默认的文件夹都在顶层，就像 HBuilderX 创建的 Uniapp 项目那种的，全部在顶层，比较杂乱，所以推荐把所有的源代码都放到 src 里面，并增加 1个 配置即可。

在nuxt.config.ts中添加

export default defineNuxtConfig({
  srcDir: "src",
});

如果你需要在其他地方引用 src 目录下的文件,可以使用以下路径:

import MyComponent from '@/components/MyComponent.vue'

@代表src 目录的根路径。

Nuxt 的一项核心功能是文件系统路由器。 pages/ 目录中的每个 Vue 文件都会创建一个相应的 URL(或路由)来显示文件的内容。 Nuxt 路由基于 vue-router 并从 pages/ 目录中创建的每个组件生成路由， 基于他们的文件名。 举例这个文件系统路由使用命名约定来创建动态和嵌套路由：

pages/
--| about.vue
--| index.vue
--| posts/
----| [id].vue

生成的路由文件：

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

4. 配置 element plus（可选）

在这里我选择element plus项目的UI框架，虽然官网基本都是自己写出来的，UI组件涉及较少，但如果有表单、tab类的东西借助UI框架还是非常方便的

npx nuxi@latest module add element-plus
# or
pnpm i element-plus @element-plus/nuxt -D

之后在nuxt.config.ts中添加配置

  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})

其中options选型中配置在官网中有详细介绍

5. 配置 commitlint

我这里选择的是在提交代码前会做eslint、prettier和提交信息的校验，如果项目要求不是很严格的话可以不用做配置。

5.1安装依赖

pnpm install --save-dev husky lint-staged eslint prettier @commitlint/cli

5.2添加配置

在项目根目录下创建一个名为.husky的文件夹。

npx husky-init

在.husky文件夹中创建一个名为pre-commit的文件，并添加以下内容：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

在项目根目录下创建一个名为.lintstagedrc.json的文件，并添加以下内容：

{
    "*.{js,vue,ts}": [
      "eslint --fix",
      "prettier --write"
    ]
}

在项目根目录下创建一个名为commitlint.config.js的文件，并添加以下内容：

export default {
  extends: ['@commitlint/config-conventional'],
};

在项目根目录下创建一个名为.prettierrc.js的文件，并添加以下内容：

 export default{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

.prettierrc.js具体规则可以自行设置，这里只是最基础设置

配置完这些之后就可以验证git提交了，提交规范可以自定义，commitlint.config.js内规则继承commitlint/config-conventional这个npm包

6.配置tailwind css

pnpm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest

运行以下命令生成默认的 Tailwind 配置文件 tailwind.config.js：

npx tailwindcss init -p

在postcss.config.js添加内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在 nuxt.config.js 中引入 Tailwind CSS 文件：

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@ant-design-vue/nuxt", "@nuxtjs/i18n","@nuxtjs/tailwindcss"],
  css: [
    '@/tailwind.css',
  ]
});

7.结论

至此，Nuxt3配置最基础的东西已经添加好了，后续有机会再把客户端环境变量配置、build推荐使用的pm2，seo相关配置、以及封装$fetch等东西在做介绍，如果脚手架搭建的过程中有什么问题，欢迎联系我帮忙解决，Nuxt3虽然提供了一系列的定制化，但是由于官网介绍含糊不清，再加上网上关于Nuxt3的资料较少且相当杂乱，很多资料提供的解决方案都已经不再适用，踩了很多坑，相当的心累。。。

最后提一个问题，大家平时是都是以公司业务为导向去探究技术并应用到业务中吗？ 我先来回答一下，大部分时间都是这样的，新的技术出现也是给业务去赋能。