Vue3前端生成随机id(生成 UUID)实际运用
效果展示
封装工具（代码展示）
重新创建一个文件**/utils/someTools.js**，并在里面写入如下代码。
function Tools() {
}
Tools.prototype.guid = function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
const tools = new Tools();
export default tools;
实际运用-----SomeTools.guid()
随机打开一个你想要生成id的文件，先引入文件，然后调用**guid（）**方法。
import { ref } from 'vue'
import SomeTools from '@/utils/someTools.js'
//直接这样就可以使用啦
//SomeTools.guid()
//可以直接赋值使用，例如：
const id = ref(null)
id.value = SomeTools.guid()附：UUID安装、卸载问题
本来是要做一个测速的功能，点击开始测速，自动生成唯一的批次ID，然后自动请求100次，需要自动生成唯一的日志ID。使用时间格式到毫秒，也还是有重复的问题。所以想到使用UUID。现在我是注释调的
<script>
import * as echarts from 'echarts'
// import { v4 } from 'uuid'
</script>
因为使用uuid报错，我是前端新手，但是是9年安卓开发经验，决定从业务方面解决。正常情况从后台生成唯一日志ID，失败的情况，后台根据XXX也是可以算出的。解决
解决步骤
卸载问题，我注释调uuid的引入，还是报v4引入包找不到问题；
解决方法：
1、注释uuid的引入，重新执行使用npm install。执行很慢，然后试试执行cnpm install.cnpm install 执行成功。
2、注释uuid的引入，重新执行使用npm install。执行很慢，然后试试执行cnpm install.
3、再次运行npm run serve 还是报错uuid 的v4包找不到；
4、然后，询问同事，说是手动删除配置文件里面的引入试试。
5、这个文件一般是自动生成的，我恐怕删掉以后，项目启动不了。so，先备份，我删掉以后，重新cnpm install，还是不行。
6、我想起了以前网上看到的方法，删掉node_modules,备份好项目后，于是，我删掉node_modules。
7、重新cnpm install，此时看到安装的包数量，减少了一个，估计有成功的希望。
8、重新npm run serve，成功。
总结
到此这篇关于Vue3前端生成随机id(生成 UUID)的文章就介绍到这了,更多相关Vue3前端生成随机id内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Vue3中,组件通信仍然是一个非常重要的话题,因为在大多数应用程序中,不同的组件之间需要进行数据传递和交互,在Vue3中,组件通信有多种方式可供选择,本文给大家介绍了Vue3实现组件通信的14种方式,需要的朋友可以参考下2025-08-08
这篇文章主要给大家介绍了vue数据更新table内容不更新解决方法,文中有详细的代码示例供大家作为参考,感兴趣的同学可以参考阅读一下2023-08-08
基于Vue3+IntersectionObserver实现高性能图片懒加载
本文详解 Vue3 中如何使用 IntersectionObserver API 实现图片懒加载,核心优势在于进入视口才加载图片,可显著提升首屏加载速度、节省带宽资源、避免页面卡顿,适合多图列表场景,需要的朋友可以参考下2026-05-05
AES算法是一种对称加密算法,用于加密和解密数据,下面这篇文章主要给大家介绍了关于Vue项目中实现AES加密解密的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue-cli 如何打包上线的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue3封装简易的vue-echarts问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue 组件（component）教程之实现精美的日历方法示例
组件是我们学习vue必须会的一部分，下面这篇文章主要给大家介绍了关于Vue 组件（component）教程之实现精美的日历的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
Vue 解决通过this.$refs来获取DOM或者组件报错问题
这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
本篇文章主要介绍了在vue中通过axios异步使用echarts的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论