Vue项目Git提交流程集成
Vue项目Git提交流程集成
本教程将指导你如何在Vue项目中集成一个规范化的Git提交流程,包括代码规范检查、提交信息规范和自动化工具配置。
前置条件
- Node.js 14.0+ 和 npm/yarn/pnpm
- Vue项目(Vue 2或Vue 3均可)
- Git已初始化的仓库
一、规范化提交流程概述
一个完整的Git提交流程通常包含以下环节:
- 代码规范检查:使用ESLint和Prettier确保代码风格一致
- 提交前检查:使用husky和lint-staged在提交前执行检查
- 提交信息规范:使用commitlint和commitizen规范提交信息
- 自动生成变更日志:使用conventional-changelog生成CHANGELOG
这样的流程可以帮助团队保持一致的代码风格和提交历史,提高协作效率。
二、安装必要依赖
首先,我们需要安装一系列开发依赖:
# 使用npm
npm install --save-dev eslint prettier @vue/eslint-config-prettier husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog conventional-changelog-cli# 或使用yarn
yarn add --dev eslint prettier @vue/eslint-config-prettier husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog conventional-changelog-cli# 或使用pnpm
pnpm add --save-dev eslint prettier @vue/eslint-config-prettier husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog conventional-changelog-cli
三、配置EditorConfig
在项目根目录创建.editorconfig
文件,确保在不同编辑器中保持一致的编码风格:
# .editorconfig
root = true[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true[*.md]
trim_trailing_whitespace = false
四、配置ESLint和Prettier
4.1 ESLint配置
如果你的Vue项目还没有ESLint配置,在项目根目录创建.eslintrc.js
文件:
// .eslintrc.js
module.exports = {root: true,env: {node: true,browser: true,},extends: ['plugin:vue/vue3-recommended', // 或 'plugin:vue/recommended' 用于Vue 2'eslint:recommended','@vue/prettier',],parserOptions: {ecmaVersion: 2020,},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',},
};
4.2 Prettier配置
创建.prettierrc
文件:
{"semi": true,"singleQuote": true,"tabWidth": 2,"trailingComma": "es5","printWidth": 100,"bracketSpacing": true,"arrowParens": "avoid"
}
同时创建.prettierignore
忽略某些文件:
/dist
/node_modules
五、配置Husky
Husky用于设置Git hooks,在关键Git操作前执行脚本。
5.1 初始化Husky
npx husky install
在package.json
中添加一个脚本,确保其他开发者在安装依赖后自动启用husky:
{"scripts": {"prepare": "husky install"}
}
5.2 添加pre-commit钩子
npx husky add .husky/pre-commit "npx lint-staged"
5.3 添加commit-msg钩子
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"
六、配置lint-staged
在package.json
中添加lint-staged配置:
{"lint-staged": {"*.{js,vue,ts,jsx,tsx}": ["eslint --fix","prettier --write"],"*.{css,scss,less,styl}": ["prettier --write"],"*.{json,md}": ["prettier --write"]}
}
或者创建单独的.lintstagedrc.js
文件:
// .lintstagedrc.js
module.exports = {'*.{js,vue,ts,jsx,tsx}': ['eslint --fix','prettier --write',],'*.{css,scss,less,styl}': ['prettier --write',],'*.{json,md}': ['prettier --write',],
};
七、配置commitlint
创建commitlint.config.js
文件:
// commitlint.config.js
module.exports = {extends: ['@commitlint/config-conventional'],rules: {'type-enum': [2,'always',['feat', // 新功能'fix', // 修复Bug'docs', // 文档变更'style', // 代码格式(不影响代码运行的变动)'refactor', // 重构(既不是新增功能,也不是修改bug的代码变动)'perf', // 性能优化'test', // 增加测试'chore', // 构建过程或辅助工具的变动'revert', // 回滚到上一个版本'build', // 打包'ci', // CI相关变更],],'type-case': [2, 'always', 'lower'],'type-empty': [2, 'never'],'subject-empty': [2, 'never'],'subject-full-stop': [2, 'never', '.'],'header-max-length': [2, 'always', 72],},
};
八、配置commitizen
Commitizen可以帮助开发者创建符合约定的提交信息。
8.1 配置commitizen适配器
在package.json
中添加:
{"config": {"commitizen": {"path": "cz-conventional-changelog"}}
}
8.2 添加提交脚本
在package.json
中添加:
{"scripts": {"commit": "cz"}
}
这样开发者可以使用npm run commit
(或yarn commit
、pnpm commit
)来代替git commit
进行提交。
九、配置conventional-changelog
用于自动生成变更日志。
在package.json
中添加脚本:
{"scripts": {"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s","changelog:init": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"}
}
changelog
会在现有CHANGELOG.md上追加最新版本信息changelog:init
会重新生成整个CHANGELOG.md
十、完整工作流演示
下面是一个典型的开发和提交流程:
-
编写代码:开发新功能或修复bug
-
暂存更改:
git add .
-
规范提交:
npm run commit
(而不是git commit
)- 选择提交类型(feat、fix等)
- 输入影响范围(可选)
- 输入简短描述
- 输入详细描述(可选)
- 输入是否有破坏性变更(可选)
- 输入是否修复了某个issue(可选)
-
推送代码:
git push
-
版本发布前:
npm run changelog
生成新版本的变更日志
常见问题与解决方案
Husky钩子不生效
确保husky正确安装并且文件有执行权限:
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg
ESLint报错太多无法提交
可以先使用--fix
选项批量修复:
npx eslint --fix src/
想临时跳过检查直接提交
可以使用--no-verify
参数:
git commit -m "紧急修复" --no-verify
但请注意,这应该只用于特殊情况。
自定义commit类型
修改commitlint.config.js
中的type-enum
规则,添加你需要的类型。
中文commit信息支持
默认配置支持中文提交信息,无需额外配置。
通过遵循本教程,你可以在Vue项目中建立一套完整的Git提交工作流,提高团队协作效率和代码质量。这套流程既适用于个人项目,也适用于团队协作。
相关文章:
Vue项目Git提交流程集成
Vue项目Git提交流程集成 本教程将指导你如何在Vue项目中集成一个规范化的Git提交流程,包括代码规范检查、提交信息规范和自动化工具配置。 前置条件 Node.js 14.0 和 npm/yarn/pnpmVue项目(Vue 2或Vue 3均可)Git已初始化的仓库 一、规范化…...
使用 OpenSSL 吊销 Kubernetes(k8s)的 kubeconfig 里的用户证书
一.用 OpenSSL 依据已有的自签名 CA 注销签发的证书的步骤 1. 准备工作 你得有自签名 CA 的私钥(通常是 .key 文件)、CA 证书(通常是 .crt 文件)以及证书吊销列表(CRL)文件。若还没有 CRL 文件,…...
kubeadm部署k8s
我在阿里云上部署的k8s master 4c/8g/40g rocky linux8.9 node1/node2 2c/4g/40g rocky linux8.9 安装docker (我安装的是v1.19.1版本,是旧版本,可以装新版本,docker的版本和kubeadm,kubectl,kubelet版本相同) 1.所有…...
FPGA实战项目1——坦克大战
FPGA实战项目1——坦克大战 根据模块化思想,可将此任务简单的进行模块拆分: 系统原理,模块划分,硬件架构,算法支持,Verilog实现框架 一,系统总体原理 1. 核心设计思想 硬件并行处理&#x…...
LeetCode 1781. 所有子字符串美丽值之和 题解
示例 输入:s "aabcb" 输出:5 解释:美丽值不为零的字符串包括 ["aab","aabc","aabcb","abcb","bcb"] ,每一个字符串的美丽值都为 1这题光用文字解说还是无法达到讲…...
Spring Web MVC————入门(1)
今天开始正式带大家学习Spring部分的内容了,大家尝试去弄个专业版嗷,学习起来爽一点 在idea中下载这个插件就行了 我们之后开始创建Spring项目, 蓝色 部分自己起名,type选Maven,其他的默认就好了,之后nex…...
关于 js:1. 基础语法与核心概念
js 全称 JavaScript(简称 JS),是 一种运行在浏览器和服务器端的脚本语言。 用途: 浏览器端交互(如:点击按钮出现弹窗) 网页动态内容渲染(如:淘宝、京东页面更新…...
云境天合水陆安全漏电监测仪—迅速确定是否存在漏电现象
云境天合水陆安全漏电监测仪是一种专为水下及潮湿环境设计的电气安全检测设备,通过高灵敏度电磁传感器探测漏电电流产生的交变磁场,基于法拉第电磁感应定律,自动区分高灵敏度信号和低灵敏度信号,精准定位泄漏电源的具体位置。一旦…...
二、Hadoop狭义和广义的理解
作者:IvanCodes 日期:2025年5月6日🫠 专栏:Hadoop教程 Hadoop 的双重身份:核心框架与生态系统 在大数据领域,Hadoop 是一个广为人知的概念,但它并非单指某一个软件,而是涵盖了两个层…...
DTU_DTU厂家_5G/4G DTU终端_DTU模块_厦门计讯物联科技有限公司
在物联网蓬勃发展的当下,数据的高效、稳定、可靠的传输成为关键。厦门计讯物联科技有限公司(以下简称“计讯物联”)作为国内工业物联网领域的核心厂商,专注于5G/4G DTU终端、DTU模块及无线数传设备的研发与生产,致力于为智慧城市、能源电力、…...
学习alpha,第2个alpha
alphas (-1 * ts_corr(rank(ts_delta(log(volume), 2)), rank(((close - open) / open)), 6)) 先分析操作符从左到右 ts_corr: Pearson 相关度量两个变量之间的线性关系。当变量呈正态分布且关系呈线性时,它最有效。 ts_corr(vwap, close, 20)是一个计算时间序列相…...
如何用爬虫获得按关键字搜索淘宝商品
在电商领域,获取淘宝商品的详细信息对于市场分析、选品上架、库存管理和价格策略制定等方面至关重要。淘宝作为国内知名的电商平台,提供了丰富的商品资源。通过 Python 爬虫技术,我们可以高效地获取淘宝商品的详细信息,包括商品名…...
Android SDK 开发中的 AAR 与 JAR 区别详解
在 Android SDK 开发中,构建项目时我们常常会看到生成两个不同的文件:一个是 build/outputs/aar/*.aar,另一个是 build/intermediates/aar_main_jar/debug/syncDebugLibJars/classes.jar。很多初学者会疑惑:它们之间有什么区别&am…...
Python cv2滤波与模糊处理:从原理到实战
在图像处理领域,滤波与模糊是预处理阶段的两大核心操作,既能消除噪声干扰,又能实现艺术化效果。本文将结合OpenCV的cv2库,系统讲解滤波与模糊的原理及Python实现,带你从理论到实战全面掌握这项技术。 一、滤波与模糊的…...
【SpringBoot3】idea找不到log符号
解决idea找不到log符号,Slf4j注解不起作用 如图 解决办法 pom.xml文件里要手动添加版本号 插件也要添加对应的版本号 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.30&l…...
Android学习总结之Java和kotlin区别
一、空安全机制 真题 1:Kotlin 如何解决 Java 的 NullPointerException?对比两者在空安全上的设计差异 解析: 核心考点:Kotlin 可空类型系统(?)、安全操作符(?./?:)、非空断言&…...
C++笔记-二叉搜索树(包括key,key/value搜索场景等)
1.二叉搜索树的概念 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树: 1.若它的左子树不为空,则左子树上所有结点的值都小于等于根结点的值若它的右子树不为空,则2.右子树上所有结点的值都大于等于根结点…...
【从零开始学习RabbitMQ | 第二篇】生成交换机到MQ的可靠性保障
目录 编辑前言 交换机 Direct交换机与Fanout交换机的差异 Topic交换机 Topic交换机相比Direct交换机的差异 生成我们的交换机,队列,以及绑定关系 基于代码去生成交换机和队列 基于注解去声明队列和交换机 消息转换器 消息队列的高可靠性 发送…...
在 Sheel 中运行 Spark:开启高效数据处理之旅
在大数据处理领域,Apache Spark 凭借其强大的分布式计算能力,成为了众多开发者和企业处理海量数据的首选工具之一。而 Sheel 作为一种便捷的运行环境,在其中运行 Spark 可以充分发挥两者优势,实现高效的数据处理与分析。本文将详细…...
前端、XSS(跨站脚本攻击,Cross-Site Scripting)
XSS 攻击的三种主要类型 存储型 XSS(持久型) 原理:恶意脚本被永久存储在服务器(如数据库、评论内容),用户访问包含恶意脚本的页面时触发示例:攻击者在论坛的评论区提交 ,其他用户查…...
第六节:图像基本操作-像素级操作
一、数字图像处理基础 1.1 图像数字化原理 数字图像本质上是二维离散信号,由按矩阵排列的像素点构成。每个像素点的数值代表特定位置的亮度或色彩信息... 1.2 OpenCV核心数据结构 import cv2 import numpy as np# 读取图像文件 img cv2.imread(image.jpg)# 获取…...
【东枫科技】代理销售 NVIDIA DGX Spark 您的桌上有一台 Grace Blackwell AI 超级计算机。
NVIDIA GB10 Grace Blackwell超级芯片 FP4 AI 性能达到 1,000 AI TOPS 128GB 一致、统一的系统内存 ConnectX-7 智能网卡 高达 4TB 存储空间 150毫米长 x 150毫米宽 x 50.5毫米高 NVIDIA DGX™ Spark 搭载 NVIDIA GB10 Grace Blackwell 超级芯片,以节能紧凑的外形提…...
即插即用!长安汽车复旦提出LMPOcc:长期记忆先验实现占用预测任务新SOTA
导读 在基于视觉的自动驾驶感知算法当中,3D语义占用预测任务可以出色的对静态场景和动态目标同时进行建模,实现细粒度的场景理解,目前受到了来自学术界和工业界的广泛关注。 ©️【深蓝AI】编译 论文题目:ConRFT: A Reinfo…...
Kubernetes弹性伸缩:让应用自动应对流量洪峰与低谷
🚀 Kubernetes弹性伸缩:让应用自动应对流量洪峰与低谷 🌍 什么是弹性伸缩? 弹性伸缩(Auto Scaling)是指系统能够根据实时负载自动调整计算资源,以优化性能并降低成本。在 Kubernetes࿰…...
深入解析 Linux/Unix 通信机制:从原理到观测实践
深入解析 Linux/Unix 通信机制:从原理到观测实践 配图建议:Linux系统架构与通信机制全景示意图 一、开篇:理解“一切皆文件”的哲学 Unix/Linux 操作系统的核心灵魂在于其独特的设计哲学。当 Dennis Ritchie 和 Ken Thompson 在贝尔实验室开…...
Vue 2.0 详解全教程(含 Axios 封装 + 路由守卫 + 实战进阶)
目录 一、Vue 2.0 简介1.1 什么是 Vue?1.2 Vue 2.x 的主要特性 二、快速上手2.1 引入 Vue2.2 创建第一个 Vue 实例 三、核心概念详解3.1 模板语法3.2 数据绑定3.3 事件绑定3.4 计算属性 & 侦听器 四、组件系统4.1 定义全局组件4.2 单文件组件(*.vue …...
《Python星球日记》 第36天:线性代数基础
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏:《Python星球日记》,限时特价订阅中ing 目录 一、标量、…...
使用 Spring Boot 构建 REST API
使用 Spring Boot 构建 REST API 使用 Spring Boot 构建 REST API1. Spring Initializr构建springboot2. API 合同 & JSONAPI 协定什么是 JSON? 3.先测试什么是测试驱动开发?测试金字塔Red, Green, Refactor 循环 4. 实施 GET…...
PHP分页显示数据,在phpMyadmin中添加数据
<?php $conmysqli_connect(localhost,root,,stu); mysqli_query($con,"set names utf8"); //设置字符集为utf8 $sql"select * from teacher"; $resultmysqli_query($con,$sql); $countmysqli_num_rows($result); //记录总条数$count。 $pagesize10;//每…...
Spring Boot操作MongoDB的完整示例大全
以下是基于Spring Boot操作MongoDB的完整示例大全,涵盖增删改查、聚合查询、索引、事务等核心功能: 一、基础CRUD操作 1. 环境配置 依赖配置(pom.xml) <dependency><groupId>org.springframework.boot</groupId…...
SpringCloud入门教程合集(1)-SpringCloud简介与Eureka+Feign实现服务注册中心、服务提供与服务消费
场景 SpringCloud 总体架构与核心子项目 SpringCloud 总体架构 1. 基础设施层 服务注册与发现:Eureka/Nacos 配置中心:Spring Cloud Config/Nacos 消息总线:Spring Cloud Bus 2. 服务通信层 负载均衡:Ribbon/LoadBalancer…...
【Linuc】深入理解 Linux 文件权限
文章目录 一、权限基础解析1. 权限三元组2. 权限类型与数字映射二、查看文件权限三、修改权限实战1. chmod 命令符号模式数字模式(推荐)2. chown 修改归属四、特殊权限机制1. SetUID (Set User ID)2. SetGID (Set Group ID)3. Sticky Bit五、高级权限管理1. 默认权限控制2. A…...
ExtraMAME:复古游戏的快乐“时光机”
嘿,小伙伴们!今天电脑天空要给大家安利一款超有趣的软件——ExtraMAME!如果你对复古街机游戏念念不忘,那它绝对能成为你的快乐源泉,带你瞬间穿越回那个充满游戏机的黄金时代。 ExtraMAME是一款基于MAME(Mu…...
没有 Mac,如何把 iOS App 成功上架?
开发者的 iOS 上架折腾记:没有 Mac,也能搞定? 最近在帮朋友把一个跨平台 Flutter 项目上架到 App Store,结果被 iOS 上架的那套流程卡得头都大了。其实这也不是第一次碰壁了——每次到“申请证书 打包 上传”的时候,…...
使用VMware Workstation pro 17.5.1在Windows上安装Ubuntu 24.04.2的 详细步骤
一、准备工作 1. 下载Ubuntu 24.04.2 ISO镜像 官方下载地址:Ubuntu 24.04.2 (Noble Numbat) 选择 ubuntu-24.04.2-desktop-amd64.iso(桌面版)或 ubuntu-24.04.2-live-server-amd64.iso(服务器版)。 2. 确认系统要求…...
栈与队列详解及模拟实现
目录 一、栈(Stack):后进先出 1.1 什么是栈 1.2 栈的使用 1.3 栈的模拟实现 1.4 栈的经典应用 二、队列(Queue):先进先出 2.1 什么是队列 2.2 队列的使…...
Cursor无法SSH远程连接服务器免密登录问题
在本地机器和Ubuntu服务器之间实现SSH远程免密连接,可按如下步骤操作: 1. 生成SSH密钥对 在本地机器上开启终端,使用以下命令生成SSH密钥对: ssh-keygen -t rsa按提示操作,一般直接回车,这样密钥会生成在…...
【Vue】全局事件总线 TodoList 事件总线
目录 一、 实现所有组件看到x事件 二、 实现$on $off 以及 $emit 总结不易~ 本章节对我有很大的收获, 希望对你也是!!! 本节素材已上传至Gitee:yihaohhh/我爱Vue - Gitee.com 全局事件总线图: 本节素材…...
动态规划背包问题
一、0-1背包问题 0-1背包问题就是给定n个物品和一个容量为C的背包,物品i的重量是Wi,其价值是Vi。问:应该如何选择装入背包的物品,使总价值最大且总重量不超过C? 1.确定状态表示 dp[i][j] 表示在背包容量为j时,从下标…...
ctfshow web入门 web49
信息收集 此%非彼%,%0a中的%不会被识别,因为识别之前就已经自动转化为了换行符 所以和之前一样的解法,没什么好说的 if(isset($_GET[c])){$c$_GET[c];if(!preg_match("/\;|cat|flag| |[0-9]|\\$|\*|more|less|head|sort|tail|sed|cut|…...
AI+浏览器自动化:Nanobrowser Chrome 扩展的使用「详细教程」
AI+浏览器自动化:Nanobrowser Chrome 扩展的使用「详细教程」 一、前言二、Nanobrowser简介2.1 项目背景2.2 核心特性三、安装与配置3.1 安装方式3.1.1 Chrome Web Store安装3.1.2 手动安装最新版3.2 基本配置3.2.1 添加API Key3.2.2 选择模型3.2.3 其他设置四、核心功能详解4…...
【表设计】外键的取舍-分布式中逐渐消失的外键
在分布式大行其道的今天,为什么外键约束越来越少? 外键-数据链接带来强制完整性 在关系型数据库中,外键(Foreign Key)可以用于建立和强制两个表之间的数据链接。 在层次数据结构一篇的闭包表简单设计中,…...
HarmonyOS 5.0 分布式数据协同与跨设备同步
大家好,我是 V 哥。 使用 Mate 70有一段时间了,系统的丝滑使用起来那是爽得不要不要的,随着越来越多的应用适配,目前使用起来已经和4.3的兼容版本功能差异无碍了,还有些纯血鸿蒙独特的能力很是好用,比如&am…...
多行文本省略
方式1 兼容性不好 height: 100px; line-height: 25px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;方式2 利用浮动环绕、空白元素站位margin-top调整位置 <div class"wrap"><div class"more"…...
Adobe卸载清理工具Creative Cloud Cleaner Tool下载
Adobe Creative Cloud Cleaner Tool 是 Adobe 公司官方推出的一款卸载清理工具,主要用于清理 Creative Cloud 应用程序在安装、更新或卸载过程中可能遗留下来的错误配置文件、缓存、注册表项或其他系统级残留内容。相比一般的卸载程序,它更深入地处理系统…...
分布式、高并发-Day03
以下是 Day 3 详细学习内容(线程池拒绝策略实战:DiscardOldestPolicy与CallerRunsPolicy,30 分钟完整计划),包含策略原理、分步代码实战和场景解析: 📖 今日学习目标 掌握DiscardOldestPolicy…...
高等数学第四章---不定积分(4.4有理函数的不定积分2)
&4.4有理函数的不定积分2 篇幅有限制,例题的解答会占大量字符,html限制字符为22000个左右。这里继续探讨上文的有理函数的不定积分。 一、三角函数有理式的不定积分 由 sin x \sin x sinx, cos x \cos x cosx 以及常数经过有限次加、减、…...
C++中指针使用详解(4)指针的高级应用汇总
C 中指针的高级应用非常丰富,掌握这些内容能让你写出更高性能、更底层控制力强的代码。下面是应用模块梳理和例子讲解。 目录预览 函数指针与回调机制指针数组 vs 数组指针指针与类成员函数(成员函数指针)智能指针(unique_ptr, s…...
Java 8 非对称加密代码示例
以下是使用Java 8实现RSA非对称加密的完整代码示例,包括密钥生成、加密和解密过程。 1. 生成RSA密钥对 import java.security.*; import java.security.spec.PKCS8EncodedKeySpec; import java.security.spec.X509EncodedKeySpec; import java.util.Base64; impor…...
Linux环境基础与开发工具使用
1. Linux编译器vim 1.1 vim的基本概念讲解 vim有很多种模式,我们初学者常用的就是命令模式(command mode)、插入模式(Insert mode)和底行模式(last line mode)。 命令/正常模式(Normal mode) …...