Shikong/wails-template-vue
1
0
Fork 0
mirror of https://github.com/misitebao/wails-template-vue synced 2025-02-24 05:42:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update README

Browse Source
This commit is contained in:
Misite Bao 2022-10-02 22:19:00 +08:00
parent 1f5dab3184
commit c24bb38ac4
2 changed files with 98 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
.github/README.md vendored
View File

@ -5,7 +5,7 @@
</p> </p>
<p align="center"> <p align="center">
A Wails template based on Vue and Vue-Router Wails template based on Vue ecology
</p> </p>
<p align="center"> <p align="center">
@ -35,125 +35,97 @@
</strong> </strong>
</div> </div>
<span id="nav-2"></span>
## Table of Contents ## Table of Contents
<details> <details>
<summary>Click me to Open/Close the directory listing</summary> <summary>Click me to Open/Close the directory listing</summary>
- [Table of Contents](#nav-2) - [Table of Contents](#table-of-contents)
- [Introductions](#nav-3) - [Introductions](#introductions)
- [Official Website](#nav-3-1) - [Official Website](#official-website)
- [Background](#nav-3-2) - [Background](#background)
- [Graphic Demo](#nav-4) - [Graphic Demo](#graphic-demo)
- [Features](#nav-5) - [Features](#features)
- [Architecture](#nav-6) - [Architecture](#architecture)
- [Getting Started](#nav-7) - [Getting Started](#getting-started)
- [Maintainer](#nav-8) - [Maintainer](#maintainer)
- [Contributors](#nav-9) - [Contributors](#contributors)
- [Community Exchange](#nav-10) - [Community Exchange](#community-exchange)
- [Part Of Users](#nav-11) - [Part Of Users](#part-of-users)
- [Release History](CHANGELOG.md) - [Changelog](#changelog)
- [Donators](#nav-12) - [Donators](#donators)
- [Sponsors](#nav-13) - [Sponsors](#sponsors)
- [Special Thanks](#nav-14) - [Special Thanks](#special-thanks)
- [License](#nav-15) - [License](#license)
</details> </details>
<span id="nav-3"></span>
## Introductions ## Introductions
The wails-template-vue template is a Vue template that supports [Wails](https://github.com/wailsapp/wails) programs and provides Router and i18n functions by default. 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.
<span id="nav-3-1"></span>
<!-- ### Official Website -->
<span id="nav-3-2"></span>
### Background ### 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. 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.
<span id="nav-4"></span>
## Graphic Demo ## 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) [![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)
<span id="nav-5"></span>
## Features ## Features
- Compatible with Windows, MacOS, Linux platforms - Single page routing support
- Support single page routing and i18n. - Built-in internationalization
- Built-in Sass preprocessor. - Built-in bright and dark themes
- A consistent UI experience across platforms(Comes with JetbrainsMono font package). - Built-in FontAwesome icon library
- Comes with a complete API example(Currently under development and testing...). - Integrated TailwindCSS
- Support JavaScript and TypeScript - Integrate TypeScript
- Perfect for Windows, MacOS, Linux platforms
<span id="nav-6"></span>
<!-- ## Architecture -->
<span id="nav-7"></span>
## Getting Started ## Getting Started
### New Project **New Project**:
``` ```
wails init -n [Your Appname] -t https://github.com/misitebao/wails-template-vue wails init -n <Your Appname> -t https://github.com/misitebao/wails-template-vue[@version]
``` ```
flag description: flag description:
- n - The name of the application to be created - 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 - 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
After the project is created, the JavaScript template is used by default. You can change the value of the `"frontend:build"` field in the `wails.json` file to `"npm run build -w ts"` to use the TypeScript template. **Reference document**:
Note: In order to support TypeScript templates under the existing functions, the front-end part uses the NPM workspace function, so the NPM version must be `>=7.0.0`, please run `npm -v` to check your NPM version.
### Reference document
The front-end part uses Vue Vue-Router and Vue-I18N: 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 - 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://next.router.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. - 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. - 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🤞. Then you can refer to the official [Wails document](https://wails.io) to start developing your application🤞.
<span id="nav-8"></span>
## Maintainer ## Maintainer
Thanks to the maintainers of these projects: 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> <a href="https://github.com/misitebao">
<img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/>
<details> </a>
<summary>Click me to Open/Close the maintainer listing</summary>
- [Misitebao](https://github.com/misitebao) - Project author, full stack engineer.
</details>
<span id="nav-9"></span>
## Contributors ## Contributors
Thank you to all the contributors who participated in the development of wails-template-vue. [Contributors](https://github.com/misitebao/wails-template-vue/graphs/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/eighteenzheng">
<a href="https://github.com/daoif"><img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/></a> <img src="https://github.com/eighteenzheng.png" width="40" height="40" alt="eighteenzheng" title="eighteenzheng"/>
</a>
<span id="nav-10"></span> <a href="https://github.com/daoif">
<img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/>
</a>
## Community Exchange ## Community Exchange
@ -165,26 +137,14 @@ 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 - <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 ## 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) - [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. - [Hayate](https://github.com/misitebao/hayate) - Windows application installation boot program implemented using Wails.
<span id="nav-12"></span> ## Changelog
<!-- ## Donators --> Check out the changelog [here](./CHANGELOG.md).
<span id="nav-13"></span>
<!-- ## Sponsors -->
<span id="nav-14"></span>
<!-- ## Special Thanks -->
<span id="nav-15"></span>
## License ## License

143
.github/README.zh-Hans.md vendored
View File

@ -5,7 +5,7 @@
</p> </p>
<p align="center"> <p align="center">
基于Vue和Vue-Router的Wails模板 基于 Vue 生态的 Wails 模板
</p> </p>
<p align="center"> <p align="center">
@ -35,125 +35,98 @@
</strong> </strong>
</div> </div>
<span id="nav-2"></span>
## 内容目录 ## 内容目录
<details> <details>
<summary>点我 打开/关闭 目录列表</summary> <summary>点我 打开/关闭 目录列表</summary>
- [内容目录](#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) - [社区交流](#社区交流)
- [发布记录](CHANGELOG.md) - [部分用户](#部分用户)
- [捐赠者](#nav-12) - [更新日志](#更新日志)
- [赞助商](#nav-13) - [捐赠者](#捐赠者)
- [特别感谢](#nav-14) - [赞助商](#赞助商)
- [版权许可](#nav-15) - [特别感谢](#特别感谢)
- [许可证](#许可证)
</details> </details>
<span id="nav-3"></span>
## 项目介绍 ## 项目介绍
wails-template-vue 模板是一个支持 [Wails](https://github.com/wailsapp/wails) 应用的 Vue 模板，默认提供路由和国际化功能。 本项目是一个基于 [Vue](https://vuejs.org/) 生态的 [Wails](https://github.com/wailsapp/wails) 模板，使用此项目可以快速开发您的应用。
<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/wails-template-vue@main/.github/preview.zh-Hans.png "点击查看gif演示")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.gif) [![演示截图](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)
<span id="nav-5"></span> ## 功能
## 功能特色 - 单页路由支持
- 内置国际化
- 内置明亮、暗黑主题
- 内置 FontAwesome 图标库
- 集成 TailwindCSS
- 集成 TypeScript
- 完美适配 Windows、MacOS、Linux 平台
- 兼容 Windows、MacOS、Linux 平台 ## 快速入门
- 支持单页路由和国际化
- 内置 Sass 预处理器
- 跨平台一致的 UI 体验（内置 JetbrainsMono 字体包）
- 附带完整的 API 示例（目前正在开发测试中。。。）
- 支持 JavaScript 和 TypeScript
<span id="nav-6"></span> **新建项目**:
<!-- ## 架构 -->
<span id="nav-7"></span>
## 新手入门
### 新建项目
``` ```
wails init -n [你的应用名称] -t https://github.com/misitebao/wails-template-vue wails init -n <你的应用名称> -t https://github.com/misitebao/wails-template-vue[@version]
``` ```
参数说明： 参数说明：
- n - 将要创建的应用名称 - n - 将要创建的应用名称
- t - 模板名称，支持内置模板名称以及超链接形式的第三方模板 - t - 模板名称，支持内置模板名称以及超链接形式的第三方模板
- @version - 指定特定 Git Tag 的版本，如果不指定版本，则默认使用主分支的代码
项目创建以后，默认是使用 JavaScript 模板，你可以将`wails.json`文件中的`"frontend:build"`字段值修改为`"npm run build -w ts"`来使用 TypeScript 模板。 **参考文档**：
注意：为了在现有的功能下支持 TypeScript 模板，前端部分使用了 NPM 的工作区功能，所以 NPM 的版本必须`>=7.0.0`,请自行运行`npm -v`查看你的 NPM 版本。 前端部分使用了 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 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/)。 - Vue-I18N - 使用 Vue-I18N 9.x 版本，具体使用方式请参考[Vue-I18N 官方文档](https://vue-i18n.intlify.dev/)。
- TypeScript - 具体使用方式请参考[TypeScript 官网文档](https://www.typescriptlang.org/)。 - TypeScript - 具体使用方式请参考[TypeScript 官方文档](https://www.typescriptlang.org/)。
- TailwindCSS - 具体使用方式请参考[TailwindCSS 官方文档](https://tailwindcss.com/)
然后您就可以参考 [Wails 官方文档](https://wails.io)开始开发您的应用啦 🤞! 然后您就可以参考 [Wails 官方文档](https://wails.io)开始开发您的应用啦 🤞!
<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> <a href="https://github.com/misitebao">
<img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/>
<details> </a>
<summary>点我 打开/关闭 维护者列表</summary>
- [米司特包](https://github.com/misitebao) - 项目作者，全栈工程师。
</details>
<span id="nav-9"></span>
## 贡献者 ## 贡献者
感谢所有参与 wails-template-vue 开发的贡献者。[贡献者列表](https://github.com/misitebao/wails-template-vue/graphs/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/eighteenzheng">
<a href="https://github.com/daoif"><img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/></a> <img src="https://github.com/eighteenzheng.png" width="40" height="40" alt="eighteenzheng" title="eighteenzheng"/>
</a>
<span id="nav-10"></span> <a href="https://github.com/daoif">
<img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/>
</a>
## 社区交流 ## 社区交流
@ -165,27 +138,15 @@ wails init -n [你的应用名称] -t https://github.com/misitebao/wails-templat
- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ 群：1067173054</a> - QQ 中文社区交流群 - <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) - [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 应用安装引导程序。 - [Hayate](https://github.com/misitebao/hayate) - 使用 Wails 实现的 Windows 应用安装引导程序。
<span id="nav-12"></span> ## 更新日志
<!-- ## 捐赠者 --> 更新日志请查看[这里](./CHANGELOG.md)。
<span id="nav-13"></span> ## 许可证
<!-- ## 赞助商 -->
<span id="nav-14"></span>
<!-- ## 特别感谢 -->
<span id="nav-15"></span>
## 版权许可
[License MIT](../LICENSE) [License MIT](../LICENSE)