有来团队后台项目-解析10
axios
安装
pnpm i axios
创建文件
src 目录下创建 utils 文件夹,utils 文件夹下创建request.ts
src 目录下创建store 文件夹,文件夹下创建index.ts ,创建modules 文件夹
编写request.ts
// 引入axios,引入请求拦截器类型约束,响应拦截器类型约束
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";// 创建axios 实例const service = axios.create({baseURL: "http://localhost:3000",timeout: 5000,
});
// 请求拦截器
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 在发送请求之前做些什么return config;},(error: any) => {// 对请求错误做些什么return Promise.reject(error);}
);
// 响应拦截器
service.interceptors.response.use((response: AxiosResponse) => {// 对响应数据做点什么return response;},(error: any) => {// 对响应错误做点什么return Promise.reject(error);}
);
// 导出axios 实例
export default service;
配置环境变量
新建目录
src/.env.development 开发环境
src/.env.production 生产环境
配置环境
// .env.development
## 开发环境
NODE_ENV='development'
# 应用端口
VITE_APP_PORT = 3009# 代理前缀
VITE_APP_BASE_API = '/dev-api'# 线上接口地址
VITE_APP_API_URL = http://vapi.youlai.tech
//.env.production
## 生产环境
NODE_ENV='production'# 代理前缀
VITE_APP_BASE_API = '/prod-api'
配置环境变量只能提示
新建文件src/typings/env.d.ts
// 环境变量的类型约束
/// <reference types="vite/client" />declare module "*.vue" {import { DefineComponent } from "vue";// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>;export default component;
}interface ImportMetaEnv {/** 应用端口 */VITE_APP_PORT: string;/** API 基础路径 */VITE_APP_BASE_API: string;VITE_APP_API_URL: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}/*** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示*/
declare const __APP_INFO__: {pkg: {name: string;version: string;engines: {node: string;};dependencies: Record<string, string>;devDependencies: Record<string, string>;};buildTimestamp: number;
};
配置package.json
"preinstall": "npx only-allow pnpm",// 只能使用pnpm
"build": "vite build --mode production",
"dev": "vite serve --mode development",
"build:prod": "vite build --mode production && vue-tsc --noEmit",
"engines": {"node": ">=18.0.0"},
vue-tsc:Vue 官方提供的命令,用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查
–noEmit:TS 编译器的选项,使用 --noEmit 选项后,编译器仅执行类型检查,而不会生成任何实际的编译输出
engines: node 的版本要大于18.0.0
配置vite.config.ts
// 获取环境const env = loadEnv(mode, process.cwd());// 配置代理server: {// 允许IP 访问host: "0.0.0.0",port: Number(env.VITE_APP_PORT),open: true,proxy: {// 配置代理[env.VITE_APP_BASE_API]: {changeOrigin: true,// 接口地址target: env.VITE_APP_BASE_API,rewrite: (path) =>path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),},},},
安装遗漏的icon 插件
pnpm i unplugin-icons
配置lint-staged文件
pnpm i lint-staged S
配置husky文件
在.husky 文件夹下的pre-commit文件中配置
npm run lint:lint-staged
配置package.json
// 在代码提交之前,进行代码规则检查能够确保进入git库的代码都是符合代码规则的
"lint:lint-staged": "lint-staged",
执行配置命令
pnpm run dev
pnpm run build:prod
查看是否会报错
补充安装git 提交规范
安装
npm i -D cz-git czg
配置
package.json 中
// package.json 添加 config 字段,指定使用的 commitizen 适配器,然后在 script 中添加一个脚本命令
"scripts": {"commit": "git-cz"}"config": {"commitizen": {"path": "node_modules/cz-git"}},
以后把 git commit 替换成 npm run cz
pinia
安装
pnpm i pinia
@vueuse/core
一些封装好的工具方法
pnpm i @vueuse/core
查看源码
https://github.com/1094549944/youlahoutaijiexi/tree/jiexi10
相关文章:
有来团队后台项目-解析10
axios 安装 pnpm i axios创建文件 src 目录下创建 utils 文件夹,utils 文件夹下创建request.ts src 目录下创建store 文件夹,文件夹下创建index.ts ,创建modules 文件夹 编写request.ts // 引入axios,引入请求拦截器类型约束…...
【自动化】在C#中创建和配置串口对象SerialPort
串口通信在各种应用场景中都有广泛的应用,如工业控制、数据采集等。在.NET框架中,SerialPort类是用于串口通信的一个非常实用的类。本文将介绍如何在C#中使用SerialPort类进行串口通信,包括SerialPort的创建方法、基本属性设置和数据发送的基…...
突破编程_C++_设计模式(访问者模式)
1 访问者模式的基本概念 C中的访问者模式是一种行为设计模式,它允许你在不修改类层次结构的情况下增加新的操作。这种模式将数据结构与数据操作解耦,使得操作可以独立于对象的类来定义。 访问者模式的主要组成部分包括: (1&…...
C语言入门到精通之练习53:矩阵交换行问题(附带源码)
描述 给定一个 5*5 的矩阵(数学上,一个 rc 的矩阵是一个由 r 行 c 列元素排列成的矩形阵列),将第 n 行和第 m 行交换,输出交换后的结果。 输入输入共 6 行,前 5 行为矩阵的每一行元素, 元素与元素之间以一…...
Python白练-2统计下列5行字符串中字符出现的频数
问题:统计下列5行字符串中字符a、c、g、t出现的频数 数据:data2_2: 1.aggcacggaaaaacgggaataacggaggaggacttggcacggcattacacggagg 2.cggaggacaaacgggatggcggtattggaggtggcggactgttcgggga 3.gggacggatacggattctggccacggacggaaaggaggacacggcg…...
深入理解DHCP服务:网络地址的自动化分配
深入理解DHCP服务:网络地址的自动化分配 在现代网络环境中,动态主机配置协议(DHCP) 是一个至关重要的服务,它允许自动分配IP地址和其他相关配置信息给网络中的设备。本文将深入探讨DHCP服务的工作原理、配置方法以及如…...
Java高级编程—泛型
文章目录 1.为什么要有泛型 (Generic)1.1 泛型的概念1.2 使用泛型后的好处 2.在集合中使用泛型3.自定义泛型结构3.1 自定义泛型类、泛型接口3.2 自定义泛型方法 4.泛型在继承上的体现5.通配符的使用5.1 基本使用5.2 有限制的通配符的使用 1.为什么要有泛型 (Generic) Java中的…...
Exam in MAC [容斥]
题意 思路 正难则反 反过来需要考虑的是: (1) 所有满条件一的(x,y)有多少对: x 0 时,有c1对 x 1 时,有c对 ...... x c 时,有1对 以此类推 一共有 (c2)(c1)/2 对 (2) 符合 x y ∈ S的有多少对:…...
Java 学习和实践笔记(36):接口(interface)
面向对象的精髓,最能体现这一点的就是接口! 为什么我们讨论设计模式都只针对具备了抽象能力的语言(比如C、Java、C#等),就是因为设计模式所研究的,实际上就是如何合理的去抽象。 接口就是一组规范,所有实…...
Elastic Stack--10--QueryBuilders UpdateQuery
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 QueryBuildersESUtil QueryBuilders package com.elasticsearch; import org.elasticsearch.action.ActionListener; import org.elasticsearch.action.search.Sea…...
腾讯云服务器CVM_云主机_云计算服务器_弹性云服务器
腾讯云服务器CVM提供安全可靠的弹性计算服务,腾讯云明星级云服务器,弹性计算实时扩展或缩减计算资源,支持包年包月、按量计费和竞价实例计费模式,CVM提供多种CPU、内存、硬盘和带宽可以灵活调整的实例规格,提供9个9的数…...
Java八股文(Spring Boot)
Java八股文のSpring Boot Spring Boot Spring Boot 什么是Spring Boot? Spring Boot是一个用于开发和构建微服务应用程序的框架,它简化了Spring应用的配置和部署。 Spring Boot的核心特性是什么? Spring Boot的核心特性包括自动配置、起步依…...
ts文件怎么无损转换mp4?这样设置转换模式~
TS格式(Transport Stream)的起源可追溯到数字电视广播领域。设计初衷是解决视频、音频等多媒体数据在传输和存储中的问题。采用一系列标准技术,TS格式让视频信号能够以流的形式传输,因此在数字电视、广播等领域得到广泛应用。 MP4…...
如何在Windows 10上打开和关闭平板模式?这里提供详细步骤
前言 默认情况下,当你将可翻转PC重新配置为平板模式时,Windows 10会自动切换到平板模式。如果你希望手动打开或关闭平板模式,有几种方法可以实现。 自动平板模式在Windows 10上如何工作 如果你使用的是二合一可翻转笔记本电脑࿰…...
介绍kafka核心原理及底层刷盘机制,集群分片机制,消息丢失和重复消费有对应的线上解决方案
Kafka是一个高性能、分布式、持久化的消息系统,它的核心原理包括发布/订阅模型、分布式日志存储和高吞吐量的数据流处理。 发布/订阅模型:Kafka采用发布/订阅模型,消息的生产者将消息发送到一个或多个主题(Topic)&…...
基于Python的中医药知识问答系统设计与实现
[简介] 这篇文章主要介绍了基于Python的中医药知识问答系统的设计与实现。该系统利用Python编程语言,结合中医药领域的知识和技术,实现了一个功能强大的问答系统。文章首先介绍了中医药知识的特点和传统问答系统的局限性,然后提出了设计思路…...
QT 如何防止 QTextEdit 自动滚动到最下方
在往QTextEdit里面append字符串时,如果超出其高度,默认会自动滚动到QTextEdit最下方。但是有些场景可能想从文本最开始的地方展示,那么就需要禁止自动滚动。 我们可以在append之后,添加如下代码: //设置编辑框的光标位…...
【C/C++ 学习笔记】指针
【C/C 学习笔记】指针 视频地址: Bilibili 概念 可以通过指针间接访问内存用于保存地址 使用 通过 & 可以获取数据的指针 通过 * 可以取得指针的数据 指针的数据类型就是 数据类型 * int number 10;int *p &number;// 10 cout << "number: " …...
【Node.js从基础到高级运用】十二、身份验证与授权:JWT
身份验证与授权是现代Web应用中不可或缺的部分。了解如何在Node.js应用中实施这些机制,将使你能够构建更安全、更可靠的应用程序。本文将引导你通过使用JWT实现用户注册、登录和权限控制的过程。 JWT(Json Web Token) JWT是一种用于双方之间…...
蓝桥杯刷题|01入门真题
[蓝桥杯 2020 省 AB1] 解码 题目描述 小明有一串很长的英文字母,可能包含大写和小写。 在这串字母中,有很多连续的是重复的。小明想了一个办法将这串字母表达得更短:将连续的几个相同字母写成字母 出现次数的形式。 例如,连续…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
