Vue3修改Element-plus语言与项目国际化

修改Element-plus默认语言

Element-plus默认语言是英语,可修改为其它语言;

此处 Element-plus 为自动按需导入方式配置;

更多导入方式:Vue3使用Element-plus-CSDN博客

全局配置默认语言参考:国际化 | Element Plus

统一固定设置

在 App.vue 引入 Element-plus 语言包,并使用 el-config-provider 标签

<script setup>
import { RouterView } from 'vue-router'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<template>
  <el-config-provider :locale="zhCn">
    <RouterView />
  </el-config-provider>
</template>

动态切换(示例)

仅作学习

<script setup>
import { ref, computed } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const language = ref(zhCn)
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
</script>

<template>
  <div>
    <el-button @click="toggle">Switch Language</el-button>
    <br />
    <el-config-provider :locale="locale">
      <el-table :data="[]" />
      <el-pagination :total="100" />
    </el-config-provider>
  </div>
</template>

项目国际化

使用 vue-i18n 模块

安装依赖

npm i vue-i18n

创建文件

在 src 目录下创建 locales 目录,里面创建文件:en.js、zh-cn.js、index.js

// en.js

export default {
  login: {
    title: 'Login Form',
    logIn: 'Login',
    username: 'Username',
    password: 'Password'
  }
}
// zh-cn.js

export default {
  login: {
    title: '系统登录',
    logIn: '登录',
    username: '账号',
    password: '密码'
  }
}
// index.js

import { createI18n } from 'vue-i18n'
import elEnLocale from 'element-plus/es/locale/lang/en'
import elZhLocale from 'element-plus/es/locale/lang/zh-cn'
import enLocale from './en'
import zhLocale from './zh-cn'

const messages = {
  en: {
    ...enLocale,
    ...elEnLocale
  },
  'zh-cn': {
    ...zhLocale,
    ...elZhLocale
  }
}

export const getLocale = () => {
  // 获取缓存
  const storLanguage = localStorage.getItem('language')
  // 存在返回当前语言
  if (storLanguage) return storLanguage
  // 不存在 获取系统语言
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  // 默认返回简体中文
  return 'zh-cn'
}
const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: getLocale(),
  messages: messages
})
export default i18n

编辑 main.js

挂载 locales/index.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from '@/locales/index'

const app = createApp(App)

app.use(router)
app.use(i18n)

app.mount('#app')

编辑 App.vue

在 App.vue 使用 el-config-provider 标签配置

<script setup>
import { RouterView } from 'vue-router'
import { ElConfigProvider } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { locale, messages } = useI18n()
</script>

<template>
  <el-config-provider :locale="messages[locale]">
    <RouterView />
  </el-config-provider>
</template>

创建组件

在 components 创建一个 language.vue 组件

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const languages = [
  { name: 'English', value: 'en' },
  { name: '中文', value: 'zh-cn' }
]
const handleSetLanguage = (lang) => {
  locale.value = lang
  localStorage.setItem('language', lang)
}
</script>

<template>
  <el-button type="" v-for="item in languages" :key="item.value" @click="handleSetLanguage(item.value)">{{ item.name }}</el-button>
</template>

使用组件

在页面 home.vue 使用 language.vue 组件并使用前面配置好的语言;

<script setup>
import Language from '@/components/language/language.vue'
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const form = reactive({
  name: ''
})
</script>

<template>
  <Language />

  <div style="margin: 50px">
    {{ t('login.title') }}
  </div>
  <el-form :model="form" label-width="120px">
    <el-form-item :label="t('login.username')">
      <el-input v-model="form.name" :placeholder="t('login.username')" />
    </el-form-item>
  </el-form>

  <div>
    <el-table :data="[]" />
    <el-pagination :total="100" />
  </div>
