请问如何详细学习Vue框架？

本文共计1346个文字，预计阅读时间需要6分钟。

目录+前言+如何实现多语言切换？+1. 安装包vue-i18n+2. 在src目录下新建如下文件：+3. 在main.js中+4. 在vue文件中使用+5. 如何动态切换语言并更改Element UI语言？

1. 利用vuex，在mutations中写一个切换语言的mutation+

目录

• 前言
• 如何实现多语言切换 ？
• 1、安装包vue-i18n
• 2、在src目录下新建如图：
• 3、 在main.js中
• 4、在vue文件中使用
• 如何动态切换语言并更改elementUI语言 ？
• 1、利用vuex，在mutations中写一个方法更改element语言
• 2、使用
• 更改完elementUI组件视图不更新？
• 1、 在router-view上控制视图显示/隐藏
• 2、 在切换语言时调用reload
• 3、需在main.js中调用一下commit，不然第一次进入elementUI 不会更改语言
• 如何全局使用 $t 函数 ？ 如何在js文件里使用vue-i18n ？
• 在router.js中不能直接使用$t, 需自行引入该函数
• 总结

前言

最近接手一个项目，该项目多国家使用，需要支持多语言的切换，在此记录。

解决一下问题：

• 如何实现多语言切换 ？
• 如何动态切换语言并更改elementUI语言 ？
• 更改完elementUI组件视图不更新？
• 如何全局使用 $t 函数 ？
• 如何在js文件里使用vue-i18n ？

如何实现多语言切换 ？

1、安装包vue-i18n

npm i vue-i18n --save

2、在src目录下新建如图：

en.js

const EN = { login: { title: 'User Login' }, } export default EN

pl-pl.js

const PL_PL = { login: { title: 'Użytkownik jest zalogowany' }, } export default PL_PL

zh-cn.js

const ZH_CN = { login: { title: '用户登录' }, } export default ZH_CN

index.js

import { createI18n } from 'vue-i18n/index' import 'dayjs/locale/zh-cn' import zh from './zh-cn' import en from './en' import pl from './pl-pl' const messages = { 'zh-cn': zh, 'en': en, 'pl': pl } // Gets the current locale export function getLanguage() { // Use the language of choice const chooselang = localStorage.getItem('locale') if (chooselang) return chooselang // if not shoose language const lang = (navigator.language || navigator.browserLanguage).toLowerCase() const locales = Object.keys(messages) return locales.includes(lang) ? lang : 'zh-cn' } const i18n = createI18n({ locale: getLanguage(), fallbackLocale: 'en', global: true, messages }) export function $t(args) { return i18n.global.tc(args) } console.log($t('login.title')) export default (app) => { app.use(i18n) }

说明

getLanguage 函数 判断当前localStorage是否已有选择过语言如果没有则获取当前浏览器的语言；
封装 $t 函数并导出用在js文件中

3、 在main.js中

import language, { getLanguage, $t } from './language' language(app)

4、在vue文件中使用

<template> //1. <div class="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div> //2. <el-input v-model="$t('login.title')"></el-input> </template>

如何动态切换语言并更改elementUI语言 ？

1、利用vuex，在mutations中写一个方法更改element语言

// ----------------------- state ----------------------------- import { getLanguage } from '@/language' const state = { lang: getLanguage() } export default state // ----------------------- mutations----------------------------- import * as Types from './types' import locale from 'element-plus/lib/locale' import localeZH from 'element-plus/lib/locale/lang/zh-cn' import localeEN from 'element-plus/lib/locale/lang/en' import localePL from 'element-plus/lib/locale/lang/pl' const element = { 'zh-cn': localeZH, 'en': localeEN, 'pl': localePL } const mutations = { // 切换语言 [Types.SET_LANG](state, lang) { state.lang = lang localStorage.setItem('locale', lang) locale.use(element[lang]) } } export default mutations // ----------------------- types----------------------------- export const SET_LANG = 'SET_LANG'

2、使用

import * as Types from '@/store/types' import { useI18n } from "vue-i18n"; export default { setup(props,ctx) { const { locale: lang } = useI18n({ useScope: "global" }) let store = useStore() const handelLanguage = (name) => { lang.value = name store.commit(Types.SET_LANG, name) } return { handelLanguage } } }

更改完elementUI组件视图不更新？

这时你会发现就算我们提交commit去更改elementUI的语言 页面上也没有发生变化，因为视图组件并没有更新，如何刷新组件使之重新加载呢？

1、 在router-view上控制视图显示/隐藏

// ----------------------- template----------------------------- <router-view v-if="isReloadRouter"/> // ----------------------- script----------------------------- const reload = () => { state.isReloadRouter = false nextTick(() => { state.isReloadRouter = true }) } provide("reload", reload) <-- 自行引入 provide nextTick ->

2、 在切换语言时调用reload

const handelLanguage = (name) => { lang.value = name store.commit(Types.SET_LANG, name) inject('reload')() }

3、需在main.js中调用一下commit，不然第一次进入elementUI 不会更改语言

import language, { getLanguage, $t } from './language' import '@/styles/elementDefault.scss' store.commit(Types.SET_LANG, getLanguage())

如何全局使用 $t 函数 ？ 如何在js文件里使用vue-i18n ？

全局挂在 $t 函数 ，在js文件里直接使用 $t 函数。

方法一：通过app.config.globalProperties挂在到全局

方法二： 通过provide、inject来实现

import language, { getLanguage, $t } from './language' const app = createApp(App); // ----------------------- app.config.globalProperties ----------------------------- app.config.globalProperties.$t = $t // 使用 import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() proxy.$t() // ----------------------- provide、inject ----------------------------- // main.js中 app.provide('$t', $t) // 使用 const $t = inject('$t') ElMessage.warning({ message: $t('login.warnMessage'), type: 'warning' });

vue3不推荐在原型链上挂载一些东西，而更推荐使用provide、inject，所以最好使用通过依赖和注入provide和inject的方式

在router.js中不能直接使用$t, 需自行引入该函数

import { $t } from '@/language' { path: '/mainManage/device', name: 'device', hidden: false, meta: { icon: 'circle', title: $t('router.device') }, component: () => import(/* webpackChunkName: "device" */ '@/views/mainManage/device') },

目前有一问题：因为我菜单展示的字段取的是路由信息里的title，router.js只在项目第一次进入的时候调用，当切换语言的时候菜单字段不会动态切换，只有刷新浏览器才会改变，如有解决方法希望留言告知！！！

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!