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.mzph.cn/news/754412.shtml

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

相关文章

华为配置WAPI-PSK安全策略实验

配置WAPI-PSK安全策略示例 组网图形 图1 配置WAPI-PSK安全策略组网图 配置流程组网需求配置思路配置注意事项操作步骤配置文件 配置流程 WLAN不同的特性和功能需要在不同类型的模板下进行配置和维护,这些模板统称为WLAN模板,如域管理模板、射频模板、VAP…

基于单片机的机电控制实训平台设计

摘 要:自主研制一种基于单片机的机电控制实训平台。该平台由单片机主控单元及多个独立的功能模块单元组成,主控单元支持51或AVR系列单片机,各个功能模块独立设计,并可利用杜邦线进行组合连接。平台可实现单片机基本控制功能及典型机电控制功能,包括直流电机和微型步…

目标检测常见数据集格式(YOLO、VOC、COCO)

目录 1.YOLO格式数据 1.1数据格式 1.2YOLO格式数据示例 1.3YOLO格式可视化 2.COCO数据格式 2.1数据格式 2.2COCO格式数据示例 2.3COCO格式可视化 3.VOC数据格式 3.1数据格式 3.2VOC格式数据示例 3.3COCO格式可视化 🍓🍓1.YOLO格式数据 &…

C#LiteDB基本使用

C#LiteDB基本使用 LiteDB基本使用1.创建实体类2.连接数据库以及一些CRUD LiteDB基本使用 1.创建实体类 创建一个实体类 {public int Id { get; set; }public int Age { get; set; }public string Name { get; set; } string.Empty;public string[] Phone { get; set; }publ…

Jenkins使用pipeline流水线部署项目

新建流水线任务 前面的项目整个部署日志都在一个控制台页面,出现了错误不能快速定位不方便查阅 Jenkins提供了流水线方式的任务 这里我新建一个叫“pipeline-mytest”的流水线任务 在流水线出右侧有内置的样式,这里我选择了helloworld的样式。 构建一…

Apache Doris 2.0.6 版本正式发布

亲爱的社区小伙伴们,Apache Doris 2.0.6 版本已于 2024 年 3 月 12 日正式与大家见面,该版本在物化视图、统计信息收集、JDBC Catalog 等方面进行了更新优化,并提交了 114 个改进项以及问题修复,欢迎大家下载体验。 官网下载&…

25考研|北大软微会「爆炸」吗?

软微不是已经爆炸了吗? 大家去看看他的录取平均分就知道了,没有实力千万别碰,现在考软微已经不存在捡漏之说。 110408的复试线已经划到了465分,这个人真的不低了,因为有数学一和408两个比较难的专业课,复…

网络编程 - 套接字

1、预备知识 1.1、理解源IP地址和目的IP地址 在IP数据包头部中, 有两个IP地址, 分别叫做源IP地址, 和目的IP地址; 思考: 我们光有IP地址就可以完成通信了嘛? 想象一下发qq消息的例子, 有了IP地址能够把消息发送到对方的机器上, 但是还需要有一个其他的标识来区分…

完成系统支持Github三方登录

文章目录 1、需求2、在对接系统中完成客户端注册3、创建客户端应用4、CommonOAuth2Provider SpringSecurity OAuth2.0文档: https://docs.spring.io/spring-security/reference/servlet/oauth2/index.html 1、需求 对接Github,在自己系统实现支持Githu…

【C#语言入门】22. 接口、依赖反转、单元测试

【C#语言入门】22. 接口、依赖反转、单元测试 一、接口与单元测试 接口的产生:自底向上(重构),自顶向下(设计)C#中接口的实现(隐式,显式,多接口)语言对面向…

【力扣hot100】49. 字母异位词分组

题目 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“bat”],[“nat”,…

Visual Studio工程升级QT产生的问题及解决

文章目录 小结问题及解决QT的路径问题0xC0000139: Entry Point Not Found 参考 小结 最近将QT从版本5.3.2升级到了5.12.7,经及将VS2012工程升级到VS2015,碰到了一些问题,例如路径问题,程序无法启动的问题(Entry Point…

k8s client-java创建pod常见问题

1.配置Kubernetes连接: 使用Kubernetes的配置文件(通常位于~/.kube/config)或直接使用API服务器地址、认证信息等来配置客户端。 配置通常有两种模式,安全和不安全的配置模式,对认证要求严格就选用安全模式&#xff…

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

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

osgEarth学习笔记4-第一个OsgEarth QT程序

原文链接 使用QT Creator新建一个窗口项目。 编辑pro文件 QT core gui greaterThan(QT_MAJOR_VERSION, 4): QT widgets CONFIG c11 DEFINES QT_DEPRECATED_WARNINGS #DEFINES QT_DISABLE_DEPRECATED_BEFORE0x060000 # disables all the APIs deprecated bef…

前后端分离项目部署服务器教程--实践成功

文章目录 项目介绍流程1租界云服务2通过远程软件连接服务器3部署前后端代码停止功能文件 环境配置1.安装jdk2.安装Nginx3.安装mysql数据库 花了将近一天部署前后端的项目,写一个日志记录一下,话说孰能生巧。明天把服务器恢复初始在部署一下。 项目介绍 …

网络安全防御策略

网络安全防御策略 引言 在这个数字化的世界里,网络安全是每个个人和组织都需要关注的重要议题。了解如何保护自己免受网络攻击是至关重要的。 保持软件更新 重要性 防止已知漏洞被利用减少恶意软件感染的风险 操作建议 定期检查操作系统和应用程序的更新启用…

大模型-Prompt

一、prompt是什么 在大型语言模型集成中,"prompt" 是指您向模型提供的输入文本或指令,以引导模型生成特定类型的响应。这个 prompt 可以是一个问题、一段描述、一个任务说明,甚至是一部分对话历史记录等。通过设计和优化 prompt&a…

【已解决】在pycharm终端无法激活conda环境,但在cmd命令行中可以

一、问题描述 在windows下winr启动cmd命令行,可以成功运行conda命令并且激活环境在pycharm中打开Terminal终端,发现无法运行conda和pip命令,报错环境无法激活 无法在管道中间运行文档: D:\software\Anaconda3\condabin\conda.bat。 所在位置…

fedora RTL8821CE 无线网卡驱动安装

更新 fedora38 后,demsg 中会报大量的日志: rtw_8821ce 0000:02:00.0: unhandled firmware c2h interrupt如果遇到上面的信息,需要更新无线网卡驱动,方法参考: https://github.com/tomaspinho/rtl8821ce 1. 安装编译工具及依赖 sudo dnf i…