当前位置: 首页 > news >正文

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

 88a1848e27384a3ab124b8583eb94ee4.png

 c82ad62191d34ec691e78af45b8b76ec.png

 二、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会对所有文件进行校验,并尝试进行修复

1da10685f86746139060a87beda06fc2.png

2e6014e08afc4f6d9cb7bae810300351.png

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语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int year 2000;//执行循环判断&#xff1b;while (year < 2010){//执行流程&#xff1b;//判断能否整除4&#xff1…...

2024全国水科技大会【协办单位】凌志环保股份有限公司

凌志环保股份有限公司成立于1998年5月&#xff0c;集团共有20余家经营主体组成&#xff0c;凌志环保作为村镇污水处理领域的领军企业、农村污水处理“家电化”的开创者&#xff0c;深耕水治理行业25年&#xff0c;2022年被工信部认定为国家级专精特新“小巨人”企业。公司的核心…...

以太坊开发学习-solidity(二)值类型

文章目录 第一个Solidity程序编译并部署代码变量值类型1. 布尔型2. 整型3. 地址类型4. 定长字节数组 第一个Solidity程序 开发工具&#xff1a;remix 本教程中&#xff0c;我会用remix来跑solidity合约。remix是以太坊官方推荐的智能合约开发IDE&#xff08;集成开发环境&#…...

实景剧本杀小程序儿童公园剧本杀小程序系统开发

开发实景剧本杀小程序儿童公园剧本杀系统需要考虑以下几个方面&#xff1a; 1. 游戏设计&#xff1a;设计适合儿童玩耍的剧本杀游戏&#xff0c;考虑场景、角色、任务、线索等因素&#xff0c;以适应儿童的理解力和参与度。 2. 技术实现&#xff1a;利用小程序技术框架进行系…...

AJAX——综合案例

1 Bootstrap弹框 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作 步骤&#xff1a; 引入bootstrap.css和bootstrap.js准备弹框标签&#xff0c;确认结构通过自定义属性&#xff0c;控制弹框的显示和隐藏 <!DOCTYPE html> <html la…...

数字化社会的新纪元:揭秘 Web3 的社交网络

随着区块链技术的不断发展和普及&#xff0c;Web3作为其重要组成部分&#xff0c;正逐渐改变着社交网络的面貌。Web3的出现不仅为社交网络带来了新的技术和理念&#xff0c;还为用户提供了更加开放、透明和安全的社交体验。本文将深入探讨Web3的社交网络&#xff0c;揭示其在数…...

旋转花键的制造工艺

旋转花键的制造工艺是一门精细的技术&#xff0c;涉及多个步骤和精细的操作&#xff0c;以确保最终产品的质量和性能&#xff0c;下面简单介绍下旋转花键的制造工艺。 1、原材料准备&#xff1a;制造旋转花键的核心是选择合适的材料&#xff0c;根据花键的规格和性能要求&#…...

python--高阶函数

python--高阶函数 mapmap的用法map的代码示例 filterfilter的用法filter的代码示例 reducereduce的用法reduce的代码示例 返回函数IO编程打开文件文件打开--打开格式文件打开--上下文管理器打开文件&#xff08;会自动close文件&#xff09; 文件读取文件读取--file.read(m)文件…...

Vue/Uni-app/微信小程序 v-if 设置出场/退出动画(页面交互不死板,看起来更流畅)

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 在Vue.js中&#xff0c;使用v-if进行条件渲染时设置动画可以通过<transition>组件来实现。 具体操作步骤如下&#xff1a; 包裹条件渲染的元素&#xff1a;您需要将要通过v-if控制显示隐藏的元素包裹在<transition…...

加速量子计算机商业化!富士通日立NEC等联合成立新量子计算公司

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨王珩 编译/排版丨沛贤 深度好文&#xff1a;700字丨5分钟阅读 日本工业界和学术界将在 2024 年联合成立新一家公司&#xff0c;研发量子计算机并将其商业化。包括富士通、日立和NEC在内…...

RPC学习笔记一

什么是RPC RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种用于实现分布式系统中不同计算机或进程之间进行通信和调用的技术和模式。 在传统的过程调用中&#xff0c;当一个程序需要调用另一个程序的函数或方法时&#xff0c;通常是在同一台…...

计算机设计大赛 题目:基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…...

LabVIEW飞行器螺旋桨性能测试与数据监控

LabVIEW飞行器螺旋桨性能测试与数据监控 开发LabVIEW的电动飞行器螺旋桨性能测试与数据监控系统&#xff0c;专门针对电动飞行器螺旋桨在运行过程中的性能测试和监控需求。通过采集转速、转矩、拉力和温度等关键参数&#xff0c;系统能够实时监测和分析螺旋桨的状态&#xff0…...

数字电子技术实验(九)

单选题 1. 本实验仿真与实际操作时时钟信号源必须满足什么条件&#xff1f; A. 仿真和实际操作时&#xff0c;时钟信号源频率必须大于1KHZ。 B. 仿真和实际操作时钟信号源频率可以在1 - 5 0HZ之间调整。 C. 仿真和实际操作时钟信号源频率必须是1HZ。 D. 仿真和实际操作时钟…...

Android 开发环境搭建(Android Studio 安装图文详细教程)

Android Studio 下载 https://developer.android.google.cn/studio?hlzh-cn Android Studio 安装 检查电脑是否启用虚拟化 如果没有开启虚拟化&#xff0c;则需要进入电脑的 BIOS 中开启 直接 next选择安装的组件&#xff0c;Android Studio 和 Android 虚拟设备&#xff…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...