乐趣区

关于vue.js:Vue30-antdV-实现的后台管理项目

jiezi
背景

针对上一篇文章写的小程序我的项目，须要一个绝对应的后盾管理系统来对其中一部分资源进行治理，所以衍生了这个后盾管理系统我的项目。因为工夫紧迫，内容也不是特地多，于是决定应用市面上现成的 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）

未完待续 ……

退出移动版