【Vue3大事件 | 项目笔记】第一天

前言：Vue3大事件项目是一个基于Vue3的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学或巩固Vue3，希望本系列文章可以帮助到你。

【Vue3大事件 | 项目笔记】第一天

- 今日完结：
- 今日收获：
- - [1.了解pnpm 包管理工具](#1.了解pnpm 包管理工具)
  - [2.自定义ESLint 规则](#2.自定义ESLint 规则)
  - 3.了解并运行了husky代码检查
  - [4.了解Element Plus组件库](#4.了解Element Plus组件库)
- 杂项知识点：
- 总结：

今日完结：

项目代码风格配置
基于husky的代码检查工作流
了解VueRouter4的路由
引入Element Plus组件库

今日收获：

1.了解pnpm 包管理工具

优势：比同类工具快2倍左右，节省磁盘空间，依赖更 "干净"。

安装方式：npm install -g pnpm

创建项目:pnpm create vue

2.自定义ESLint 规则

ESLint 自定义规则是基于 ESLint 核心能力，针对项目场景（如 Vue 开发、代码格式化）配置的校验规则集合，分为「通用 JS 规则」「Vue 框架专属规则」「Prettier 集成规则」三类，可灵活设置校验严格程度，实现 "语法规范 + 格式统一 + 框架约束" 的一站式代码校验。
配置JS，Vue规则

配置集成（修改 .eslint.config.js）

javascript 复制代码

'vue/multi-word-component-names': ['warn', { ignores: ['index'] }], // Vue 组件命名规则
'vue/no-setup-props-destructure': ['off'], // 关闭 Props 解构校验
'no-undef': 'error' // 未定义变量报错

配置Prettier 集成规则

Prettier 是一个用来美化代码的工具。

好处：可以统一代码风格：通过 singleQuote: true（单引号）、semi: false（无分号）等规则，彻底避免团队内 "单 / 双引号混用、有无分号不一致" 等风格混乱问题；也减少手动格式调整成本：无需手动删除尾逗号、拆分超长行，Prettier 会自动按 printWidth: 80（每行 80 字符）、trailingComma: 'none'（无尾逗号）规则格式化，节省开发时间等。

使用步骤：

1.环境准备（安装依赖）

javascript 复制代码

# 安装 Prettier 核心包 + ESLint 集成插件
pnpm add prettier eslint-plugin-prettier eslint-config-prettier --save-dev

2.配置集成（修改 .eslint.config.js）

javascript 复制代码

import pluginPrettier from 'eslint-plugin-prettier'

export default defineConfig([
  {
    plugins: { prettier: pluginPrettier }, // 注册 Prettier 插件
    rules: {
      'prettier/prettier': [
        'warn', // 格式错误仅警告，不阻断代码运行
        {
          singleQuote: true,    // 单引号
          semi: false,          // 无分号
          printWidth: 80,       // 每行最多80字符
          trailingComma: 'none',// 无尾逗号
          endOfLine: 'auto'     // 自动适配换行符
        }
      ]
    }
  }
])

3.了解并运行了husky代码检查

当我们进行代码提交时，难免会存在未及时发现，提交错误代码的情况，导致其他人拉取我们的代码时都会出现错误，这时我们可以使用Husky来解决。

Husky 最核心的作用：强制拦截不合规代码提交，避免 "脏代码" 入库。简单来说，就是当我们提交错误代码时，Husky会阻止我们提交。

使用Husky步骤：

1.初始化git仓库，执行git init

2.初始化husky工具配置：pnpm dlx husky-init && pnpm install

3.修改 .husky/pre-commit 文件

javascript 复制代码

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

pnpm lint

暂存区eslint校验

而对于Husky有一个缺点就是当我们提交代码时会默认检查所有文件（而非仅修改的文件），导致检查耗时久。

暂存区 ESLint 校验（通常配合 lint-staged 实现）就是对 Husky 代码检查的关键优化 ------ 核心逻辑是只校验本次 Git 暂存区的文件（即你本次要提交的代码），而非全量文件。

步骤：

1.安装lint-staged包 pnpm i lint-staged -D

2.package.json 配置lint-staged命令

javascript 复制代码

"scripts": {
   ...
    "lint-staged": "lint-staged"
  },
"lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }

3 .husky/pre-commit文件修改

javascript 复制代码

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

pnpm lint-staged

4.了解Element Plus组件库

Element Plus 是基于 Vue 3 开发的免费开源 UI 组件库，专门解决 Vue 项目中 "重复写页面样式和交互" 的问题。

步骤：

1.安装：pnpm add element-plus

2.按照Element官网配置按需导入

3.直接使用组件

以el-button为例

javascript 复制代码

<el-button @click="$router.push('/path')">去</el-button>
<el-button @click="golist">来</el-button>

此时点击"来"，就会出现右面"来"的效果。

此外，引入组件时无需手动导出，直接在代码中引用即可使用：

test-doem.vue组件

javascript 复制代码

<template>
  <div>Text Component</div>
</template>

App.vue组件

javascript 复制代码

<template>
  <div>
    我是app
    <text-dome></text-dome>
   
  </div>
</template>

页面效果：

杂项知识点：

vue-router4路由代码解析

1.路由实例创建（基础配置）

核心依赖导入：Vue Router 4 需导入 createRouter（创建路由实例）和路由模式方法（createWebHistory/createWebHashHistory）：

createWebHistory()：对应 history 模式（无 # 号的路径，需后端配置支持）；

createWebHashHistory()：对应 hash 模式（路径带 # 号，无需后端配置）。

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

2.基础路径关联：import.meta.env.BASE_URL 对应 Vite 配置文件（vite.config.js）中的 base 字段（如 base: './'），用于设置路由的根路径。

javascript 复制代码

export default defineConfig({
...
  base: './',
...
})

3.setup中this是undefined,所以不能使用this来访问组件实例中的属性和方法，需使用组合式 API：

javascript 复制代码

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
//useRoute()函数返回当前路由对象，可以通过它来获取当前路由的信息，比如路径、参数等
const route = useRoute()
//route获取路由参数
const golist = () => {
  console.log(route, router)
  //this.$router.push('/path') --- IGNORE ---
}
</script>

Element Plus 和 Vant UI 区别

在我之前讲的智慧商城中也运用到组件库Vant UI，那两个有什么区别呢，详细见图

简单来说，就是Element Plus 和 Vant UI 核心作用都是提供现成的界面组件，但Element Plus 适配 PC 端后台系统，Vant UI 适配移动端（H5 / 小程序）。

总结：

通过今天的学习，又新认识了一个组件库Element Plus，以及掌握了更多让代码规范的规则，收货很多，明天继续。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！