Vue3.0 + antdV 实现的后台管理项目

Evelyn
背景

针对上一篇文章写的小程序项目,需要一个相对应的后台管理系统来对其中一部分资源进行管理,所以衍生了这个后台管理系统项目。由于时间紧迫,内容也不是特别多,于是决定使用市面上现成的 vue 后台项目模板。用的比较多的是 vue-element-admin,一方面想试试新一点的技术 vue3.0,另一方面是因为业务线其他项目都用的 react + antd,个人也比较喜欢 antd ,所以想试试 antd 的 vue UI 框架,所以找到了这个模版:vue-admin-beautiful

项目搭建
  1. clone 上面说的项目模板(注意分支,使用的是 vue3.0-antdv)
  2. 按照自己项目的需求,把不需要的内容删掉,按需增加自己需要的内容,如各个页面,公共资源,静态资源等
  3. 确定并安装项目所需要的其他依赖插件等
该项目主要涉及的技术
image.png

4.项目结构
image.png

踩坑
国际化

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 存放的是一些全局可共用的资源,最终多语言相关目录结构如下红框所示:
image.png

如何使用?
首先要在 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函数将其注入。
例如:
image.png

!!!需要注意的点
antd-vue 的 table 组件,要想表头内容也实现多语言,需要把 columns 写在 computed 属性里面,如图:
image.png

富文本编辑器(Tinymce)

未完待续......

阅读 1.2k

媛媛码农成长记
小萝卜的码农成长记

一只野生媛媛

225 声望
5 粉丝
0 条评论

一只野生媛媛

225 声望
5 粉丝
宣传栏