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 类似)
bash 复制代码
npm install pnpm -g

1.2 创建项目并启动

bash 复制代码
pnpm create vite

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

bash 复制代码
#切换到项目文件夹下
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

bash 复制代码
npx eslint --init

配置如下:

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

javascript 复制代码
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 相关插件:

bash 复制代码
pnpm install prettier eslint-plugin-prettier eslint-config-prettier -D

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

javascript 复制代码
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 。

bash 复制代码
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 插件:

bash 复制代码
pnpm install husky lint-staged -D

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

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

bash 复制代码
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 插件:

bash 复制代码
pnpm install @commitlint/cli @commitlint/config-conventional -D

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

javascript 复制代码
module.exports = {
  extends: ["@commitlint/config-conventional"]
};

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

bash 复制代码
npx commitlint --edit $1

不符合规范时禁止提交:

符合规范时提交成功:

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

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试