chore: delete scripts

* chore: update LICENSE

* refactor: refactor templates entirely using TypeScript

reslove: https://github.com/misitebao/wails-template-vue/issues/35

* feat: update template

.github/CHANGELOG.md

@@ -0,0 +1,62 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [v2.0.0-beta.8] - 2022-05-06
+
+### Added
+
+- Add issue stale bots by [@misitebao](https://github.com/misitebao)
+
+### Changed
+
+- Switch to the form template by [@misitebao](https://github.com/misitebao)
+- Upgrade the front-end development method in dev mode by [@daoif](https://github.com/daoif)
+
+## [v2.0.0-beta.7] - 2022-03-23
+
+### Added
+
+- Optimize the basic template of the front-end project page by [@misitebao](https://github.com/misitebao)
+- `Typescript` templates add internationalization support by [@misitebao](https://github.com/misitebao)
+
+### Changed
+
+- Replaced `Javascript` template `vue-i18n` with `composition-api` by [@misitebao](https://github.com/misitebao)
+
+## [v2.0.0-beta.6] - 2022-03-16
+
+### Changed
+
+- Upgrade `vite` and `vue` to the latest version ([vite@2.8.6](https://github.com/vitejs/vite/releases/tag/v2.8.6), [vue@3.2.31](https://github.com/vuejs/core/releases/tag/v3.2.31)) by [@misitebao](https://github.com/misitebao)
+
+### Fixed
+
+- Fix mac window border display problem by [@misitebao](https://github.com/misitebao)
+
+## [v2.0.0-beta.5] - 2022-03-06
+
+### Added
+
+- Add `frontend:dev:watcher` by [@misitebao](https://github.com/misitebao), corresponding to wails cli version is [v2.0.0-beta.33](https://github.com/wailsapp/wails/releases/tag/v2.0.0-beta.33)
+
+## [v2.0.0-beta.4] - 2022-02-23
+
+### Added
+
+- Add typescript template option by [@misitebao](https://github.com/misitebao)
+
+### Changed
+
+- Modify window size by [@eighteenzheng](https://github.com/eighteenzheng)
+
+[unreleased]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.8...HEAD
+[v2.0.0-beta.8]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.7...v2.0.0-beta.8
+[v2.0.0-beta.7]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.6...v2.0.0-beta.7
+[v2.0.0-beta.6]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.5...v2.0.0-beta.6
+[v2.0.0-beta.5]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.4...v2.0.0-beta.5
+[v2.0.0-beta.4]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.3...v2.0.0-beta.4

.github/CONTRIBUTING.md

@@ -0,0 +1 @@
+# Contributing

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms | 这些是受支持的融资平台
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: misitebao # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,33 @@
+name: Bug Report
+description: Please describe in detail the problems you encountered in the process of using.
+labels: ["bug"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please answer these questions before you submit a bug.
+
+  - type: textarea
+    attributes:
+      label: 1. Your usage scenarios?
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 2. What did you do?
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 3. What are your problems?
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 4. What is your expected outcome?
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: GitHub Discussions
+    url: https://github.com/misitebao/yakia/discussions
+    about: If your question is not a feature or a bug, please go to the discussion panel and retrieve if your question already exists before submitting.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,21 @@
+name: Feature Request
+description: Please describe in detail the features you expect.
+labels: ["enhancement"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please answer these questions before you submit the desired feature.
+
+  - type: textarea
+    attributes:
+      label: 1. Your usage scenarios?
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: 2. What is your expected outcome?
+    validations:
+      required: true

.github/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 misitebao
+Copyright (c) 2021-Present Misite Bao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.github/README.md

@@ -0,0 +1,151 @@
+<h1 align="center">Wails Template Vue</h1>
+
+<p align="center">
+  <img src="./logo.png" height="280" />
+</p>
+
+<p align="center">
+  Wails template based on Vue ecology
+</p>
+
+<p align="center">
+  <a href="https://github.com/misitebao/wails-template-vue/blob/main/LICENSE">
+    <img alt="GitHub" src="https://img.shields.io/github/license/misitebao/wails-template-vue"/>
+  </a>
+  <a href="https://github.com/misitebao/standard-repository">
+    <img alt="GitHub" src="https://cdn.jsdelivr.net/gh/misitebao/standard-repository@main/assets/badge_flat.svg"/>
+  </a>
+  <a href="https://github.com/misitebao/wails-template-vue/releases">
+    <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/misitebao/wails-template-vue?include_prereleases&sort=semver">
+  </a>
+  <a href="https://github.com/wailsapp/awesome-wails">
+    <img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge.svg"/>
+  </a>
+  <br/>
+  <img src="https://img.shields.io/badge/platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?"/>
+</p>
+
+<div align="center">
+<strong>
+<samp>
+
+[English](README.md) · [简体中文](README.zh-Hans.md)
+
+</samp>
+</strong>
+</div>
+
+## Table of Contents
+
+<details>
+  <summary>Click me to Open/Close the directory listing</summary>
+
+- [Table of Contents](#table-of-contents)
+- [Introductions](#introductions)
+  - [Official Website](#official-website)
+  - [Background](#background)
+- [Graphic Demo](#graphic-demo)
+- [Features](#features)
+- [Architecture](#architecture)
+- [Getting Started](#getting-started)
+- [Maintainer](#maintainer)
+- [Contributors](#contributors)
+- [Community Exchange](#community-exchange)
+- [Part Of Users](#part-of-users)
+- [Changelog](#changelog)
+- [Donators](#donators)
+- [Sponsors](#sponsors)
+- [Special Thanks](#special-thanks)
+- [License](#license)
+
+</details>
+
+## Introductions
+
+This project is a [Wails](https://github.com/wailsapp/wails) template based on the [Vue](https://vuejs.org/) ecosystem. You can use this project to quickly develop your application.
+
+### Background
+
+The official built-in template only provides the minimum content required to develop an application. If you want to develop an application quickly, you still need to do a lot of work yourself. Based on this, this template project provides you with out-of-the-box functions, you can Get started developing your app quickly.
+
+## Graphic Demo
+
+[![Demo Screenshot](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.en.png "click to view gif demo")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.gif)
+
+## Features
+
+- Single page routing support
+- Built-in internationalization
+- Built-in bright and dark themes
+- Built-in FontAwesome icon library
+- Integrated TailwindCSS
+- Integrate TypeScript
+- Perfect for Windows, MacOS, Linux platforms
+
+## Getting Started
+
+**New Project**:
+
+```
+wails init -n <Your Appname> -t https://github.com/misitebao/wails-template-vue[@version]
+```
+
+flag description:
+
+- n - The name of the application to be created
+- t - Template name, supports built-in template names and third-party templates in the form of hyperlinks
+- @version - Specify the version of a specific Git Tag, if no version is specified, the code of the master branch will be used by default
+
+**Reference document**:
+
+The front-end part uses Vue Vue-Router and Vue-I18N:
+
+- Vue - Use vue3.x version, please refer to the official [Vue3.x Documents](https://vuejs.org/) for specific usage.
+- Vue-Router - Use Vue-Router 4.x version, please refer to the official [Vue-Router Documents](https://router.vuejs.org/) for specific usage.
+- Vue-I18N - Use Vue-I18N 9.x version, please refer to official [Vue-I18N Documents](https://vue-i18n.intlify.dev/) for specific usage.
+- TypeScript - Please refer to official [TypeScript Documents](https://www.typescriptlang.org/) for specific usage.
+- TailwindCSS - Please refer to official [TailwindCSS Documents](https://tailwindcss.com/) for specific usage.
+
+Then you can refer to the official [Wails document](https://wails.io) to start developing your application🤞.
+
+## Maintainer
+
+Thanks to the maintainers of these projects:
+
+<a href="https://github.com/misitebao">
+  <img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/>
+</a>
+
+## Contributors
+
+Thanks to all the contributors involved in the development. [Contributors](https://github.com/misitebao/wails-template-vue/graphs/contributors)
+
+<a href="https://github.com/eighteenzheng">
+  <img src="https://github.com/eighteenzheng.png" width="40" height="40" alt="eighteenzheng" title="eighteenzheng"/>
+</a>
+<a href="https://github.com/daoif">
+  <img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/>
+</a>
+
+## Community Exchange
+
+- [Github Discussions](https://github.com/wailsapp/wails/discussions) - The official Github communication community of the Wails project
+- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails official communication channel
+- [Twitter](https://twitter.com/wailsapp) - Wails official Twitter account
+
+Chinese Community:
+
+- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ Group: 1067173054</a> - QQ Chinese Community Exchange Group
+
+## Part Of Users
+
+- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - A sample program for exploring Wails API, inspired by [Electron API Demos](https://github.com/electron/electron-api-demos)
+- [Hayate](https://github.com/misitebao/hayate) - Windows application installation boot program implemented using Wails.
+
+## Changelog
+
+Check out the changelog [here](./CHANGELOG.md).
+
+## License
+
+[License MIT](./LICENSE)

.github/README.zh-Hans.md

@@ -0,0 +1,152 @@
+<h1 align="center">Wails Template Vue</h1>
+
+<p align="center">
+  <img src="./logo.png" height="280" />
+</p>
+
+<p align="center">
+  基于 Vue 生态的 Wails 模板
+</p>
+
+<p align="center">
+  <a href="https://github.com/misitebao/wails-template-vue/blob/main/LICENSE">
+    <img alt="GitHub" src="https://img.shields.io/github/license/misitebao/wails-template-vue"/>
+  </a>
+  <a href="https://github.com/misitebao/standard-repository">
+    <img alt="GitHub" src="https://cdn.jsdelivr.net/gh/misitebao/standard-repository@main/assets/badge_flat.svg"/>
+  </a>
+  <a href="https://github.com/misitebao/wails-template-vue/releases">
+    <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/misitebao/wails-template-vue?include_prereleases&sort=semver">
+  </a>
+  <a href="https://github.com/wailsapp/awesome-wails">
+    <img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge.svg"/>
+  </a>
+  <br/>
+  <img src="https://img.shields.io/badge/platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?"/>
+</p>
+
+<div align="center">
+<strong>
+<samp>
+
+[English](README.md) · [简体中文](README.zh-Hans.md)
+
+</samp>
+</strong>
+</div>
+
+## 内容目录
+
+<details>
+  <summary>点我 打开/关闭 目录列表</summary>
+
+- [国际化](#国际化)
+- [内容目录](#内容目录)
+- [项目介绍](#项目介绍)
+  - [官方网站](#官方网站)
+  - [背景](#背景)
+- [图形演示](#图形演示)
+- [功能](#功能)
+- [架构](#架构)
+- [快速入门](#快速入门)
+- [维护者](#维护者)
+- [贡献者](#贡献者)
+- [社区交流](#社区交流)
+- [部分用户](#部分用户)
+- [更新日志](#更新日志)
+- [捐赠者](#捐赠者)
+- [赞助商](#赞助商)
+- [特别感谢](#特别感谢)
+- [许可证](#许可证)
+
+</details>
+
+## 项目介绍
+
+本项目是一个基于 [Vue](https://vuejs.org/) 生态的 [Wails](https://github.com/wailsapp/wails) 模板，使用此项目可以快速开发您的应用。
+
+### 背景
+
+官方内置的模板仅仅提供了开发应用所需的最少的内容，如果你想快速开发应用，则仍然需要自己做很多工作，基于此，本模板项目为您提供了开箱即用的功能，您可以快速开始开发您的应用。
+
+## 图形演示
+
+[![演示截图](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.zh-Hans.png "点击查看gif演示")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.gif)
+
+## 功能
+
+- 单页路由支持
+- 内置国际化
+- 内置明亮、暗黑主题
+- 内置 FontAwesome 图标库
+- 集成 TailwindCSS
+- 集成 TypeScript
+- 完美适配 Windows、MacOS、Linux 平台
+
+## 快速入门
+
+**新建项目**:
+
+```
+wails init -n <你的应用名称> -t https://github.com/misitebao/wails-template-vue[@version]
+```
+
+参数说明：
+
+- n - 将要创建的应用名称
+- t - 模板名称，支持内置模板名称以及超链接形式的第三方模板
+- @version - 指定特定 Git Tag 的版本，如果不指定版本，则默认使用主分支的代码
+
+**参考文档**：
+
+前端部分使用了 Vue、Vue-Router、Vue-I18N、TypeScript 和 TailwindCSS。
+
+- Vue - 使用 Vue 3.x 版本，具体使用方式请参考[Vue3.x 官方文档](https://vuejs.org/)。
+- Vue-Router - 使用 Vue-Router 4.x 版本，具体使用方式请参考[Vue-Router 官方文档](https://router.vuejs.org/)。
+- Vue-I18N - 使用 Vue-I18N 9.x 版本，具体使用方式请参考[Vue-I18N 官方文档](https://vue-i18n.intlify.dev/)。
+- TypeScript - 具体使用方式请参考[TypeScript 官方文档](https://www.typescriptlang.org/)。
+- TailwindCSS - 具体使用方式请参考[TailwindCSS 官方文档](https://tailwindcss.com/)
+
+然后您就可以参考 [Wails 官方文档](https://wails.io)开始开发您的应用啦 🤞!
+
+## 维护者
+
+感谢这些项目的维护者：
+
+<a href="https://github.com/misitebao">
+  <img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/>
+</a>
+
+## 贡献者
+
+感谢所有参与开发的贡献者。[贡献者列表](https://github.com/misitebao/wails-template-vue/graphs/contributors)
+
+<a href="https://github.com/eighteenzheng">
+  <img src="https://github.com/eighteenzheng.png" width="40" height="40" alt="eighteenzheng" title="eighteenzheng"/>
+</a>
+<a href="https://github.com/daoif">
+  <img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/>
+</a>
+
+## 社区交流
+
+- [Github Discussions](https://github.com/wailsapp/wails/discussions) - Github 官方推荐的 Wails 项目讨论区
+- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails 官方交流频道
+- [Twitter](https://twitter.com/wailsapp) - Wails 官方推特账号
+
+中文社区：
+
+- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ 群：1067173054</a> - QQ 中文社区交流群
+
+## 部分用户
+
+- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - 一个用于探索 Wails API 的示例程序，灵感来源自 [Electron API Demos](https://github.com/electron/electron-api-demos)
+- [Hayate](https://github.com/misitebao/hayate) - 使用 Wails 实现的 Windows 应用安装引导程序。
+
+## 更新日志
+
+更新日志请查看[这里](./CHANGELOG.md)。
+
+## 许可证
+
+[License MIT](./LICENSE)

.github/pull-request-template.md

@@ -0,0 +1 @@
+<!-- Please list your updates | 请列出您的更新内容 -->

README.md

@@ -1,168 +0,0 @@
-<p align="center">
-  <img src="https://cdn.jsdelivr.net/gh/misitebao/CDN@main/logo/wails-template-vue.png" height="280" />
-</p>
-<p align="center">
-  A Wails template based on Vue and Vue-Router
-</p>
-<p align="center">
-  <a href="https://github.com/misitebao/standard-repository/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/misitebao/standard-repository?style=flat-square"/></a>
-  <a href="https://github.com/misitebao/standard-repository"><img alt="GitHub" src="https://img.shields.io/badge/Readme--Style-standard--repository-brightgreen?style=flat-square&color=f83500"/></a>
-  <a href="https://github.com/misitebao/wails-template-vue"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/misitebao/wails-template-vue?style=flat-square"/></a>
-  <a href="https://github.com/misitebao"><img alt="GitHub user" src="https://img.shields.io/badge/author-misitebao-brightgreen?style=flat-square"/></a>
-  <a href="https://github.com/wailsapp/wails"><img alt="Gitter" src="https://img.shields.io/badge/For-wails-brightgreen?style=flat-square&color=ff3c3c"/></a>
-  <a href="https://github.com/misitebao/awesome-wails"><img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge-flat.svg"/></a>
-  <br/>
-  <img alt="support platform" src="https://img.shields.io/badge/support%20platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?style=flat-square"/>
-</p>
-
-<span id="nav-1"></span>
-
-## Internationalization
-
-[English](README.md) | [简体中文](README.zh-Hans.md)
-
-<span id="nav-2"></span>
-
-## Table of Contents
-
-<details>
-  <summary>Click me to Open/Close the directory listing</summary>
-
-- [Internationalization](#nav-1)
-- [Table of Contents](#nav-2)
-- [Introductions](#nav-3)
-  - [Official Website](#nav-3-1)
-  - [Background](#nav-3-2)
-- [Graphic Demo](#nav-4)
-- [Features](#nav-5)
-- [Architecture](#nav-6)
-- [Getting Started](#nav-7)
-- [Maintainer](#nav-8)
-- [Contributors](#nav-9)
-- [Community Exchange](#nav-10)
-- [Part Of Users](#nav-11)
-- [Release History](CHANGE.md)
-- [Donators](#nav-12)
-- [Sponsors](#nav-13)
-- [Special Thanks](#nav-14)
-- [License](#nav-15)
-
-</details>
-
-<span id="nav-3"></span>
-
-## Introductions
-
-The wails-template-vue template is a Vue template that supports Wails programs and provides Router and i18n functions by default.
-
-<span id="nav-3-1"></span>
-
-<!-- ### Official Website -->
-
-<span id="nav-3-2"></span>
-
-### Background
-
-I hope that Vue and its powerful community ecology can be used in Wails applications to develop single-page applications that support multiple routes.
-
-<span id="nav-4"></span>
-
-## Graphic Demo
-
-[![Demo Screenshot](https://cdn.jsdelivr.net/gh/misitebao/CDN@main/preview/wails-template-vue-desktop.png "click to view gif demo")](https://cdn.jsdelivr.net/gh/misitebao/CDN@main/preview/wails-template-vue.gif)
-
-<span id="nav-5"></span>
-
-## Features
-
-- Compatible with Windows, MacOS, Linux platforms
-- Support single page routing and i18n.
-- Built-in Sass preprocessor.
-- A consistent UI experience across platforms(Comes with JetbrainsMono font package).
-- Comes with a complete API example(Currently under development and testing...).
-
-<span id="nav-6"></span>
-
-<!-- ## Architecture -->
-
-<span id="nav-7"></span>
-
-## Getting Started
-
-### New Project
-
-```
-wails init -n [Your Appname] -t https://github.com/misitebao/wails-template-vue
-```
-
-flag description:
-
-- n - The name of the application to be created
-- t - Template name, supports built-in template names and third-party templates in the form of hyperlinks
-
-### Front-end reference document
-
-The front-end part uses Vue Vue-Router and Vue-I18N:
-
-- Vue - Use vue3.x version, please refer to the official [Vue3.x Documents](https://v3.vuejs.org/guide/introduction.html) for specific usage.
-- Vue-Router - Use Vue-Router 4.x version, please refer to the official [Vue-Router Documents](https://next.router.vuejs.org/) for specific usage.
-- Vue-I18N - Use Vue-I18N 9.x version, please refer to official [Vue-I18N Documents](https://vue-i18n.intlify.dev/) for specific usage.
-
-Then you can refer to the official Wails document to start developing your application🤞.
-
-<span id="nav-8"></span>
-
-## Maintainer
-
-Thanks to the maintainers of these projects:
-
-<a href="https://github.com/misitebao"><img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/></a>
-
-<details>
-  <summary>Click me to Open/Close the contributors listing</summary>
-
-- [Misitebao](https://github.com/misitebao) - Project author, full stack engineer.
-
-</details>
-
-<span id="nav-9"></span>
-
-## Contributors
-
-Thank you to all the contributors who participated in the development of standard-repository. [Contributors](https://github.com/misitebao/wails-template-vue/graphs/contributors)
-
-<span id="nav-10"></span>
-
-## Community Exchange
-
-- [Github Discussions](https://github.com/wailsapp/wails/discussions) - The official Github communication community of the Wails project
-- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails official communication channel
-- [Twitter](https://twitter.com/wailsapp) - Wails official Twitter account
-
-Chinese Community:
-
-- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ Group: 1067173054</a> - QQ Chinese Community Exchange Group
-
-<span id="nav-11"></span>
-
-## Part Of Users
-
-- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - A sample program for exploring Wails API, inspired by [Electron API Demos](https://github.com/electron/electron-api-demos)
-
-<span id="nav-12"></span>
-
-<!-- ## Donators -->
-
-<span id="nav-13"></span>
-
-<!-- ## Sponsors -->
-
-<span id="nav-14"></span>
-
-<!-- ## Special Thanks -->
-
-<span id="nav-15"></span>
-
-## License
-
-[License MIT](LICENSE)

README.zh-Hans.md

@@ -1,168 +0,0 @@
-<p align="center">
-  <img src="https://cdn.jsdelivr.net/gh/misitebao/CDN@main/logo/wails-template-vue.png" height="280" />
-</p>
-<p align="center">
-  基于Vue和Vue-Router的Wails模板
-</p>
-<p align="center">
-  <a href="https://github.com/misitebao/standard-repository/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/misitebao/standard-repository?style=flat-square"/></a>
-  <a href="https://github.com/misitebao/standard-repository"><img alt="GitHub" src="https://img.shields.io/badge/Readme--Style-standard--repository-brightgreen?style=flat-square&color=f83500"/></a>
-  <a href="https://github.com/misitebao/wails-template-vue"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/misitebao/wails-template-vue?style=flat-square"/></a>
-  <a href="https://github.com/misitebao"><img alt="GitHub user" src="https://img.shields.io/badge/author-misitebao-brightgreen?style=flat-square"/></a>
-  <a href="https://github.com/wailsapp/wails"><img alt="Gitter" src="https://img.shields.io/badge/For-wails-brightgreen?style=flat-square&color=ff3c3c"/></a>
-  <a href="https://github.com/misitebao/awesome-wails"><img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge-flat.svg"/></a>
-  <br/>
-  <img alt="平台支持" src="https://img.shields.io/badge/support%20platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?style=flat-square"/>
-</p>
-
-<span id="nav-1"></span>
-
-## 国际化
-
-[English](README.md) | [简体中文](README.zh-Hans.md)
-
-<span id="nav-2"></span>
-
-## 内容目录
-
-<details>
-  <summary>点我 打开/关闭 目录列表</summary>
-
-- [国际化](#nav-1)
-- [内容目录](#nav-2)
-- [项目介绍](#nav-3)
-  - [官方网站](#nav-3-1)
-  - [背景](#nav-3-2)
-- [图形演示](#nav-4)
-- [功能特色](#nav-5)
-- [架构](#nav-6)
-- [新手入门](#nav-7)
-- [维护者](#nav-8)
-- [贡献者](#nav-9)
-- [社区交流](#nav-10)
-- [部分用户](#nav-11)
-- [发布记录](CHANGE.md)
-- [捐赠者](#nav-12)
-- [赞助商](#nav-13)
-- [特别感谢](#nav-14)
-- [版权许可](#nav-15)
-
-</details>
-
-<span id="nav-3"></span>
-
-## 项目介绍
-
-wails-template-vue 模板是一个支持 Wails 应用的 Vue 模板，默认提供路由和国际化功能。
-
-<span id="nav-3-1"></span>
-
-<!-- ### 官方网站 -->
-
-<span id="nav-3-2"></span>
-
-### 背景
-
-希望在 Wails 应用中使用 Vue 及其强大的社区生态开发支持多路由的单页应用。
-
-<span id="nav-4"></span>
-
-## 图形演示
-
-[![演示截图](https://cdn.jsdelivr.net/gh/misitebao/CDN@main/preview/wails-template-vue-desktop.png "点击查看gif演示")](https://cdn.jsdelivr.net/gh/misitebao/CDN@main/preview/wails-template-vue.gif)
-
-<span id="nav-5"></span>
-
-## 功能特色
-
-- 兼容 Windows、MacOS、Linux 平台
-- 支持单页路由和国际化
-- 内置 Sass 预处理器
-- 跨平台一致的 UI 体验（内置 JetbrainsMono 字体包）
-- 附带完整的 APi 示例（目前正在开发测试中。。。）
-
-<span id="nav-6"></span>
-
-<!-- ## 架构 -->
-
-<span id="nav-7"></span>
-
-## 新手入门
-
-### 新建项目
-
-```
-wails init -n [你的应用名称] -t https://github.com/misitebao/wails-template-vue
-```
-
-参数说明：
-
-- n - 将要创建的应用名称
-- t - 模板名称，支持内置模板名称以及超链接形式的第三方模板
-
-### 前端部分参考文档
-
-前端部分使用了 Vue Vue-Router 和 Vue-I18N。
-
-- Vue - 使用 Vue 3.x 版本，具体使用方式请参考[Vue3.x 官方文档](https://v3.vuejs.org/guide/introduction.html)。
-- Vue-Router - 使用 Vue-Router 4.x 版本，具体使用方式请参考[Vue-Router 官方文档](https://next.router.vuejs.org/)。
-- Vue-I18N - 使用 Vue-I18N 9.x 版本，具体使用方式请参考[Vue-I18N 官方文档](https://vue-i18n.intlify.dev/)。
-
-然后您就可以参考 Wails 官方文档开始开发您的应用啦 🤞!
-
-<span id="nav-8"></span>
-
-## 维护者
-
-感谢这些项目的维护者：
-
-<a href="https://github.com/misitebao"><img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/></a>
-
-<details>
-  <summary>点我 打开/关闭 贡献者列表</summary>
-
-- [米司特包](https://github.com/misitebao) - 项目作者，全栈工程师。
-
-</details>
-
-<span id="nav-9"></span>
-
-## 贡献者
-
-感谢所有参与 wails-template-vue 开发的贡献者。[贡献者列表](https://github.com/misitebao/wails-template-vue/graphs/contributors)
-
-<span id="nav-10"></span>
-
-## 社区交流
-
-- [Github Discussions](https://github.com/wailsapp/wails/discussions) - Github 官方推荐的 Wails 项目讨论区
-- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails 官方交流频道
-- [Twitter](https://twitter.com/wailsapp) - Wails 官方推特账号
-
-中文社区：
-
-- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ 群：1067173054</a> - QQ 中文社区交流群
-
-<span id="nav-11"></span>
-
-## 部分用户
-
-- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - 一个用于探索 Wails API 的示例程序，灵感来源自 [Electron API Demos](https://github.com/electron/electron-api-demos)
-
-<span id="nav-12"></span>
-
-<!-- ## 捐赠者 -->
-
-<span id="nav-13"></span>
-
-<!-- ## 赞助商 -->
-
-<span id="nav-14"></span>
-
-<!-- ## 特别感谢 -->
-
-<span id="nav-15"></span>
-
-## 版权许可
-
-[License MIT](LICENSE)

app.tmpl.go

@@ -25,11 +25,21 @@ func (a *App) startup(ctx context.Context) {
 
 // domReady is called after the front-end dom has been loaded
 // domReady 在前端Dom加载完毕后调用
-func (a App) domReady(ctx context.Context) {
+func (a *App) domReady(ctx context.Context) {
 	// Add your action here
 	// 在这里添加你的操作
 }
 
+// beforeClose is called when the application is about to quit,
+// either by clicking the window close button or calling runtime.Quit.
+// Returning true will cause the application to continue,
+// false will continue shutdown as normal.
+// beforeClose在单击窗口关闭按钮或调用runtime.Quit即将退出应用程序时被调用.
+// 返回 true 将导致应用程序继续，false 将继续正常关闭。
+func (a *App) beforeClose(ctx context.Context) (prevent bool) {
+	return false
+}
+
 // shutdown is called at application termination
 // 在应用程序终止时被调用
 func (a *App) shutdown(ctx context.Context) {

frontend/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

frontend/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};

frontend/.gitignore

@@ -1,21 +1,26 @@
-.DS_Store
-node_modules
-# /dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

frontend/.prettierrc.json

@@ -0,0 +1 @@
+{}

frontend/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

frontend/README.md

@@ -1,25 +1,46 @@
-# wails-template-vue
+# frontend
 
-## Project setup
+This template should help get you started developing with Vue 3 in Vite.
 
-```
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```
 
-### Compiles and hot-reloads for development
+### Compile and Hot-Reload for Development
 
-```
+```sh
 npm run dev
 ```
 
-### Compiles and minifies for production
+### Type-Check, Compile and Minify for Production
 
-```
+```sh
 npm run build
 ```
 
-### Open the web server to preview the packaged resources
+### Lint with [ESLint](https://eslint.org/)
 
-```
-npm run serve
+```sh
+npm run lint
 ```

frontend/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/index.tmpl.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{.ProjectName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.tmpl.json

@@ -1,24 +1,38 @@
 {
   "name": "{{.ProjectName}}",
-  "version": "0.0.1",
-  "private": true,
+  "version": "0.0.0",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "serve": "serve dist"
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
-  "author": "{{.AuthorName}}",
   "dependencies": {
-    "vue": "^3.0.0",
-    "vue-i18n": "^9.1.7",
-    "vue-router": "^4.0.0-0"
+    "pinia": "^2.0.21",
+    "vue": "^3.2.38",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "serve": "^12.0.0"
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^16.11.56",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.17",
+    "prettier": "^2.7.1",
+    "sass": "^1.55.0",
+    "tailwindcss": "^3.1.8",
+    "typescript": "~4.7.4",
+    "vite": "^3.0.9",
+    "vue-tsc": "^0.40.7"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/public/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
-</head>
-
-<body>
-  <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-        Please enable it to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-</body>
-
-</html>

frontend/src/App.vue

@@ -1,89 +1,56 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t, availableLocales: languages, locale } = useI18n();
+
+const onclickLanguageHandle = (item: string) => {
+  item !== locale.value ? (locale.value = item) : false;
+};
+
+const onclickMinimise = () => {};
+
+const onclickQuit = () => {};
+
+document.body.addEventListener("click", function (event) {
+  event.preventDefault();
+});
+</script>
+
 <template>
   <!-- Header -->
-  <!-- 头部 -->
-  <div class="header" data-wails-drag>
+  <div class="header">
     <!-- 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>
+    <div class="nav">
+      <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="menu">
       <div class="language">
         <div
-          v-for="(item) in languages"
+          v-for="item in languages"
           :key="item"
           :class="{ active: item === locale }"
           @click="onclickLanguageHandle(item)"
           class="lang-item"
-        >{{ $t("languages." + item) }}</div>
+        >
+          {{ t("languages." + item) }}
+        </div>
       </div>
       <div class="bar">
-        <div class="bar-btn" @click="onclickMinimise">{{ $t("topbar.minimise") }}</div>
-        <div class="bar-btn" @click="onclickQuit">{{ $t("topbar.quit") }}</div>
+        <div class="bar-btn" @click="onclickMinimise">
+          {{ t("topbar.minimise") }}
+        </div>
+        <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
       </div>
     </div>
   </div>
   <!-- Page -->
-  <!-- 页面 -->
   <div class="view">
     <router-view />
   </div>
 </template>
 
-<script>
-import { ref, watch } from 'vue'
-import i18n from "@/i18n";
-
-export default {
-  setup() {
-    // List of supported languages
-    // 支持的语言列表
-    const languages = i18n.global.availableLocales
-    // Current language
-    // 当前语言
-    const locale = ref("zh-Hans")
-    locale.value = i18n.global.locale
-
-    // Click to switch language
-    // 点击切换语言
-    const onclickLanguageHandle = (item) => {
-      (item !== locale.value) ? (locale.value = item) : false
-
-    }
-    // Monitor current language changes
-    // 监听当前语言变动
-    watch(locale, (newValue, oldValue) => {
-      console.log('The new language is: ' + locale.value)
-      i18n.global.locale = newValue
-    })
-
-
-    // Since the current js runtime has not been developed yet, so first call Go to complete. Later, 
-    // it will be updated to be called directly when js is running.
-    // 由于当前js运行时还没有开发完成，所以先调用Go完成。后续会更新为js运行时直接调用。
-    const onclickMinimise = () => {
-      window.runtime.WindowMinimise()
-
-    }
-    const onclickQuit = () => {
-      window.runtime.Quit()
-
-    }
-
-    return {
-      languages,
-      locale,
-      onclickLanguageHandle,
-      onclickMinimise,
-      onclickQuit
-    }
-  },
-}
-</script>
-
 <style lang="scss">
 @import url("./assets/css/reset.css");
 @import url("./assets/css/font.css");
@@ -106,9 +73,7 @@ body {
   // width: 900px;
   // height: 520px;
   height: 100%;
-  margin-right: 1px;
-  border-radius: 6px;
-  background-color: #dbbcef;
+  background-color: rgba(219, 188, 239, 0.9);
   overflow: hidden;
 }
 .header {
@@ -119,7 +84,7 @@ body {
   justify-content: space-between;
   height: 50px;
   padding: 0 10px;
-  background-color: #ab7edc;
+  background-color: rgba(171, 126, 220, 0.9);
   .nav {
     a {
       display: inline-block;

frontend/src/components/HelloWorld.vue

@@ -1,17 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string;
+}>();
+</script>
+
 <template>
   <div class="hello-world" v-text="msg"></div>
 </template>
 
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .hello-world {
   height: 76px;

frontend/src/components/public/OpenLink.vue

@@ -1,36 +0,0 @@
-<template>
-  <span class="openlink" @click="onClickhandle">
-    <slot></slot>
-  </span>
-</template>
-
-<script>
-import i18n from "@/i18n";
-export default {
-  name: "OpenLink",
-  props: {
-    href: String,
-  },
-  setup(props) {
-    const onClickhandle = () => {
-      // You cannot use the a tag directly, you need to call the Go method here to open the link using the default browser.
-      // 不能直接使用a标签，需要在这里调用Go方法以使用默认浏览器打开链接。
-
-      window.runtime.BrowserOpenURL(props.href)
-
-    }
-
-    return {
-      onClickhandle
-    }
-  }
-
-};
-</script>
-
-<style lang="scss">
-.openlink {
-  cursor: pointer;
-  text-decoration: underline;
-}
-</style>

frontend/src/components/public/index.js

@@ -1,10 +0,0 @@
-import OpenLink from '@/components/public/OpenLink.vue'
-
-// Encapsulate global components as plug-ins
-// 将全局组件封装为插件
-
-export default {
-  install(app) {
-    app.component(OpenLink.name, OpenLink)
-  }
-}

frontend/src/i18n/index.js

@@ -1,13 +0,0 @@
-import { createI18n } from 'vue-i18n'
-
-const i18n = createI18n({
-  locale: "en",
-  fallbackLocale: 'en',
-  messages: {
-    "zh-Hans": require('./messages/zh-Hans.json'),
-    "en": require('./messages/en.json'),
-    "fr": require('./messages/fr.json')
-  }
-})
-
-export default i18n

frontend/src/i18n/index.ts

@@ -0,0 +1,16 @@
+import { createI18n } from "vue-i18n";
+
+import zhHans from "./locales/zh-Hans.json";
+import en from "./locales/en.json";
+
+const i18n = createI18n({
+  locale: "en",
+  fallbackLocale: "en",
+  legacy: false,
+  messages: {
+    "zh-Hans": zhHans,
+    en: en,
+  },
+});
+
+export default i18n;

frontend/src/i18n/locales/en.json

@@ -15,7 +15,7 @@
   "homepage": {
     "welcome": "Welcome to use Wails program developed based on Vue",
     "getting-started": "Getting Started",
-    "star-me": "Star Me"
+    "star-me": "Github"
   },
   "aboutpage": {
     "title": "Wails Template Vue",

frontend/src/i18n/locales/zh-Hans.json

@@ -14,8 +14,8 @@
   },
   "homepage": {
     "welcome": "欢迎使用基于Vue开发的Wails程序",
-    "getting-started": "新手入门",
-    "star-me": "给我点星"
+    "getting-started": "快速入门",
+    "star-me": "Github"
   },
   "aboutpage": {
     "title": "Wails Template Vue",

frontend/src/i18n/messages/fr.json

@@ -1,32 +0,0 @@
-{
-  "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/src/main.js

@@ -1,14 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import i18n from './i18n'
-
-// Register global common components
-// 注册全局通用组件
-import publicComponents from '@/components/public'
-
-createApp(App)
-  .use(router)
-  .use(i18n)
-  .use(publicComponents)
-  .mount('#app')

frontend/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+import i18n from "./i18n";
+
+import "./style.scss";
+
+// import "./assets/main.css";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(i18n);
+
+app.mount("#app");

frontend/src/router/index.js

@@ -1,27 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import Home from '../views/Home.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: function () {
-      return import(/* webpackChunkName: "about" */ '../views/About.vue')
-    }
-  }
-]
-
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes
-})
-
-export default router

frontend/src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: HomeView,
+    },
+    {
+      path: "/about",
+      name: "about",
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import("../views/AboutView.vue"),
+    },
+  ],
+});
+
+export default router;

frontend/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return { count, doubleCount, increment };
+});

frontend/src/style.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/views/AboutView.vue

@@ -1,50 +1,47 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import comeonGif from "@/assets/images/comeon.gif";
+
+const { t } = useI18n();
+</script>
+
 <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>
-          <OpenLink
-            class="link"
-            href="https://github.com/misitebao/wails-template-vue"
-          >https://github.com/misitebao/wails-template-vue</OpenLink>
+          <div class="name">{{ t("aboutpage.project-repository") }}</div>
+          <a class="link" href="https://github.com/misitebao/wails-template-vue"
+            >https://github.com/misitebao/wails-template-vue</a
+          >
         </li>
         <li class="info-item">
-          <div class="name">{{ $t('aboutpage.wails-repository') }}</div>
-          <OpenLink
-            class="link"
-            href="https://github.com/wailsapp/wails"
-          >https://github.com/wailsapp/wails</OpenLink>
+          <div class="name">{{ t("aboutpage.wails-repository") }}</div>
+          <a class="link" href="https://github.com/wailsapp/wails"
+            >https://github.com/wailsapp/wails</a
+          >
         </li>
         <li class="info-item">
-          <div class="name">{{ $t('aboutpage.author') }}</div>
-          <OpenLink class="link" href="https://github.com/misitebao">{{ $t('aboutpage.misitebao') }}</OpenLink>
+          <div class="name">{{ t("aboutpage.author") }}</div>
+          <a class="link" href="https://github.com/misitebao">{{
+            t("aboutpage.misitebao")
+          }}</a>
         </li>
       </ul>
     </div>
 
     <!-- Thanks -->
-    <!-- 谢语 -->
-    <div class="thank">{{ $t('aboutpage.thanks') }}</div>
+    <div class="thank">{{ t("aboutpage.thanks") }}</div>
   </div>
 </template>
-<script>
-import comeonGif from '@/assets/images/comeon.gif'
-export default {
-  setup() {
-    return {
-      comeonGif
-    }
-  },
-}
-</script>
+
 <style lang="scss">
 .about {
   .title {

frontend/src/views/HomeView.vue

@@ -1,37 +1,32 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import HelloWorld from "@/components/HelloWorld.vue";
+
+const { t } = useI18n();
+</script>
+
 <template>
   <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
+      <a
         href="https://wails.io/docs/gettingstarted/installation"
         class="btn start"
-      >{{ $t('homepage.getting-started') }}</OpenLink>
-      <OpenLink
+        >{{ t("homepage.getting-started") }}</a
+      >
+      <a
         href="https://github.com/misitebao/wails-template-vue"
         class="btn star"
-      >{{ $t('homepage.star-me') }}</OpenLink>
+        >{{ t("homepage.star-me") }}</a
+      >
     </div>
   </div>
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "Home",
-  components: {
-    HelloWorld
-  },
-  setup() {
-    return {};
-  },
-};
-</script>
 <style lang="scss">
 .home {
   .logo {

frontend/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: ["class", '[data-theme="dark"]'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

frontend/tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

frontend/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

frontend/vite.config.ts

@@ -0,0 +1,24 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`,
+      },
+    },
+  },
+});

frontend/vue.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  // The build file does not use the hash file name
-  // 构建文件不使用hash文件名
-  filenameHashing: false,
-  // Package the css into a separate file
-  // 将css打包到单独的文件
-  css: {
-    extract: "true"
-  }
-}

frontend/wailsjs/go/main/App.d.ts

@@ -0,0 +1,4 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export function Hello():Promise<boolean>;

frontend/wailsjs/go/main/App.js

@@ -0,0 +1,7 @@
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export function Hello() {
+  return window['go']['main']['App']['Hello']();
+}

frontend/wailsjs/runtime/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@wailsapp/runtime",
+  "version": "2.0.0",
+  "description": "Wails Javascript runtime library",
+  "main": "runtime.js",
+  "types": "runtime.d.ts",
+  "scripts": {
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wailsapp/wails.git"
+  },
+  "keywords": [
+    "Wails",
+    "Javascript",
+    "Go"
+  ],
+  "author": "Lea Anthony <lea.anthony@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wailsapp/wails/issues"
+  },
+  "homepage": "https://github.com/wailsapp/wails#readme"
+}

frontend/wailsjs/runtime/runtime.d.ts

@@ -0,0 +1,203 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export interface Position {
+    x: number;
+    y: number;
+}
+
+export interface Size {
+    w: number;
+    h: number;
+}
+
+export interface Screen {
+    isCurrent: boolean;
+    isPrimary: boolean;
+    width : number
+    height : number
+}
+
+// Environment information such as platform, buildtype, ...
+export interface EnvironmentInfo {
+    buildType: string;
+    platform: string;
+    arch: string;
+}
+
+// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
+// emits the given event. Optional data may be passed with the event.
+// This will trigger any event listeners.
+export function EventsEmit(eventName: string, ...data: any): void;
+
+// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
+export function EventsOn(eventName: string, callback: (...data: any) => void): void;
+
+// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
+// sets up a listener for the given event name, but will only trigger a given number times.
+export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): void;
+
+// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
+// sets up a listener for the given event name, but will only trigger once.
+export function EventsOnce(eventName: string, callback: (...data: any) => void): void;
+
+// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsff)
+// unregisters the listener for the given event name.
+export function EventsOff(eventName: string): void;
+
+// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
+// logs the given message as a raw message
+export function LogPrint(message: string): void;
+
+// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
+// logs the given message at the `trace` log level.
+export function LogTrace(message: string): void;
+
+// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
+// logs the given message at the `debug` log level.
+export function LogDebug(message: string): void;
+
+// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
+// logs the given message at the `error` log level.
+export function LogError(message: string): void;
+
+// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
+// logs the given message at the `fatal` log level.
+// The application will quit after calling this method.
+export function LogFatal(message: string): void;
+
+// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
+// logs the given message at the `info` log level.
+export function LogInfo(message: string): void;
+
+// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
+// logs the given message at the `warning` log level.
+export function LogWarning(message: string): void;
+
+// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
+// Forces a reload by the main application as well as connected browsers.
+export function WindowReload(): void;
+
+// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
+// Reloads the application frontend.
+export function WindowReloadApp(): void;
+
+// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
+// *Windows only*
+// Sets window theme to system default (dark/light).
+export function WindowSetSystemDefaultTheme(): void;
+
+// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
+// *Windows only*
+// Sets window to light theme.
+export function WindowSetLightTheme(): void;
+
+// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
+// *Windows only*
+// Sets window to dark theme.
+export function WindowSetDarkTheme(): void;
+
+// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
+// Centers the window on the monitor the window is currently on.
+export function WindowCenter(): void;
+
+// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
+// Sets the text in the window title bar.
+export function WindowSetTitle(title: string): void;
+
+// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
+// Makes the window full screen.
+export function WindowFullscreen(): void;
+
+// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
+// Restores the previous window dimensions and position prior to full screen.
+export function WindowUnfullscreen(): void;
+
+// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
+// Sets the width and height of the window.
+export function WindowSetSize(width: number, height: number): Promise<Size>;
+
+// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
+// Gets the width and height of the window.
+export function WindowGetSize(): Promise<Size>;
+
+// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
+// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMaxSize(width: number, height: number): void;
+
+// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
+// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMinSize(width: number, height: number): void;
+
+// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
+// Sets the window position relative to the monitor the window is currently on.
+export function WindowSetPosition(x: number, y: number): void;
+
+// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
+// Gets the window position relative to the monitor the window is currently on.
+export function WindowGetPosition(): Promise<Position>;
+
+// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
+// Hides the window.
+export function WindowHide(): void;
+
+// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
+// Shows the window, if it is currently hidden.
+export function WindowShow(): void;
+
+// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
+// Maximises the window to fill the screen.
+export function WindowMaximise(): void;
+
+// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
+// Toggles between Maximised and UnMaximised.
+export function WindowToggleMaximise(): void;
+
+// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
+// Restores the window to the dimensions and position prior to maximising.
+export function WindowUnmaximise(): void;
+
+// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
+// Minimises the window.
+export function WindowMinimise(): void;
+
+// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
+// Restores the window to the dimensions and position prior to minimising.
+export function WindowUnminimise(): void;
+
+// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
+// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
+export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
+
+// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
+// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
+export function ScreenGetAll(): Promise<Screen[]>;
+
+// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
+// Opens the given URL in the system browser.
+export function BrowserOpenURL(url: string): void;
+
+// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
+// Returns information about the environment
+export function Environment(): Promise<EnvironmentInfo>;
+
+// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
+// Quits the application.
+export function Quit(): void;
+
+// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
+// Hides the application.
+export function Hide(): void;
+
+// [Show](https://wails.io/docs/reference/runtime/intro#show)
+// Shows the application.
+export function Show(): void;

frontend/wailsjs/runtime/runtime.js

@@ -0,0 +1,174 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export function LogPrint(message) {
+    window.runtime.LogPrint(message);
+}
+
+export function LogTrace(message) {
+    window.runtime.LogTrace(message);
+}
+
+export function LogDebug(message) {
+    window.runtime.LogDebug(message);
+}
+
+export function LogInfo(message) {
+    window.runtime.LogInfo(message);
+}
+
+export function LogWarning(message) {
+    window.runtime.LogWarning(message);
+}
+
+export function LogError(message) {
+    window.runtime.LogError(message);
+}
+
+export function LogFatal(message) {
+    window.runtime.LogFatal(message);
+}
+
+export function EventsOnMultiple(eventName, callback, maxCallbacks) {
+    window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
+}
+
+export function EventsOn(eventName, callback) {
+    EventsOnMultiple(eventName, callback, -1);
+}
+
+export function EventsOff(eventName) {
+    return window.runtime.EventsOff(eventName);
+}
+
+export function EventsOnce(eventName, callback) {
+    EventsOnMultiple(eventName, callback, 1);
+}
+
+export function EventsEmit(eventName) {
+    let args = [eventName].slice.call(arguments);
+    return window.runtime.EventsEmit.apply(null, args);
+}
+
+export function WindowReload() {
+    window.runtime.WindowReload();
+}
+
+export function WindowReloadApp() {
+    window.runtime.WindowReloadApp();
+}
+
+export function WindowSetSystemDefaultTheme() {
+    window.runtime.WindowSetSystemDefaultTheme();
+}
+
+export function WindowSetLightTheme() {
+    window.runtime.WindowSetLightTheme();
+}
+
+export function WindowSetDarkTheme() {
+    window.runtime.WindowSetDarkTheme();
+}
+
+export function WindowCenter() {
+    window.runtime.WindowCenter();
+}
+
+export function WindowSetTitle(title) {
+    window.runtime.WindowSetTitle(title);
+}
+
+export function WindowFullscreen() {
+    window.runtime.WindowFullscreen();
+}
+
+export function WindowUnfullscreen() {
+    window.runtime.WindowUnfullscreen();
+}
+
+export function WindowGetSize() {
+    return window.runtime.WindowGetSize();
+}
+
+export function WindowSetSize(width, height) {
+    window.runtime.WindowSetSize(width, height);
+}
+
+export function WindowSetMaxSize(width, height) {
+    window.runtime.WindowSetMaxSize(width, height);
+}
+
+export function WindowSetMinSize(width, height) {
+    window.runtime.WindowSetMinSize(width, height);
+}
+
+export function WindowSetPosition(x, y) {
+    window.runtime.WindowSetPosition(x, y);
+}
+
+export function WindowGetPosition() {
+    return window.runtime.WindowGetPosition();
+}
+
+export function WindowHide() {
+    window.runtime.WindowHide();
+}
+
+export function WindowShow() {
+    window.runtime.WindowShow();
+}
+
+export function WindowMaximise() {
+    window.runtime.WindowMaximise();
+}
+
+export function WindowToggleMaximise() {
+    window.runtime.WindowToggleMaximise();
+}
+
+export function WindowUnmaximise() {
+    window.runtime.WindowUnmaximise();
+}
+
+export function WindowMinimise() {
+    window.runtime.WindowMinimise();
+}
+
+export function WindowUnminimise() {
+    window.runtime.WindowUnminimise();
+}
+
+export function WindowSetBackgroundColour(R, G, B, A) {
+    window.runtime.WindowSetBackgroundColour(R, G, B, A);
+}
+
+export function ScreenGetAll() {
+    return window.runtime.ScreenGetAll();
+}
+
+export function BrowserOpenURL(url) {
+    window.runtime.BrowserOpenURL(url);
+}
+
+export function Environment() {
+    return window.runtime.Environment();
+}
+
+export function Quit() {
+    window.runtime.Quit();
+}
+
+export function Hide() {
+    window.runtime.Hide();
+}
+
+export function Show() {
+    window.runtime.Show();
+}

go.mod.tmpl

@@ -1,38 +0,0 @@
-module wails-vue
-
-go 1.17
-
-require github.com/wailsapp/wails/v2 {{.WailsVersion}}
-
-require (
-	github.com/andybalholm/brotli v1.0.2 // indirect
-	github.com/davecgh/go-spew v1.1.1 // indirect
-	github.com/fasthttp/websocket v0.0.0-20200320073529-1554a54587ab // indirect
-	github.com/gabriel-vasile/mimetype v1.3.1 // indirect
-	github.com/go-ole/go-ole v1.2.5 // indirect
-	github.com/gofiber/fiber/v2 v2.17.0 // indirect
-	github.com/gofiber/websocket/v2 v2.0.8 // indirect
-	github.com/google/uuid v1.1.2 // indirect
-	github.com/imdario/mergo v0.3.12 // indirect
-	github.com/jchv/go-winloader v0.0.0-20200815041850-dec1ee9a7fd5 // indirect
-	github.com/klauspost/compress v1.12.2 // indirect
-	github.com/leaanthony/debme v1.2.1 // indirect
-	github.com/leaanthony/go-ansi-parser v1.0.1 // indirect
-	github.com/leaanthony/go-common-file-dialog v1.0.3 // indirect
-	github.com/leaanthony/go-webview2 v0.0.0-20210914103035-f00aa774a934 // indirect
-	github.com/leaanthony/slicer v1.5.0 // indirect
-	github.com/leaanthony/typescriptify-golang-structs v0.1.7 // indirect
-	github.com/leaanthony/webview2runtime v1.1.0 // indirect
-	github.com/leaanthony/winc v0.0.0-20210921073452-54963136bf18 // indirect
-	github.com/pkg/browser v0.0.0-20210706143420-7d21f8c997e2 // indirect
-	github.com/pkg/errors v0.9.1 // indirect
-	github.com/savsgio/gotils v0.0.0-20200117113501-90175b0fbe3f // indirect
-	github.com/tkrajina/go-reflector v0.5.5 // indirect
-	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.28.0 // indirect
-	github.com/valyala/tcplisten v1.0.0 // indirect
-	golang.org/x/net v0.0.0-20210510120150-4163338589ed // indirect
-	golang.org/x/sys v0.0.0-20210823070655-63515b42dcdf // indirect
-)
-
-// replace github.com/wailsapp/wails/v2 {{.WailsVersion}} => {{.WailsDirectory}}

go.tmpl.mod

@@ -0,0 +1,32 @@
+module changeme
+
+go 1.18
+
+require github.com/wailsapp/wails/v2 {{.WailsVersion}}
+
+require (
+	github.com/bep/debounce v1.2.1 // indirect
+	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/google/uuid v1.1.2 // indirect
+	github.com/imdario/mergo v0.3.12 // indirect
+	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
+	github.com/labstack/echo/v4 v4.7.2 // indirect
+	github.com/labstack/gommon v0.3.1 // indirect
+	github.com/leaanthony/go-ansi-parser v1.0.1 // indirect
+	github.com/leaanthony/gosod v1.0.3 // indirect
+	github.com/leaanthony/slicer v1.5.0 // indirect
+	github.com/mattn/go-colorable v0.1.11 // indirect
+	github.com/mattn/go-isatty v0.0.14 // indirect
+	github.com/pkg/browser v0.0.0-20210706143420-7d21f8c997e2 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/tkrajina/go-reflector v0.5.5 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasttemplate v1.2.1 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	golang.org/x/crypto v0.0.0-20210817164053-32db794688a5 // indirect
+	golang.org/x/net v0.0.0-20211015210444-4f30a5c0130f // indirect
+	golang.org/x/sys v0.0.0-20220114195835-da31bd327af9 // indirect
+	golang.org/x/text v0.3.7 // indirect
+)
+
+// replace github.com/wailsapp/wails/v2 {{.WailsVersion}} => {{.WailsDirectory}}

main.tmpl.go

@@ -7,12 +7,18 @@ import (
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/logger"
 	"github.com/wailsapp/wails/v2/pkg/options"
+	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+	"github.com/wailsapp/wails/v2/pkg/options/linux"
+	"github.com/wailsapp/wails/v2/pkg/options/mac"
 	"github.com/wailsapp/wails/v2/pkg/options/windows"
 )
 
 //go:embed frontend/dist
 var assets embed.FS
 
+//go:embed build/appicon.png
+var icon []byte
+
 func main() {
 	// Create an instance of the app structure
 	// 创建一个App结构体实例
@@ -22,40 +28,70 @@ func main() {
 	// 使用选项创建应用
 	err := wails.Run(&options.App{
 		Title:             "{{.ProjectName}}",
-		Width:             1600,
-		Height:            1000,
-		MinWidth:          1600,
-		MinHeight:         1000,
-		MaxWidth:          2000,
-		MaxHeight:         1200,
+		Width:             900,
+		Height:            600,
+		MinWidth:          900,
+		MinHeight:         600,
+		MaxWidth:          1200,
+		MaxHeight:         800,
 		DisableResize:     false,
 		Fullscreen:        false,
-		Frameless:         true,
+		Frameless:         false,
 		StartHidden:       false,
 		HideWindowOnClose: false,
-		RGBA:              &options.RGBA{255,255,255,0},
-		Assets:            assets,
-		LogLevel:   logger.DEBUG,
-		OnStartup:  app.startup,
-		OnDomReady: app.domReady,
-		OnShutdown: app.shutdown,
+		BackgroundColour:  &options.RGBA{R: 255, G: 255, B: 255, A: 0},
+		Menu:              nil,
+		Logger:            nil,
+		LogLevel:          logger.DEBUG,
+		OnStartup:         app.startup,
+		OnDomReady:        app.domReady,
+		OnBeforeClose:     app.beforeClose,
+		OnShutdown:        app.shutdown,
+		WindowStartState:  options.Normal,
+		AssetServer: &assetserver.Options{
+			Assets:     assets,
+			Handler:    nil,
+			Middleware: nil,
+		},
 		Bind: []interface{}{
 			app,
 		},
 		// Windows platform specific options
 		// Windows平台特定选项
 		Windows: &windows.Options{
-			WebviewIsTransparent:          true,
-			WindowIsTranslucent: true,
-			DisableWindowIcon:             false,
+			WebviewIsTransparent:              true,
+			WindowIsTranslucent:               false,
+			DisableWindowIcon:                 false,
+			DisableFramelessWindowDecorations: false,
+			WebviewUserDataPath:               "",
+			WebviewBrowserPath:                "",
+			Theme:                             windows.SystemDefault,
+		},
+		// Mac platform specific options
+		// Mac平台特定选项
+		Mac: &mac.Options{
+			TitleBar: &mac.TitleBar{
+				TitlebarAppearsTransparent: true,
+				HideTitle:                  true,
+				HideTitleBar:               false,
+				FullSizeContent:            true,
+				UseToolbar:                 false,
+				HideToolbarSeparator:       false,
+			},
+			Appearance:           mac.NSAppearanceNameDarkAqua,
+			WebviewIsTransparent: true,
+			WindowIsTranslucent:  true,
+			About: &mac.AboutInfo{
+				Title:   "Wails Template Vue",
+				Message: "A Wails template based on Vue and Vue-Router",
+				Icon:    icon,
+			},
+		},
+		Linux: &linux.Options{
+			Icon: icon,
 		},
-		// Mac: &mac.Options{
-		// 	WebviewIsTransparent:          true,
-		// 	WindowBackgroundIsTranslucent: true,
-		// 	TitleBar:                      mac.TitleBarHiddenInset(),
-		// },
 	})
-	
+
 	if err != nil {
 		log.Fatal(err)
 	}

template.json

@@ -1,7 +1,7 @@
 {
   "name": "wails-template-vue",
   "shortname": "vue",
-  "author": "Misitebao <i@misitebao.com>",
-  "description": "A template using vue and vue-router",
+  "author": "Misite Bao <i@misitebao.com>",
+  "description": "Wails template based on Vue ecology",
   "helpurl": "https://github.com/misitebao/wails-template-vue"
 }

wails.tmpl.json

@@ -3,8 +3,11 @@
   "outputfilename": "{{.BinaryName}}",
   "assetdir": "frontend/dist",
   "frontend:install": "npm install",
-  "frontend:dev":"",
   "frontend:build": "npm run build",
+  "frontend:dev:build": "npm run build-only",
+  "frontend:dev:watcher": "npm run dev",
+  "frontend:dev:serverUrl": "auto",
+  "debounceMS": 500,
   "author": {
     "name": "{{.AuthorName}}",
     "email": "{{.AuthorEmail}}"