Skip to content

W
wails-template-vue

米司特包 / wails-template-vue

通知 1
Star 0
Fork 0
W
wails-template-vue

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b0233f3f 编写于 作者: 米司特包's avatar 米司特包
浏览文件
操作

feat: optimizing typescript templates and internationalization 

- Optimized Javascript templates
- Optimized Typescript templates
- Migrated vue-i18n of templates to composition-api
上级 fe54ccf7
展开全部 隐藏空白更改
内联 并排
Showing with 3063 addition and 89 deletion
frontend/packages/javascript/package-lock.json 0 → 100644
浏览文件 @ b0233f3f
此差异已折叠。
frontend/packages/javascript/src/App.vue
浏览文件 @ b0233f3f
......@@ -5,8 +5,8 @@
<!-- navigation -->
<!-- 导航 -->
<div class="nav" data-wails-no-drag>
<router-link to="/">{{ $t("nav.home") }}</router-link>
<router-link to="/about">{{ $t("nav.about") }}</router-link>
<router-link to="/">{{ t("nav.home") }}</router-link>
<router-link to="/about">{{ t("nav.about") }}</router-link>
</div>
<!-- Menu -->
<!-- 菜单 -->
......@@ -19,14 +19,14 @@
@click="onclickLanguageHandle(item)"
class="lang-item"
>
{{ $t("languages." + item) }}
{{ t("languages." + item) }}
</div>
</div>
<div class="bar">
<div class="bar-btn" @click="onclickMinimise">
{{ $t("topbar.minimise") }}
{{ t("topbar.minimise") }}
</div>
<div class="bar-btn" @click="onclickQuit">{{ $t("topbar.quit") }}</div>
<div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
</div>
</div>
</div>
......@@ -38,29 +38,21 @@
</template>
<script>
import { ref, watch } from "vue";
import i18n from "@/i18n";
import { useI18n } from "vue-i18n";
export default {
setup() {
const { t, availableLocales, locale } = useI18n();
// List of supported languages
// 支持的语言列表
const languages = i18n.global.availableLocales;
// Current language
// 当前语言
const locale = ref("zh-Hans");
locale.value = i18n.global.locale;
const languages = availableLocales;
// Click to switch language
// 点击切换语言
const onclickLanguageHandle = (item) => {
item !== locale.value ? (locale.value = item) : false;
};
// Monitor current language changes
// 监听当前语言变动
watch(locale, (newValue, oldValue) => {
i18n.global.locale = newValue;
});
const onclickMinimise = () => {
window.runtime.WindowMinimise();
......@@ -70,6 +62,7 @@ export default {
};
return {
t,
languages,
locale,
onclickLanguageHandle,
......@@ -102,7 +95,7 @@ body {
// width: 900px;
// height: 520px;
height: 100%;
background-color: rgba(219,188,239,.9);
background-color: rgba(219, 188, 239, 0.9);
overflow: hidden;
}
.header {
......@@ -113,7 +106,7 @@ body {
justify-content: space-between;
height: 50px;
padding: 0 10px;
background-color: rgba(171,126,220,.9);
background-color: rgba(171, 126, 220, 0.9);
.nav {
a {
display: inline-block;
......
frontend/packages/javascript/src/components/public/OpenLink.vue
浏览文件 @ b0233f3f
......@@ -5,7 +5,6 @@
</template>
<script>
import i18n from "@/i18n";
export default {
name: "OpenLink",
props: {
......
frontend/packages/javascript/src/i18n/index.js
浏览文件 @ b0233f3f
import { createI18n } from "vue-i18n";
import zhHans from "./messages/zh-Hans.json";
import en from "./messages/en.json";
import fr from "./messages/fr.json";
import zhHans from "./locales/zh-Hans.json";
import en from "./locales/en.json";
import fr from "./locales/fr.json";
const i18n = createI18n({
locale: "en",
......
frontend/packages/javascript/src/main.js
浏览文件 @ b0233f3f
......@@ -7,4 +7,8 @@ import i18n from "@/i18n";
// 注册全局通用组件
import publicComponents from "@/components/public";
createApp(App).use(router).use(i18n).use(publicComponents).mount("#app");
const app = createApp(App);
app.use(publicComponents);
app.use(router).use(i18n).mount("#app");
frontend/packages/javascript/src/views/About.vue
浏览文件 @ b0233f3f
<template>
<div class="about">
<!-- Title -->
<div class="title">{{ $t("aboutpage.title") }}</div>
<div class="title">{{ t("aboutpage.title") }}</div>
<!-- Information -->
<!-- 信息 -->
<div class="content">
<div class="comeon">
<img :src="comeonGif" alt />
<img :src="comeonGif" alt="Gif" />
</div>
<ul class="info">
<li class="info-item">
<div class="name">{{ $t("aboutpage.project-repository") }}</div>
<div class="name">{{ t("aboutpage.project-repository") }}</div>
<OpenLink
class="link"
href="https://github.com/misitebao/wails-template-vue"
......@@ -18,15 +18,15 @@
>
</li>
<li class="info-item">
<div class="name">{{ $t("aboutpage.wails-repository") }}</div>
<div class="name">{{ t("aboutpage.wails-repository") }}</div>
<OpenLink class="link" href="https://github.com/wailsapp/wails"
>https://github.com/wailsapp/wails</OpenLink
>
</li>
<li class="info-item">
<div class="name">{{ $t("aboutpage.author") }}</div>
<div class="name">{{ t("aboutpage.author") }}</div>
<OpenLink class="link" href="https://github.com/misitebao">{{
$t("aboutpage.misitebao")
t("aboutpage.misitebao")
}}</OpenLink>
</li>
</ul>
......@@ -34,14 +34,18 @@
<!-- Thanks -->
<!-- 谢语 -->
<div class="thank">{{ $t("aboutpage.thanks") }}</div>
<div class="thank">{{ t("aboutpage.thanks") }}</div>
</div>
</template>
<script>
import { useI18n } from "vue-i18n";
import comeonGif from "@/assets/images/comeon.gif";
export default {
setup() {
const { t } = useI18n();
return {
t,
comeonGif,
};
},
......
frontend/packages/javascript/src/views/Home.vue
浏览文件 @ b0233f3f
......@@ -2,26 +2,26 @@
<div class="home">
<!-- Logo -->
<img class="logo" alt="Vue logo" src="../assets/logo.png" />
<HelloWorld :msg="$t('homepage.welcome')" />
<HelloWorld :msg="t('homepage.welcome')" />
<!-- Bottom button -->
<!-- 底部按钮 -->
<div class="link">
<OpenLink
href="https://wails.io/docs/gettingstarted/installation"
class="btn start"
>{{ $t("homepage.getting-started") }}</OpenLink
>{{ t("homepage.getting-started") }}</OpenLink
>
<OpenLink
href="https://github.com/misitebao/wails-template-vue"
class="btn star"
>{{ $t("homepage.star-me") }}</OpenLink
>{{ t("homepage.star-me") }}</OpenLink
>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import { useI18n } from "vue-i18n";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
......@@ -30,7 +30,10 @@ export default {
HelloWorld,
},
setup() {
return {};
const { t } = useI18n();
return {
t,
};
},
};
</script>
......
frontend/packages/typescript/src/App.vue
浏览文件 @ b0233f3f
......@@ -5,13 +5,13 @@
<!-- navigation -->
<!-- 导航 -->
<div class="nav" data-wails-no-drag>
<router-link to="/">{{ "Home" }}</router-link>
<router-link to="/about">{{ "About" }}</router-link>
<router-link to="/">{{ t("nav.home") }}</router-link>
<router-link to="/about">{{ t("nav.about") }}</router-link>
</div>
<!-- Menu -->
<!-- 菜单 -->
<div class="menu" data-wails-no-drag>
<!-- <div class="language">
<div class="language">
<div
v-for="item in languages"
:key="item"
......@@ -19,14 +19,14 @@
@click="onclickLanguageHandle(item)"
class="lang-item"
>
{{ $t("languages." + item) }}
{{ t("languages." + item) }}
</div>
</div> -->
</div>
<div class="bar">
<div class="bar-btn" @click="onclickMinimise">
{{ "Minimise" }}
{{ t("topbar.minimise") }}
</div>
<div class="bar-btn" @click="onclickQuit">{{ "Quit" }}</div>
<div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
</div>
</div>
</div>
......@@ -38,29 +38,21 @@
</template>
<script lang="ts">
import { ref, watch } from "vue";
// import i18n from "@/i18n";
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
export default {
export default defineComponent({
setup() {
const { t, availableLocales, locale } = useI18n({ useScope: "global" });
// List of supported languages
// 支持的语言列表
// const languages = i18n.global.availableLocales;
// Current language
// 当前语言
// const locale = ref("zh-Hans");
// locale.value = i18n.global.locale;
const languages = availableLocales;
// Click to switch language
// 点击切换语言
// const onclickLanguageHandle = (item) => {
// item !== locale.value ? (locale.value = item) : false;
// };
// Monitor current language changes
// 监听当前语言变动
// watch(locale, (newValue, oldValue) => {
// i18n.global.locale = newValue;
// });
const onclickLanguageHandle = (item: string) => {
item !== locale.value ? (locale.value = item) : false;
};
const onclickMinimise = () => {
window.runtime.WindowMinimise();
......@@ -70,14 +62,15 @@ export default {
};
return {
// languages,
// locale,
// onclickLanguageHandle,
t,
languages,
locale,
onclickLanguageHandle,
onclickMinimise,
onclickQuit,
};
},
};
});
</script>
<style lang="scss">
......@@ -102,7 +95,7 @@ body {
// width: 900px;
// height: 520px;
height: 100%;
background-color: rgba(219,188,239,.9);
background-color: rgba(219, 188, 239, 0.9);
overflow: hidden;
}
.header {
......@@ -113,7 +106,7 @@ body {
justify-content: space-between;
height: 50px;
padding: 0 10px;
background-color: rgba(171,126,220,.9);
background-color: rgba(171, 126, 220, 0.9);
.nav {
a {
display: inline-block;
......
frontend/packages/typescript/src/components/HelloWorld.vue
浏览文件 @ b0233f3f
......@@ -3,12 +3,14 @@
</template>
<script lang="ts">
export default {
import { defineComponent } from "vue";
export default defineComponent({
name: "HelloWorld",
props: {
msg: String,
},
};
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
......
frontend/packages/typescript/src/components/public/OpenLink.vue
浏览文件 @ b0233f3f
......@@ -5,8 +5,8 @@
</template>
<script lang="ts">
// import i18n from "@/i18n";
export default {
import { defineComponent } from "vue";
export default defineComponent({
name: "OpenLink",
props: {
href: String,
......@@ -23,7 +23,7 @@ export default {
onClickhandle,
};
},
};
});
</script>
<style lang="scss">
......
frontend/packages/typescript/src/components/public/index.ts
浏览文件 @ b0233f3f
import { App } from "vue";
import OpenLink from "@/components/public/OpenLink.vue";
// Encapsulate global components as plug-ins
// 将全局组件封装为插件
export default {
install(app) {
install(app: App) {
app.component(OpenLink.name, OpenLink);
},
};
frontend/packages/typescript/src/i18n/index.ts 0 → 100644
浏览文件 @ b0233f3f
import { createI18n } from "vue-i18n";
import zhHans from "./locales/zh-Hans.json";
import en from "./locales/en.json";
import fr from "./locales/fr.json";
const i18n = createI18n({
locale: "en",
fallbackLocale: "en",
messages: {
"zh-Hans": zhHans,
en: en,
fr: fr,
},
});
export default i18n;
frontend/packages/typescript/src/i18n/locales/en.json 0 → 100644
浏览文件 @ b0233f3f
{
"nav": {
"home": "Home",
"about": "About"
},
"languages": {
"en": "English",
"zh-Hans": "简体中文",
"fr": "Français"
},
"topbar": {
"minimise": "Minimise",
"quit": "Quit"
},
"homepage": {
"welcome": "Welcome to use Wails program developed based on Vue",
"getting-started": "Getting Started",
"star-me": "Star Me"
},
"aboutpage": {
"title": "Wails Template Vue",
"project-repository": "Project Repository",
"author": "Author",
"misitebao": "Misitebao",
"wails-repository": "Wails Repository",
"thanks": "Thank you all for your support🙏!"
},
"global": {
"not-supported": "Because it is a beta version, it can't be done for the time being, it will be completed later.",
"click-link": "The currently clicked link is: "
}
}
frontend/packages/typescript/src/i18n/locales/fr.json 0 → 100644
浏览文件 @ b0233f3f
{
"nav": {
"home": "Page d'accueil",
"about": "À propos"
},
"languages": {
"en": "English",
"zh-Hans": "简体中文",
"fr": "Français"
},
"topbar": {
"minimise": "Minimiser",
"quit": "Quitter"
},
"homepage": {
"welcome": "Bienvenue à utiliser le programme Wails développé sur la base de Vue",
"getting-started": "Commencer",
"star-me": "Étoile moi"
},
"aboutpage": {
"title": "Wails Template Vue",
"project-repository": "Référentiel de projets",
"author": "Auteur",
"misitebao": "Misitebao",
"wails-repository": "Wails Dépôt",
"thanks": "Merci à tous pour votre soutien🙏!"
},
"global": {
"not-supported": "Parce qu'il s'agit d'une version bêta, cela ne peut pas être fait pour le moment, il sera complété plus tard.",
"click-link": "Le lien actuellement cliqué est: "
}
}
frontend/packages/typescript/src/i18n/locales/zh-Hans.json 0 → 100644
浏览文件 @ b0233f3f
{
"nav": {
"home": "主页",
"about": "关于"
},
"languages": {
"en": "English",
"zh-Hans": "简体中文",
"fr": "Français"
},
"topbar": {
"minimise": "最小化",
"quit": "退出"
},
"homepage": {
"welcome": "欢迎使用基于Vue开发的Wails程序",
"getting-started": "新手入门",
"star-me": "给我点星"
},
"aboutpage": {
"title": "Wails Template Vue",
"project-repository": "项目仓库",
"author": "作者",
"misitebao": "米司特包",
"wails-repository": "Wails 仓库",
"thanks": "感谢各位大佬的支持🙏！"
},
"global": {
"not-supported": "由于是测试版，所以暂时做不了，后续会完成它。",
"click-link": "当前点击的链接是: "
}
}
frontend/packages/typescript/src/main.ts
浏览文件 @ b0233f3f
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
createApp(App).use(router).mount('#app')
// Register global common components
// 注册全局通用组件
import publicComponents from "./components/public/";
const app = createApp(App);
app.use(publicComponents);
app.use(router).use(i18n).mount("#app");
frontend/packages/typescript/src/views/About.vue
浏览文件 @ b0233f3f
<template>
<div class="about">
<!-- Title -->
<div class="title">{{ "Wails Template Vue" }}</div>
<div class="title">{{ t("aboutpage.title") }}</div>
<!-- Information -->
<!-- 信息 -->
<div class="content">
<div class="comeon">
<img :src="comeonGif" alt />
<img :src="comeonGif" alt="Gif" />
</div>
<ul class="info">
<li class="info-item">
<div class="name">{{ "Project Repository" }}</div>
<div class="name">{{ t("aboutpage.project-repository") }}</div>
<OpenLink
class="link"
href="https://github.com/misitebao/wails-template-vue"
......@@ -18,15 +18,15 @@
>
</li>
<li class="info-item">
<div class="name">{{ "Wails Repository" }}</div>
<div class="name">{{ t("aboutpage.wails-repository") }}</div>
<OpenLink class="link" href="https://github.com/wailsapp/wails"
>https://github.com/wailsapp/wails</OpenLink
>
</li>
<li class="info-item">
<div class="name">{{ "Author" }}</div>
<div class="name">{{ t("aboutpage.author") }}</div>
<OpenLink class="link" href="https://github.com/misitebao">{{
"Misitebao"
t("aboutpage.misitebao")
}}</OpenLink>
</li>
</ul>
......@@ -34,18 +34,23 @@
<!-- Thanks -->
<!-- 谢语 -->
<div class="thank">{{ "Thank you all for your support🙏!" }}</div>
<div class="thank">{{ t("aboutpage.thanks") }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import comeonGif from "@/assets/images/comeon.gif";
export default {
export default defineComponent({
setup() {
const { t } = useI18n({ useScope: "global" });
return {
t,
comeonGif,
};
},
};
});
</script>
<style lang="scss">
.about {
......
frontend/packages/typescript/src/views/Home.vue
浏览文件 @ b0233f3f
......@@ -2,7 +2,7 @@
<div class="home">
<!-- Logo -->
<img class="logo" alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to use Wails program developed based on Vue" />
<HelloWorld :msg="t('homepage.welcome')" />
<!-- Bottom button -->
<!-- 底部按钮 -->
<div class="link">
......@@ -21,18 +21,22 @@
</template>
<script lang="ts">
// @ is an alias to /src
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
export default defineComponent({
name: "Home",
components: {
HelloWorld,
},
setup() {
return {};
const { t } = useI18n({ useScope: "global" });
return {
t,
};
},
};
});
</script>
<style lang="scss">
.home {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或