Vue3.0 + antdV 實作的背景管理項目

針對上一篇文章寫的小程式項目，需要一個相對應的背景管理系統來對其中一部分資源進行管理，是以衍生了這個背景管理系統項目。由于時間緊迫，内容也不是特别多，于是決定使用市面上現成的 vue 背景項目模闆。用的比較多的是 vue-element-admin，一方面想試試新一點的技術 vue3.0，另一方面是因為業務線其他項目都用的 react + antd，個人也比較喜歡 antd ，是以想試試 antd 的 vue UI 架構，是以找到了這個模版：vue-admin-beautiful

clone 上面說的項目模闆（注意分支，使用的是 vue3.0-antdv）

按照自己項目的需求，把不需要的内容删掉，按需增加自己需要的内容，如各個頁面，公共資源，靜态資源等

确定并安裝項目所需要的其他依賴插件等

該項目主要涉及的技術

4.項目結構

國際化

Vue 3.0 不能直接像 2.0 那樣直接使用 i18n,3.0 的 i18n 不是寫在 main.js 裡，而是使用一種 Provide 與 Inject 的方式。在網上找了一堆文章，大部分都還是 2.0 的用法，最後發現兩篇幫助很大的文章：

[ Vue3.0 ] 使用 Vue 3.0 / Vue-cli 4 開發 i18n 國際化 多國語言功能

Create a i18n Plugin with Composition API in Vue.js 3

參考文章，建立國際化插件檔案 i18nPlugins.js，建立 i18n 檔案夾，用于存放項目所需要的各個語言的 js 檔案，個人習慣把各個頁面的多語言文案和頁面檔案放在一起，是以 src 下的 i18n 檔案夾中的 lang 存放的是一些全局可共用的資源，最終多語言相關目錄結構如下紅框所示：

如何使用？

首先要在 App.vue 檔案中使用provideI18n函數正确的配置初始化插件。

最後，在我們要使用該插件的任何元件中，都必須使用該useI18n函數中的setup函數将其注入。

例如：

！！！需要注意的點

antd-vue 的 table 元件，要想表頭内容也實作多語言，需要把 columns 寫在 computed 屬性裡面，如圖：

富文本編輯器（Tinymce）

未完待續......