前端开发-添加公用的ts文件,并在Vue文件中引用

news2024/11/16 7:43:10

一般我们把页面要用的公用函数写在一个ts文件中
通过调用这个ts文件让我们可以在vue文件中使用函数
Eg:我们现在创建一个formRules.ts文件
在这里插入图片描述
然后在我们需要调用该函数体的vue文件中

import { required } from "@/utils/formRules";

有可能语法一开始会提示
在这里插入图片描述
这种就是你需要在你的项目中安装Path模块

npm i path

然后在你的vite.config.ts中添加对path模块的声明

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path" 

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 这里就是需要配置resolve里的别名
      "@": path.join(__dirname, "./src") // path记得引入
    }
  }
})

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

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

相关文章

Shell环境变量深入:自定义系统环境变量

Shell环境变量深入:自定义系统环境变量 目标 能够自定义系统级环境变量 全局配置文件/etc/profile应用场景 当前用户进入Shell环境初始化的时候会加载全局配置文件/etc/profile里面的环境变量, 供给所有Shell程序使用 以后只要是所有Shell程序或命令使用的变量…

推荐丨快速申请免费域名证书

背景: 域名是一个IP地址上的“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址(网站,电子邮件,FTP等)。 通俗的说,域名就相当于一个家庭的门牌号码,别人通过这个号码可以很容易的找到你。 域名不仅便于记…

Python轻松玩转excel操作指导

目录 一、一图概览 二、表格操作 三、内容操作 四、单元格操作 五、Pandas实现表格操作 六、常见场景示例 一、一图概览 ​ ​本文主要对openpyxl库的常用表格操作进行了梳理,熟练的运用后可极大地提升工作效率。 二、表格操作 #创建一个表格sheet.xlsx #…

python数据分析-基于数据挖掘对APP评分的预测

前言 当我们谈论关于APP用户分析与电子商务之间的联系时,机器学习在这两个领域的应用变得至关重要。App用户分析和电子商务之间存在着密切的关联,因为用户行为和偏好的深入理解对于提高用户体验、增加销售以及优化产品功能至关重要。故本文基于K-近邻模…

揭秘C++ String容器:字符串操作的艺术

目录 ​编辑 引言 一、初识std::string:构造与初始化 二、字符串的操纵艺术:拼接、查找与替换 三、访问与遍历:字符的细腻触感 四、大小与容量:动态调整的智慧 五、进阶功能:探索更多可能 结语 引言 在C标准库…

弱类型解析

php中 转化为相同类型后比较 先判断数据类型后比较数值 var_dump("asdf"0);#bool(true) var_dump("asdf"1);#bool(false) var_dump("0asdf"0);#bool(true) var_dump("1asdf"1);#bool(true)1、md5撞库 例&#xff1a; <?php incl…

【Python从入门到进阶】55、使用Python轻松操作Mysql数据库

一、引言 1、MySQL数据库简介 MySQL是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它使用了一种名为Structured Query Language&#xff08;SQL&#xff09;的查询语言来管理数据。MySQL因其高性能、可扩展性、易用性和稳定性而广受欢迎&#x…

【论文复现】LSTM长短记忆网络

LSTM 前言网络架构总线遗忘门记忆门记忆细胞输出门 模型定义单个LSTM神经元的定义LSTM层内结构的定义 模型训练模型评估代码细节LSTM层单元的首尾的处理配置Tensorflow的GPU版本 前言 LSTM作为经典模型&#xff0c;可以用来做语言模型&#xff0c;实现类似于语言模型的功能&am…

数据结构:树(3)【二叉树链式结构实现】【二叉树的前序,中序,后序遍历】【求二叉树全部结点个数】【求二叉树叶子结点个数】【求二叉树的深度】【单值二叉树】

一.二叉树链式结构的实现 二叉树的链式结构的实现相对于顺序结构的实现就没有那么多的讲究了。就是普通的链表&#xff0c;只不过多了一个指向的指针。 具体结构如下&#xff1a; typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType data;struct BinaryTre…

云计算和大数据处理

