Vue3.0 + antdV 實現的後臺管理項目

背景

針對上一篇文章寫的小程序項目，須要一個相對應的後臺管理系統來對其中一部分資源進行管理，因此衍生了這個後臺管理系統項目。因爲時間緊迫，內容也不是特別多，因而決定使用市面上現成的 vue 後臺項目模板。用的比較多的是 vue-element-admin，一方面想試試新一點的技術 vue3.0，另外一方面是由於業務線其餘項目都用的 react + antd，我的也比較喜歡 antd ，因此想試試 antd 的 vue UI 框架，因此找到了這個模版：vue-admin-beautiful

項目搭建

1. clone 上面說的項目模板（注意分支，使用的是 vue3.0-antdv）
2. 按照本身項目的需求，把不須要的內容刪掉，按需增長本身須要的內容，如各個頁面，公共資源，靜態資源等
3. 肯定並安裝項目所須要的其餘依賴插件等

該項目主要涉及的技術

4.項目結構

踩坑

國際化

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

1. [ Vue3.0 ] 使用 Vue 3.0 / Vue-cli 4 開發 i18n 國際化 多國語言功能
2. Create a i18n Plugin with Composition API in Vue.js 3

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

如何使用？
首先要在 App.vue 文件中使用provideI18n函數正確的配置初始化插件。

// 導入所須要的資源
  import { provideI18n } from '@/i18nPlugin'
  import langEn from './i18n/en'
  import langZh from './i18n/zh'
  import langTh from './i18n/th'
  
  // 初始化
  setup() {
      let langObj = localStorage.getItem('language')
      let lang = langObj ? JSON.parse(langObj).language : ''
      const locale = lang || navigator.language
      let langUsed = ''
      if (locale.indexOf('zh') > -1) {
        langUsed = 'zh'
      } else if (locale.indexOf('en') > -1) {
        langUsed = 'en'
      } else if (locale.indexOf('th') > -1) {
        langUsed = 'th'
      }
      // 核心代碼，langUsed 視項目狀況而定
      provideI18n({
        locale: langUsed,
        messages: {
          en: langEn,
          zh: langZh,
          th: langTh,
        },
      })
  },

最後，在咱們要使用該插件的任何組件中，都必須使用該useI18n函數中的setup函數將其注入。
例如：

！！！須要注意的點
antd-vue 的 table 組件，要想表頭內容也實現多語言，須要把 columns 寫在 computed 屬性裏面，如圖：

富文本編輯器（Tinymce）

未完待續......