Vue3.5 企业级管理系统实战（一）：项目初始搭建与配置

        本文详细介绍了如何使用 Vite 构建一个高效的 Vue 3.5 项目框架，并整合了 ESLint、Prettier、EditorConfig、Husky、lint-staged 和 commitlint 等现代化开发工具。通过这些工具的集成，我们能够确保代码质量、格式化和提交规范的一致性，从而提高团队的开发效率和项目的可维护性。文章涵盖了项目搭建、工具安装配置、代码风格统一和提交信息规范化的全过程，为协同开发人员提供了一个标准化、高效的开发环境。

1. Vite 项目搭建

该项目主要使用 Vue3 全家桶 + TypeScript

1.1 项目准备

1. 本项目Node 版本：23.5.0 （应该20+就行，可以根据包管理器提示升级自己的 Node 版本）
2. 安装包管理工具： pnpm（快速、节省磁盘空间的包管理工具，与 npm 和 Yarn 类似）

npm install pnpm -g

1.2 创建项目并启动

pnpm create vite

切换到项目文件夹下，安装依赖，启动项目

#切换到项目文件夹下
cd vue3-admin-lara

#安装依赖
pnpm install

#启动项目
pnpm run dev

启动后访问 http://localhost:5173/

2. 工具集成

        ESLint 用于代码质量检查，Prettier 专注于代码格式化，EditorConfig 帮助统一编码风格，而Husky 通过 Git 钩子强制执行代码检查，Lint-staged 仅对暂存文件应用 linters，Commitlint 则确保提交信息遵循一定的规范。这些工具共同构成了一个强大的代码质量和提交规范流程。

2.1 eslint 集成

2.1.1 eslint 安装依赖

通过 npx 安装 eslint

npx eslint --init

配置如下：

安装好后，会生成 eslint.config.js 文件，可在里面进行 eslint 的相关配置：

import globals from "globals"
import pluginJs from "@eslint/js" // 推荐的js规范
import tseslint from "typescript-eslint" // 推荐的ts规范
import pluginVue from "eslint-plugin-vue" // 推荐的vue的规范
import prettierRecommended from "eslint-plugin-prettier/recommended"//prettier集成中安装的插件
// esModule  commonjs
// 1.
// import autoImport from "./.eslintrc-auto-import.json" with { type: "json" }

// 2.
import { createRequire } from "module"
const require = createRequire(import.meta.url)
const autoImport = require("./.eslintrc-auto-import.json")

// 3.fs.readFile

export default [
  { files: ["**/*.{js,mjs,cjs,ts,vue}"] },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...autoImport.globals
      }
    }
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {
    files: ["**/*.vue"],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },
  {
    // 自定义规则,根据需要增加  eslint 主要是校验代码规范  prettier  格式化代码的
    rules: {
      "no-console": "warn",
      "vue/multi-word-component-names": "off"
    }
  },
  prettierRecommended // 覆盖掉eslint的规范
]

2.1.2 eslint 插件安装（vscode）

如下图，在 vscode 中搜索 eslint 插件，安装 ESLint 插件。

安装后，点击图标，选择【添加到工作区建议】。

点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。

在 package.json 中添加脚本，即可通过 npm run lint 进行校验，代码文件中也会有提示。

2.2 prettier 集成

2.2.1 prettier 安装依赖

prettier 是一个代码格式化工具，用于统一代码风格。

eslint-plugin-prettier 是一个 ESLint 插件，它允许 ESLint 使用 Prettier 的规则来检查代码风格。

eslint-config-prettier 是一个 ESLint 配置，用于关闭 ESLint 中与 Prettier 冲突的规则，确保两者能和谐工作，避免规则冲突。

通过 pnpm 安装 prettier 相关插件：

pnpm install prettier eslint-plugin-prettier eslint-config-prettier -D

安装后，在项目文件夹下新建 prettier 配置文件 prettier.config.js 。

export default {
    singleQuote: false, // 使⽤单引号
    semi: false, // 末尾添加分号
    tabWidth: 2,
    trailingComma: "none",
    useTabs: false,
    endOfLine: "auto",
};

2.2.2 prettier 插件安装（vscode）

如下图，在 vscode 中搜索 Prettier 插件，安装 Prettier 插件。

安装后，点击图标，选择【添加到工作区建议】。

点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。

在设置中，搜索 formatter ，选择 Prettier-Code formatter

同时，选择保存时设置文件格式。

这样，以后在保存文件时，就会使用 Prettier 进行代码格式化。

2.3 EditorConfig 插件安装（vscode）

如下图，在 vscode 中搜索 EditorConfig 插件，安装 EditorConfig 插件。

EditorConfig 通过 .editorconfig 文件定义编码风格，如缩进、行尾字符等，确保不同编辑器和开发者使用统一风格。支持多种编程语言和编辑器，配置简单，有助于提升代码一致性。

安装后，点击图标，选择【添加到工作区建议】。

点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。

在项目文件夹下新建配置文件 .editorconfig 。

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf

        这样配置以后，所有协同开发人员下载代码后，会下载同样的插件，使用同样的代码检测配置，保证团队所有人员使用同一种风格进行开发。

2.4 Husky 及 lint-staged 集成

Husky 是一款简化 Git 钩子管理的工具，让开发者在 Git 操作（如提交、推送）前自动执行代码检查、格式化等任务。它易于集成，提高了代码质量和团队协作效率，是现代开发工作流程中的常用组件。

lint-staged 是一个在 Git 暂存文件上运行 linters 的工具，确保只有暂存的文件被检查和格式化，提高了开发流程的效率，并保持代码库的一致性。通过配置 .lintstagedrc 文件，可以指定不同文件类型对应的处理工具，如 ESLint、Prettier 等。结合 Husky 使用，可在提交前自动执行代码质量检查。

通过 pnpm 安装 Husky 及 lint-staged 插件：

pnpm install husky lint-staged -D

在 package.json 中配置 lint-staged，在代码提交前对 js，cjs，ts，vue 文件进行 eslint 校验并尽可能修复，对 html，json，css，scss 文件使用 prettier 进行代码格式化。

然后，使用 husky 配置 git 钩子。

npx husky init

init 后，会生成一个 .husky 文件夹，在改文件夹下配置各种 git 钩子，pre-commit 文件是自动生成的，修改其配置。

如下图，配置好后，在执行git commit时，会先进行代码校验，校验通过后才可以提交。

修改报错前：

修改报错后：

2.5 commitlint 集成 

commitlint 是一个确保 Git 提交消息遵循特定规则的工具，通过预定义的配置来强制执行提交消息格式，有助于维护代码库的提交历史清晰和一致性。结合 Git 钩子，如 Husky，可在提交前自动检查消息是否符合规范。

@commitlint/config-conventional 是一个用于 Commitlint 的预设配置，遵循 Angular 提交消息规范。它帮助团队保持提交消息的一致性，便于生成清晰的变更日志，同时支持语义化版本控制。通过集成此配置，开发者在提交代码时需遵循类型（feat、fix等）、作用域、主题、正文和脚注的结构。

通过 pnpm 安装 commitlint 插件：

pnpm install @commitlint/cli @commitlint/config-conventional -D

在项目文件夹下新建配置文件 commitlint.config.cjs。

module.exports = {
  extends: ["@commitlint/config-conventional"]
};

在 husky 下添加 git 钩子，在 .husky 文件夹下 新增 commit-msg 文件，修改内容如下

npx commitlint --edit $1

不符合规范时禁止提交：

符合规范时提交成功：

下一篇将探讨 router 及 pinia 的集成，敬请期待~