Vue3学习日记 Day4 —— pnpm,Eslint
注:此课程需要有Git的基础才能学习
一、pnpm包管理工具
1、使用原因
1.1、速度快,远胜过yarn和npm
1.2、节省磁盘空间
2、使用方式
2.1、安装方式
npm install -g pnpm
2.2、创建项目
pnpm create vue


二、Eslint配置代码风格
1、环境同步
1、禁用Prettier插件(如果安装了)
2、安装Eslint插件,并配置保存时自动修复
2.1、步骤
(1)打开vscode设置
(2)点击右上角配置
(3)设置"source.fixAll"为true
2、配置文件 .eslintrc.cjs
//将以下代码加入到eslinterc.cjs钟,实现代码规范化配置
rules: {
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制(win mac 不一致)
}
],
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
// 💡 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示。
'no-undef': 'error'
}
三、配置代码检查工作流
1、配置代码提交前检查
0、打开bash终端
1、初始化git仓库
——执行git init
2、初始化husky工具配置
——执行
pnpm dlx husky-init && pnpm install
3、修改.husky/pre-commit文件
将npm test
修改为pnpm lint
//pnpm lint会对所有文件进行校验,并尝试进行修复


2、暂存区eslint校验
1、概念
由于lint是全量校验,而面对历史问题没有办法,所以引出了eslint校验
2、使用
2.1、安装int-staged
pnpm i lint-staged -D
2.2、在package.json中配置lint-staged命令
//将以下命令添加到package.json中
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
...
//将以下命令添加到package.json下scripts之中
"lint-staged": "lint-staged"
2.3、在.husky/pre-commit文件中进行修改
将pnpm lint修改为pnpm lint-staged
四、目录调整
1、删除无用文件
2、添加utils目录用于存放工具函数,api目录用于存放请求模块相关
3、拷贝全局样式和图片,安装预处理器支持
4、安装sass
pnpm add sass -D
相关文章:
Vue3学习日记 Day4 —— pnpm,Eslint
注:此课程需要有Git的基础才能学习 一、pnpm包管理工具 1、使用原因 1.1、速度快,远胜过yarn和npm 1.2、节省磁盘空间 2、使用方式 2.1、安装方式 npm install -g pnpm 2.2、创建项目 pnpm create vue 二、Eslint配置代码风格 1、环境同步 1、禁用Pret…...
二叉树遍历(牛客网)
描述 编一个程序,读入用户输入的一串先序遍历字符串,根据此字符串建立一个二叉树(以指针方式存储)。 例如如下的先序遍历字符串: ABC##DE#G##F### 其中“#”表示的是空格,空格字符代表空树。建立起此二叉树…...
语音识别:whisper部署服务器(远程访问,语音实时识别文字)
Whisper是OpenAI于2022年发布的一个开源深度学习模型,专门用于语音识别任务。它能够将音频转换成文字,支持多种语言的识别,包括但不限于英语、中文、西班牙语等。Whisper模型的特点是它在多种不同的音频条件下(如不同的背景噪声水…...
Faust勒索病毒:了解最新变种[nicetomeetyou@onionmail.org].faust,以及如何保护您的数据
导言: 在一个快节奏的数字世界中,我们经常忽视数据安全的重要性。然而,最新的勒索病毒——[nicetomeetyouonionmail.org].faust、[support2022cock.li].faust、[tsai.shenmailfence.com].faust 、[Encrypteddmailfence.com].faust、[Deciphe…...
EI Scopus检索 | 第二届大数据、物联网与云计算国际会议(ICBICC 2024) |
会议简介 Brief Introduction 2024年第二届大数据、物联网与云计算国际会议(ICBICC 2024) 会议时间:2024年12月29日-2025年1月1日 召开地点:中国西双版纳 大会官网:ICBICC 2024-2024 International Conference on Big data, IoT, and Cloud C…...
判断闰年(C语言)
一、运行结果; 二、源代码; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值;int year 2000;//执行循环判断;while (year < 2010){//执行流程;//判断能否整除4࿱…...
2024全国水科技大会【协办单位】凌志环保股份有限公司
凌志环保股份有限公司成立于1998年5月,集团共有20余家经营主体组成,凌志环保作为村镇污水处理领域的领军企业、农村污水处理“家电化”的开创者,深耕水治理行业25年,2022年被工信部认定为国家级专精特新“小巨人”企业。公司的核心…...
以太坊开发学习-solidity(二)值类型
文章目录 第一个Solidity程序编译并部署代码变量值类型1. 布尔型2. 整型3. 地址类型4. 定长字节数组 第一个Solidity程序 开发工具:remix 本教程中,我会用remix来跑solidity合约。remix是以太坊官方推荐的智能合约开发IDE(集成开发环境&#…...
实景剧本杀小程序儿童公园剧本杀小程序系统开发
开发实景剧本杀小程序儿童公园剧本杀系统需要考虑以下几个方面: 1. 游戏设计:设计适合儿童玩耍的剧本杀游戏,考虑场景、角色、任务、线索等因素,以适应儿童的理解力和参与度。 2. 技术实现:利用小程序技术框架进行系…...
AJAX——综合案例
1 Bootstrap弹框 功能:不离开当前页面,显示单独内容,供用户操作 步骤: 引入bootstrap.css和bootstrap.js准备弹框标签,确认结构通过自定义属性,控制弹框的显示和隐藏 <!DOCTYPE html> <html la…...
数字化社会的新纪元:揭秘 Web3 的社交网络
随着区块链技术的不断发展和普及,Web3作为其重要组成部分,正逐渐改变着社交网络的面貌。Web3的出现不仅为社交网络带来了新的技术和理念,还为用户提供了更加开放、透明和安全的社交体验。本文将深入探讨Web3的社交网络,揭示其在数…...
旋转花键的制造工艺
旋转花键的制造工艺是一门精细的技术,涉及多个步骤和精细的操作,以确保最终产品的质量和性能,下面简单介绍下旋转花键的制造工艺。 1、原材料准备:制造旋转花键的核心是选择合适的材料,根据花键的规格和性能要求&#…...
python--高阶函数
python--高阶函数 mapmap的用法map的代码示例 filterfilter的用法filter的代码示例 reducereduce的用法reduce的代码示例 返回函数IO编程打开文件文件打开--打开格式文件打开--上下文管理器打开文件(会自动close文件) 文件读取文件读取--file.read(m)文件…...
Vue/Uni-app/微信小程序 v-if 设置出场/退出动画(页面交互不死板,看起来更流畅)
天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 在Vue.js中,使用v-if进行条件渲染时设置动画可以通过<transition>组件来实现。 具体操作步骤如下: 包裹条件渲染的元素:您需要将要通过v-if控制显示隐藏的元素包裹在<transition…...
加速量子计算机商业化!富士通日立NEC等联合成立新量子计算公司
内容来源:量子前哨(ID:Qforepost) 编辑丨王珩 编译/排版丨沛贤 深度好文:700字丨5分钟阅读 日本工业界和学术界将在 2024 年联合成立新一家公司,研发量子计算机并将其商业化。包括富士通、日立和NEC在内…...
RPC学习笔记一
什么是RPC RPC(Remote Procedure Call,远程过程调用)是一种用于实现分布式系统中不同计算机或进程之间进行通信和调用的技术和模式。 在传统的过程调用中,当一个程序需要调用另一个程序的函数或方法时,通常是在同一台…...
计算机设计大赛 题目:基于深度学习的中文对话问答机器人
文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分:4.2 损失函数:4.3 搭建seq2seq框架:4.4 测试部分:4.5 评价NLP测试效果:4.6 梯度截断…...
LabVIEW飞行器螺旋桨性能测试与数据监控
LabVIEW飞行器螺旋桨性能测试与数据监控 开发LabVIEW的电动飞行器螺旋桨性能测试与数据监控系统,专门针对电动飞行器螺旋桨在运行过程中的性能测试和监控需求。通过采集转速、转矩、拉力和温度等关键参数,系统能够实时监测和分析螺旋桨的状态࿰…...
数字电子技术实验(九)
单选题 1. 本实验仿真与实际操作时时钟信号源必须满足什么条件? A. 仿真和实际操作时,时钟信号源频率必须大于1KHZ。 B. 仿真和实际操作时钟信号源频率可以在1 - 5 0HZ之间调整。 C. 仿真和实际操作时钟信号源频率必须是1HZ。 D. 仿真和实际操作时钟…...
Android 开发环境搭建(Android Studio 安装图文详细教程)
Android Studio 下载 https://developer.android.google.cn/studio?hlzh-cn Android Studio 安装 检查电脑是否启用虚拟化 如果没有开启虚拟化,则需要进入电脑的 BIOS 中开启 直接 next选择安装的组件,Android Studio 和 Android 虚拟设备ÿ…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
【java面试】微服务篇
【java面试】微服务篇 一、总体框架二、Springcloud(一)Springcloud五大组件(二)服务注册和发现1、Eureka2、Nacos (三)负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...
JavaScript 标签加载
目录 JavaScript 标签加载script 标签的 async 和 defer 属性,分别代表什么,有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...
C++11 constexpr和字面类型:从入门到精通
文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...
