后台针对上一篇写的小程序项目，需要有相应的后台管理系统来管理部分资源，于是衍生出这个后台管理系统项目。由于时间紧迫，内容也不多，所以决定使用市面上现成的vue后台项目模板。最常用的是vue-element-admin。一方面想尝试一下更新的技术vue3.0。另一方面，由于业务线的其他项目使用了react+antd。我个人比较喜欢antd，所以想试试antd的vueUI框架，所以找到了这个模板：vue-admin-beautifulprojectbuildsclone上面提到的项目模板（注意分支，使用的是vue3.0-antdv）根据根据你的项目需要，把不需要的内容删除，根据需要添加你需要的内容，比如各种页面，公共资源，静态资源等。确定并安装项目需要的其他依赖插件等。技术主要参与项目4.项目结构国际化Vue3.0不能直接像2.0那样直接使用i18n，3.0的i18n不是写在main.js中，而是使用Provide和Inject的方式。在网上找了一堆文章，大部分还是2.0的用法，最后找到两篇有帮助的文章：【Vue3.0】使用Vue3.0/Vue-cli4开发i18n国际化和多语言功能创建一个i18nPluginwithCompositionAPIinVue.js3参考文章，创建国际化插件文件i18nPlugins.js，创建i18n文件夹存放项目需要的各种语言的js文件，我习惯放多语言文案和每个页面的pages文件放在一起，所以src下的i18n文件夹中的lang存储了一些可以全局共享的资源。最终的多语言相关目录结构如下图红框所示：Howtouse?首先，使用App.vue文件中的provideI18n函数正确配置初始化插件。//导入所需资源import{provideI18n}from'@/i18nPlugin'importlangEnfrom'./i18n/en'importlangZhfrom'./i18n/zh'importlangThfrom'./i18n/th'//初始化设置(){让langObj=localStorage.getItem('语言')让lang=langObj?JSON.parse(langObj).language：''constlocale=lang||navigator.languageletlangUsed=''if(locale.indexOf('zh')>-1){langUsed='zh'}elseif(locale.indexOf('en')>-1){langUsed='en'}elseif(locale.indexOf('th')>-1){langUsed='th'}//核心代码，langUsed视项目情况而定provideI18n({locale:langUsed,messages:{en:langEn,zh:langZh,th:langTh,},})},最后，在我们要使用插件的任何组件中，必须使用useI18n函数中的设置函数注入它。例如：！！！注意事项对于antd-vue的table组件，如果要在header中实现多语言内容，需要在computed属性中写columns，如图：富文本编辑器（Tinymce）待续...
