vue3+elementplus+ts搭建权限管理系统--3

*****************此文仅用于个人记录学习vite创建vue3项目过程，请勿转载或转发******************

1、头部组件封装

通用头部组件包含系统logo，中英文切换元件，消息图标元件以及个人信息元件

给系统logo和消息图标添加链接，分别跳转到首页和个人中心消息页面

公共样式可以添加到App.vue或者设置一个公共样式文件，这里将公共样式写入App.vue文件

2、中英文切换

vue-i18n支持国际化多语言，属于开源项目Intlify

1、安装插件

在package.json中会有这个版本号

2、i18n的使用

在src下创建一个文件夹i18n，用于管理系统语言相关的内容

在i18n下创建一个language文件夹，用于管理系统的语言包，然后创建两个js文件zh-cn.js和en.js文件，对应的中英文代码如下

3、在i18n文件夹下创建一个入口文件:index.js

  3.1 legacy: false,如果使用组合式API，则必须设置legacy为false

  3.2 设置默认语言为中文zh-cn,对应messages里面的语言包的名称

   3.3 fallbackLocal设置首选语言缺少翻译时需要使用的语言，这个代码的配置是默认先从locale指定的语言zh-cn查找相应的翻译，如果zh-cn中不存在对应的翻译，就从fallbackLocale设置的语言en中查找

4、从项目的入口文件引入i18n实例

5、修改PageHeader.vue

在PageHeader.vue中添加中英文切换文字的单击事件

将之前写死的文字描述都改成插值表达式

同时写一个语言切换方法，用来进行语言切换

 运行后报错：

解决方案如下：

增加globalInjection为true，这样组合式，选项式可混合使用

运行后可以通过切换显示中英文

5、Elementplus 组件语言变化

修改src/i18n/index.js文件内容

然后在全局修改Elementplus的语言，直接修改App.vue

检验elementplus国际化失败，在App.vue中el-config-provider中要加入locale="elementLocales[locale]"，修改方案如下：

最后切换中文和英文，分页组件也会变化，说明elementplus分页组件国际化成功

---