vue3 + ts：使用uuid

r囧r小猫 2024-04-01 15:53 68阅读 0赞

**一、使用vue3-uuid**

> **pnpm add vue3-uuid**

![17d27dce17bb4cacbd99cef600b297c0.png][]

切换源：

> pnpm config set registry https://registry.npmmirror.com //切换淘宝源

[pnpm：简介\_snowball@li的博客-CSDN博客\_pnpm][pnpm_snowball_li_-CSDN_pnpm]

切换后安装成功

main.ts

// main.ts
    import { createApp } from 'vue'
    import '@/styles/index.less'
    import '@/styles/reset.less'
    import App from './App.vue'
    import UUID from 'vue3-uuid'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import router from "./routers/index";
    import { api } from './api/index'
    import 'vue-global-api';
    
    const app = createApp(App)
    app.use(ElementPlus)
    app.use(router)
    app.use(UUID)
    app.config.globalProperties.$api = api
    app.mount('#app')

[Vue 3和安装UUID演示 - 问答 - 腾讯云开发者社区-腾讯云][Vue 3_UUID_ - _ - _-]

\*\*\*使用失败\*\*\*

**二、改用uuid**

> pnpm add uuid

业务文件使用：

import { v4 as uuidv4 } from "uuid";
    
    console.log('136', uuidv4())

使用成功

![46ff8901ba0444609766d4355f5860a1.png][]

**三、欢迎交流指正，关注我一起学习。**

参考链接：

[js 获取设备或浏览器唯一标识的方式\_草字的博客-CSDN博客\_js获取设备唯一标识][js _-CSDN_js]

[vue中使用uuid\_李疆~的博客-CSDN博客\_vue-uuid][vue_uuid_-CSDN_vue-uuid]

[vue3-uuid - npm][]

[uuid - npm][]

[17d27dce17bb4cacbd99cef600b297c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c2c950bf4bda469ab6d46ca85332ea37.png
[pnpm_snowball_li_-CSDN_pnpm]: https://blog.csdn.net/snowball_li/article/details/124787870
[Vue 3_UUID_ - _ - _-]: https://cloud.tencent.com/developer/ask/sof/1214138
[46ff8901ba0444609766d4355f5860a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7882b6cbb9784f94a993e4e349d9f2ae.png
[js _-CSDN_js]: https://blog.csdn.net/qq_42740797/article/details/120178975
[vue_uuid_-CSDN_vue-uuid]: https://blog.csdn.net/qq_40323256/article/details/116447496
[vue3-uuid - npm]: https://www.npmjs.com/package/vue3-uuid
[uuid - npm]: https://www.npmjs.com/package/uuid