Vue 3 和安装 UUID 演示

Question

我是 Vue 3 的新手，发现经常为 Vue 2 编写的示例与 Vue 3 不兼容。在这个问题中，我在文档中找不到有关 UUID 兼容性的任何信息 github site。但假设与 Vue 3 一起安装的版本是正确的版本。

使用 npm 安装 Vue 3 后，我通过运行“vue create myProject”创建了一个新项目。 Hello World 页面正确显示。然后使用“npm i vue-uuid”再次安装 uuid 成功。

我按照 github 页面中所述为 uuid 添加了代码。得到关于“使用”的错误是未知的，因此修改了 main.js 代码，如下所示。现在我收到一条错误消息“未捕获的类型错误：无法设置未定义的属性 '$uuid'”。

我迷路了，想知道为什么要这么难？任何帮助将不胜感激。

main.js

import { createApp } from 'vue'
import App from './App.vue'

//import Vue from "vue";
import UUID from "vue-uuid"

//Vue.use(UUID);

createApp(App).use(UUID).mount('#app')

App.Vue

<template>
  <div class="uuid-panel">
    <h3 class="uuid">{{ uuid }}</h3>
    <button class="button" @click="uuid = $uuid.v1()">Generate V1</button>
    <button class="button" @click="uuid = $uuid.v3()">Generate V3</button>
    <button class="button" @click="uuid = $uuid.v4()">Generate V4</button>
    <button class="button" @click="uuid = $uuid.v5('Name 1', NAMESPACE)" >Generate V5</button>
  </div>
</template>

<script>
 import { uuid } from 'vue-uuid' 
 const NAMESPACE = "65f9af5d-f23f-4065-ac85-da725569fdcd"
export default {
  name: 'App',
  data () {
      return {
        NAMESPACE,
        uuid: uuid.v1(),
        v1: this.$uuid.v1(),
        v3: this.$uuid.v3(),
        v4: this.$uuid.v4(),
        v5: this.$uuid.v5("Name 2", NAMESPACE)
      };
    }
}
</script>

和package.json

 "name": "myProject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-uuid": "^2.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

Answer 1

您可以使用uuid

npm install uuid

然后在脚本部分：

import { v4 as uuidv4 } from "uuid";

就是这样！调用 uuidv4() 将为您提供所需的随机 UUID。

Vue 3 和安装 UUID 演示

Vue 3 and Installing UUID demo

uuid

vuejs3