文章目录 1.云计算基础知识1.1 基本概念1.2 云计算分类 2.大数据处理基础知识2.1 基础知识2.3 大数据处理技术 1.云计算基础知识 1.1 基本概念 云计算是一种提供资源的网络&#xff0c;使用者可以随时获取“云”上的资源&#xff0c;按需求量使用&#xff0c;并且可以看成是无…

一.架构设计

架构采用 ddd 架构&#xff0c;不同于传统简单的三层的架构&#xff0c;其分层的思想对于大家日后都是很有好处的&#xff0c;会给大家的思想层级&#xff0c;提高很多。 传统的项目 现有的架构 采取ddd架构&#xff0c;给大家在复杂基础上简化保留精髓&#xff0c;一步步进行…

以太坊钱包

以太坊钱包是你通往以太坊系统的门户。它拥有你的密钥&#xff0c;并且可以代表你创建和广播交易。选择一个以太坊钱包可能很困难&#xff0c;因为有很多不同功能和设计选择。有些更适合初学者&#xff0c;有些更适合专家。即使你现在选择一个你喜欢的&#xff0c;你可能会决定…

游戏找不到d3dcompiler_43.dll怎么办,教你5种可靠的修复方法

在电脑使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到d3dcompiler43.dll”。这个问题通常出现在游戏或者图形处理软件中&#xff0c;它会导致程序无法正常运行。为了解决这个问题&#xff0c;我经过多次尝试和总结&#xff0c;找到了以下五…

粤嵌—2024/5/23—不同路径 ||(✔)

代码实现&#xff1a; int uniquePathsWithObstacles(int **obstacleGrid, int obstacleGridSize, int *obstacleGridColSize) {int x obstacleGridSize, y obstacleGridColSize[0];int dp[x][y];memset(dp, 0, sizeof(int) * x * y);for (int j 0; j < y && obs…

OpenUI 可视化 AI:打造令人惊艳的前端设计!

https://openui.fly.dev/ai/new 可视化UI的新时代&#xff1a;通过人工智能生成前端代码 许久未更新, 前端时间在逛github&#xff0c;发现一个挺有的意思项目&#xff0c;通过口语化方式生成前端UI页面&#xff0c;能够直观的看到效果&#xff0c;下面来给大家演示下 在现代…

智能家居完结 -- 整体设计

系统框图 前情提要: 智能家居1 -- 实现语音模块-CSDN博客 智能家居2 -- 实现网络控制模块-CSDN博客 智能家居3 - 实现烟雾报警模块-CSDN博客 智能家居4 -- 添加接收消息的初步处理-CSDN博客 智能家居5 - 实现处理线程-CSDN博客 智能家居6 -- 配置 ini文件优化设备添加-CS…

复习java5.26

面向对象和面向过程 面向过程&#xff1a;把一个任务分成一个个的步骤&#xff0c;当要执行这个任务的时候&#xff0c;只需要依次调用就行了 面向对象&#xff1a;把构成任务的事件构成一个个的对象&#xff0c;分别设计这些对象&#xff08;属性和方法&#xff09;、然后把…

国内最受欢迎的7大API供应平台对比和介绍||电商API数据采集接口简要说明

本文将介绍7款API供应平台&#xff1a;聚合数据、百度APIStore、Apix、数说聚合、通联数据、HaoService、datasift 。排名不分先后&#xff01; 免费实用的API接口 第一部分 1、聚合数据&#xff08;API数据接口_开发者数据定制&#xff09; 2、百度API Store(API集市_APIStore…

数据安全不容小觑:.hmallox勒索病毒的防范与应对

一、引言 随着网络技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒作为一种极具破坏性的网络攻击手段&#xff0c;已在全球范围内造成了巨大的经济损失和社会影响。在众多勒索病毒中&#xff0c;.hmallox勒索病毒以其狡猾的传播方式和强大的加密能力…

27【Aseprite 作图】盆栽——拆解

1 橘子画法拆解 (1)浅色3 1 0;深色0 2 3 就可以构成一个橘子 (2)浅色 2 1;深色1 0 (小个橘子) (3)浅色 2 1 0;深色1 2 3 2 树根部分 (1)底部画一条横线 (2)上一行 左空2 右空1 【代表底部重心先在右】 (3)再上一行,左空1,右空1 (4)再上一行,左突出1,…