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）

未完待续......