Vue-Fetch-Async-Page可行性研究(续4)

最新推荐文章于 2025-04-29 19:41:40 发布

xrh805840887

最新推荐文章于 2025-04-29 19:41:40 发布

阅读量944

点赞数 21

分类专栏：技术研究文章标签： javascript vue.js ecmascript 前端框架前端

本文链接：https://blog.csdn.net/xrh805840887/article/details/147594607

版权

技术研究专栏收录该内容

7 篇文章

订阅专栏

接上一篇Vue-Fetch-Async-Page可行性研究(续3)-CSDN博客
上篇引入了Vuetify并验证了子组件使用三方库JS也是可行的，接下来要看看国际化和字体图标库的问题。国际化不用说引入vue-i18n，参考Vuetify官网建议，引入字体图标material icon css和Roboto字体。

VBtnPage

//VBtnPage.js
const i18n = {
en_US: {
hello: 'hello world!!{name}'
},
zh_CN: {
hello: '你好世界!!{name}'
}
};
export default {
template: `

<v-text-field
v-model="name"
:rules="rules"
hide-details="auto"
label="Input Name"
></v-text-field>
<v-btn class="text-subtitle-1" @click="showAlert">{{ mt('hello',{ name }) }}</v-btn>
<v-alert
v-model="alert"
close-label="Close Alert"
title="Just Alert"
border="start"
variant="tonal"
color="success"
closable
width="600"
height="80"
class="position-absolute top-0 right-0 bottom-0 left-0 ma-auto"
>
{{ mt('hello',{ name }) }}
</v-alert>
`,
name: 'VBtnPage',
setup() {
const { t: mt } = VueI18n.useI18n({ messages: i18n, });
const name = Vue.ref('');
const rules = [
value => !!value || 'Required.',
value => (value && value.length >= 3) || 'Min 3 characters',
]
const alert = Vue.ref(false);
const showAlert = () => {
alert.value = true;
};
return { mt, name, rules, alert, showAlert };
},
};

框架页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
<script src="https://cdn.staticfile.net/vue-router/4.2.4/vue-router.global.min.js"></script>
<script src="https://unpkg.com/vue-i18n@11.0.0/dist/vue-i18n.global.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.8.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.8.2/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" Cache-Control="max-age=36000" />
</head>
<body>
<div id="app">
<h1>{{$t('hello')}}</h1>
<v-btn icon="mdi-heart" variant="text"
@click="onToggleLocale(locale ==='en_US' ? 'zh_CN' : 'en_US')">
{{locale ==='en_US' ? 'English' : '简体中文'}}
</v-btn>
<p>
<router-link to="/VBtn">Go to VBtn</router-link>
<router-link to="/Echarts">Go to Echarts</router-link>
</p>
<router-view></router-view>
</div>
<script>
const fetchAsyncComponent = async (path) => {
let res = await import(path);
return res.default;
}
const routes = [
{ path: '/VBtn', component: await () => fetchAsyncComponent('/VBtnPage.js') },
{ path: '/Echarts', component: await () => fetchAsyncComponent('/EchartsPage.js') }
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
})
const app = Vue.createApp({
setup() {
const i18n = VueI18n.useI18n();
const locale = ref(i18n.locale.value);
const onToggleLocale = (value) => {
i18n.locale.value = value;
locale.value = value;
}
return { locale, onToggleLocale };
},
})
app.use(router)

mdi-heart便是使用了material icon的心形图标。框架页面的hello插值使用$t实现国际化,通过按钮来切换。
因为Vuetify不支持Vue-i18n的legacy模式，所以我们不能打开legacy模式开关来支持组件内的国际化配置。查看Vue-i18n的源代码发现useI18n方法支持传入messages并优先于全局配置，所以VBtnPage子组件内使用了自己的国际化配置并传入useI18n，如果匹配不到会匹配全局的配置。

这里还遗留了Vuetify组件国际化、全局国际化抽取到Json请求返回、路由表抽取到Json请求返回、主题切换功能、App.js的抽取。
篇幅限制，下篇继续。