Vue DictCode是一個基于Vue的字典編碼工具，能夠自動生成字典編碼表格，并支持分層級選擇、搜索、修復等功能。

在使用Vue DictCode之前，需要先引用Vue和Vue DictCode的相關js文件：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue-dictcode@latest/dist/vue-dictcode.js"></script>

然后就可以在HTML中使用Vue DictCode組件了：

<div id="app">  
<dict-code :data="data"></dict-code>  
</div>

其中，data屬性是一個包含字典數據的數組，格式如下：

[{  
"id": "001",  
"name": "字典1",  
"children": [{  
"id": "001-01",  
"name": "字典1.1"  
}, {  
"id": "001-02",  
"name": "字典1.2",  
"children": [{  
"id": "001-02-01",  
"name": "字典1.2.1"  
}, {  
"id": "001-02-02",  
"name": "字典1.2.2"  
}]  
}]  
}, {  
"id": "002",  
"name": "字典2",  
"children": [{  
"id": "002-01",  
"name": "字典2.1"  
}, {  
"id": "002-02",  
"name": "字典2.2"  
}]  
}]

除了data屬性，還可以通過props傳遞其他配置參數，例如：

<dict-code  
:data="data"  
dictName="字典"  
searchPlaceholder="搜索字典"  
addText="新增"  
editText="編輯"  
deleteText="刪除">  
</dict-code>

通過這些配置，我們可以自定義每個按鈕的文字、搜索框的提示語等。