VUE是一個基于MVVM模式的現代化JavaScript框架。UUID是一個通用唯一識別符(Universally Unique Identifier)。Vue提供了一個專門用于UUID的庫——了解一下vue-uuid。

要使用vue-uuid，首先要安裝它。打開控制臺，并在項目目錄中運行以下命令：

npm install vue-uuid

注：請確保您已在項目目錄中運行了npm init。

安裝后，您可以在您的Vue文件中導入vue-uuid：

import { v4 as uuidv4 } from 'uuid';

該代碼將導入v4版本的UUID生成器函數。

調用uuidv4()函數會返回一個版本4的UUID。比如：

const uuid = uuidv4();
console.log(uuid);

輸出結果類似于下面這個：

c1b51acc-e60c-40ed-8a20-e1e2e454bead

生成UUID時，有時我們還需要將它轉化為諸如大寫字母、無破折號等統一格式的形式。您可以使用JavaScript的字符串方法來完成這個轉換。例如：

const uuid = uuidv4().toUpperCase().replace(/-/g, '');
console.log(uuid);

此代碼將生成所有大寫字母且不包含破折號的UUID。結果如下：

F07A43BD9CD04CE58AF9816A652EB722

如果您想隨時生成新的UUID，那么您可以將它們存儲在一個數組中，并在需要時調用它們。以下代碼演示了這個方法。

export default {
data() {
return {
uuids: [],
};
},
methods: {
createId() {
const newId = uuidv4().toUpperCase().replace(/-/g, '');
this.uuids.unshift(newId);
},
},
};

要創建新的UUID，請在Vue組件的createId()方法中調用這個方法。如下示例：

Generate new ID
{{id}}

每次點擊“生成新ID”按鈕時，createId()方法都會創建并存儲一個新的UUID，并將其添加到uuids數組的開頭，然后列表中的每個新UUID都會呈現在

中。

總之，vue-uuid是Vue中生成UUID的一個實用插件。在您的項目中使用它可以輕松處理所有UUID的生成和處理。