</template>

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: vue3-element-plus-admin是一个基于Vue3和Element Plus的后台管理系统模板。它提供了丰富的界面组件和功能,可以快速搭建起一个功能完善的后台管理系统。 首先,vue3-element-plus-admin使用了Vue3作为核心框架,Vue3相比于Vue2在性能和开发体验上有很大的提升。Vue3采用了更先进的响应式机制,使得数据更新更高效;新的组合式API让开发者可以更灵活地组织代码和复用逻辑。 其次,vue3-element-plus-admin还使用了Element Plus作为UI组件库。Element Plus是一套基于Element UI的升级版本,提供了更丰富的UI组件和更好的自定义性。通过Element Plus的组件,我们可以轻松实现表格、表单、弹窗、导航等常见的后台管理功能。 此外,vue3-element-plus-admin还提供了一些常用的功能模块,比如权限管理、用户管理、角色管理等。通过这些功能模块,我们可以方便地进行用户身份验证和权限控制。同时,vue3-element-plus-admin还提供了数据可视化的功能,可以将后台数据以图表的形式展示,帮助我们更好地理解和分析数据。 总的来说,vue3-element-plus-admin是一个功能强大、易于使用和可定制化的后台管理系统模板。它使用了Vue3和Element Plus的最新技术,并提供了丰富的界面组件和功能模块,帮助开发者快速搭建起一个现代化的后台管理系统。无论是个人项目还是企业应用,vue3-element-plus-admin都是一个值得选择的工具。 ### 回答2: Vue3-Element Plus-Admin是一个基于Vue3和Element Plus的后台管理系统模板。它提供了一套完整的UI组件库,以及丰富的功能和布局样式,方便开发者快速搭建和定制自己的后台管理系统。 Vue3是Vue.js的最新版本,它在性能和开发体验上做了很多改进。相比于之前的版本,Vue3使用了更加高效的响应式系统,并且在编译和渲染方面也做了优化,提升了应用的性能。同时,Vue3还引入了新的特性和语法糖,让开发更加简洁方便。 Element Plus是一套基于Element UI的UI组件库,它提供了丰富的UI组件,包括按钮、表单、表格、弹窗等,使用起来非常直观和方便。Element Plus的组件也支持按需加载,可以根据项目需求来引入需要的组件,减小项目的体积。 Vue3-Element Plus-Admin结合了Vue3和Element Plus的优势,为开发者提供了一套完整的后台管理系统模板。开发者可以通过这个模板快速搭建后台管理系统,并根据自己的需求来进行自定义。模板提供了常见的功能和布局样式,包括登录、主页、菜单导航、表单、表格等,开发者只需根据具体业务需求进行修改和扩展即可。 总结来说,Vue3-Element Plus-Admin是一个基于Vue3和Element Plus的后台管理系统模板,它提供了一套完整的UI组件库和丰富的功能和布局样式,方便开发者快速搭建和定制自己的后台管理系统。 ### 回答3: vue3-element-plus-admin 是一个基于 Vue3 和 Element Plus 的后台管理系统框架。它使用了最新的 Vue3 版本,具有更高的性能和更好的开发体验。Element Plus 是一套基于 Vue3 的 UI 组件库,提供了丰富的组件来构建前端界面。 vue3-element-plus-admin 提供了一套完整的后台管理系统解决方案。它包括了常见的登录、权限管理、用户管理、角色管理、菜单管理等功能。使用它可以快速搭建一个功能完善的后台管理系统。 该框架采用模块化的开发方式,将各个功能模块拆分成独立的组件,有利于代码的复用和维护。同时它还使用了响应式设计,可以根据屏幕大小自动适应不同的设备,提供更好的用户体验。 在界面设计上,vue3-element-plus-admin 内置了 Element Plus 的样式,提供了整洁美观的界面效果。同时,它还支持自定义主题,可以根据需求进行样式的定制,满足不同项目的需求。 该框架还提供了丰富的插件和工具,如富文本编辑器、数据可视化图表、国际化支持等,方便开发者快速添加各种功能和扩展。 总之,vue3-element-plus-admin 是一个强大的 Vue3 后台管理系统框架,具有丰富的功能和灵活的扩展性,适用于各种中小型项目的快速开发。它提供了优秀的开发体验和用户体验,帮助开发者轻松搭建出优秀的后台管理系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值