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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/278733.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack5零基础入门-11处理html资源

1.目的 主要是为了自动引入打包后的js与css资源,避免手动引入 2.安装相关包 npm install --save-dev html-webpack-plugin 3.引入插件 const HtmlWebpackPlugin require(html-webpack-plugin); 4.添加插件(通过new方法调用) /**插件 *…

外贸网站文章批量生成器

随着全球贸易的不断发展,越来越多的企业开始关注外贸市场,而拥有高质量的内容是吸引潜在客户的关键之一。然而,为外贸网站生产大量优质的文章内容可能是一项耗时且繁琐的任务。因此,外贸网站文章批量生成软件成为了解决这一难题的…

【Spring MVC】Spring MVC拦截器(Interceptor)

目录 一、拦截器介绍 二、拦截器 Interceptor 定义 2.1 HandlerInterceptor接口 2.2 Spring MVC中提供的一些HandlerInterceptor接口实现类 1、AsyncHandlerInterceptor 2、WebRequestInterceptor 3、MappedInterceptor 4、ConversionServiceExposingInterceptor 三、拦…

研究人员发现 OpenAI ChatGPT、Google Gemini 的漏洞

自 OpenAI 推出 ChatGPT 以来,生成式 AI 聊天机器人的数量及其在企业中的采用率在一年多时间里呈爆炸式增长,但网络安全专业人士的担忧也随之增加,他们不仅担心威胁组织对新兴技术的使用,还担心大型网络的安全性及模型&#xff08…

Chrome历史版本下载地址:Google Chrome Older Versions Download (Windows, Linux Mac)

最近升级到最新版本Chrome后发现页面居然显示错乱,是在无语, 打算退回原来的版本, 又发现官方只提供最新的版本下载, 为了解决这个问题所有收集了Chrome历史版本的下载地址分享给大家. Google Chrome Windows version 32-bit VersionSizeDate104.0.5112.10279.68 MB2022-05-30…

【小迪安全】学习cho1

介绍了一些名词: POC、EXP、Payload与Shellcode nc -lvvp 端口号 监听服务器端口 个人用机使用最多的是:windows10 服务器用机使用最多的是:Windows8,12,16 流量被防火墙拦截了,到这里进行给与权限 文件…

【CNN轻量化】RepViT: Revisiting Mobile CNN From ViT Perspective

RepViT: Revisiting Mobile CNN From ViT Perspective 论文链接:https://arxiv.org/abs/2307.09283 代码链接:https://github.com/THU-MIG/RepViT 一、摘要 探究了许多轻量级ViTs和轻量级CNNs之间的结构联系。文中从ViT的视角重新审视轻量级CNNs的高效…

Java 中的泛型(两万字超全详解)

文章目录 前言一、泛型概述1. 什么是泛型?为什么要使用泛型?2. 泛型使用场景3. 泛型概述小结 二、泛型类1. 泛型类的定义2. 泛型类的使用 三、泛型接口四、泛型方法1. 泛型方法的定义2. 泛型方法的使用3. 泛型方法中的类型推断 五、类型擦除1. 什么是类型…

本地虚拟机平台Proxmox VE结合Cpolar内网穿透实现公网远程访问

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&…

扇区架次数动态展示

打开前端Vue项目:kongguan_web,完成前端src/components/echart/SectorFlightChart.vue页面设计,使用ECharts插件实现柱状图和饼状图 在src/components目录下创建echart目录,完成src/components/echart/SectorFlightChart.vue 的页…

C++开发基础——类对象与构造析构

一、基础概念 类:用户自定义的数据类型。 对象:类类型的变量,类的实例。 类的成员:成员变量和成员函数。 成员变量:类中定义的变量。 成员函数:类中定义的函数。 定义类的代码样例: class…

嵌入式学习第二十九天!(数据结构的概念、单向链表)

数据结构: 1. 定义: 一组用来保存一种或者多种特定关系的数据的集合(组织和存储数据) 1. 程序设计: 将现实中大量而复杂的问题以特定的数据类型和特定的数据结构存储在内存中,并在此基础上实现某个特定的功…

【排序】快速排序

原理 对于一个数组x&#xff0c;快速排序流程如下&#xff1a; 确定分界点a&#xff0c;可以取x[l]、x[r]、x[l r / 2]、随机&#xff08;四种都可以&#xff09;调整区间&#xff0c;使得&#xff1a;区间被分成 < a 和 > a的两部分&#xff0c;左边 < a&#xff…

Jenkins-pipeline流水线构建完钉钉通知

添加钉钉机器人 在钉钉群设置里添加机器人拿出Webhook地址&#xff0c;设置关键词 Jenkins安装钉钉插件 Dashboard > 系统管理 > 插件管理&#xff0c;搜索构建通知&#xff0c;直接搜索Ding Talk也行 安装DingTalk插件&#xff0c;重启Jenkins 来到Dashboard > 系…

【物联网应用】基于云计算的智能化温室种植一体化平台

目录 第一章 作品概述 1.1. 作品名称 1.2. 应用领域 1.3.主要功能 1.4.创新性说明 第二章 需求分析 2.1 现实背景 2.2 用户群体及系统功能 2.3 竞品分析 第三章 技术方案 3.1. 硬件组成与来源 3.2. 硬件设计合理性 3.3. 硬件系统设计图 3.4. 接口的通用性与可扩展性 3.5. 代码规…

【ARM】DSTREAM上面的各个指示灯代表什么意思?

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 对于DStream仿真器上面的指示灯亮灭代表的意义进行分析。 2、 问题场景 主要对于DStream仿真器的使用过程中&#xff0c;不同的情况下面仿真器的指示灯会进行相应的亮灭。了解一下不同指示灯的亮灭所提示的信息…

注册个人小程序

访问地址 https://mp.weixin.qq.com/ 立即注册 选择小程序 注册 填写信息 登录邮箱 访问邮箱的链接激活账号 选择个人&#xff0c;填写信息 注册完成&#xff0c;即可登录进入填写信息

idea 开发serlvet班级通讯录管理系统idea开发mysql数据库web结构计算机java编程layUI框架开发

一、源码特点 idea开发 java servlet 班级通讯录管理系统是一套完善的web设计系统mysql数据库 系统采用serlvetdaobean mvc 模式开发&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 servlet 班…

【iOS】——Blocks

文章目录 前言一、Blocks概要1.什么是Blocks 二、Block模式1.block语法2.block类型变量3.截获自动变量值4._Block修饰符5.截获的自动变量 三、Blocks的实现1.Block的实质2.截获自动变量值3._Block说明符4.Block存储域 前言 一、Blocks概要 1.什么是Blocks Blocks是C语言的扩…

使用jenkins-pipeline进行利用项目文件自动化部署到k8s上

Discard old builds:丢弃旧的构建,目的是管理存储空间、提升性能以及保持环境整洁 Do not allow concurrent builds: 禁止并发构建是指同一时间内只允许一个构建任务执行,避免多个构建同时运行可能带来的问题 Do not allow the pipeline to resume if the controller resta…