创建Wails项目

项目生成​

现在 CLI 已安装，您可以使用 wails init 命令生成一个新项目。

选择您最喜欢的框架：

• Svelte
• React
• Vue
• Preact
• Lit
• Vanilla

使用 JavaScript 生成一个 Vue 项目:
 

wails init -n myproject -t vue

如果您更愿意使用 TypeScript:

wails init -n myproject -t vue-ts

---

还有提供不同功能和框架的 社区模板。

要查看其他可用选项，您可以运行 wails init -help。 更多详细信息可以在 初始化命令 中找到。

项目布局​

Wails 项目有以下布局：

.
├── build/
│   ├── appicon.png
│   ├── darwin/
│   └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json

项目结构概要​

• /main.go - 主应用
• /frontend/ - 前端项目文件
• /build/ - 项目构建目录
• /build/appicon.png - 应用程序图标
• /build/darwin/ - Mac 特定的项目文件
• /build/windows/ - Windows 特定的项目文件
• /wails.json - 项目配置
• /go.mod - Go module 文件
• /go.sum - Go module 校验文件

frontend 目录没有特定于 Wails 的内容，可以是您选择的任何前端项目。

build 目录在构建过程中使用。 这些文件可以修改以自定义您的构建。 如果从 build 目录中删除文件，将重新生成默认版本。

go.mod 中的默认模块名称是“changeme”。 您应该将其更改为更合适的内容。

模板

此页面用作社区支持的模板列表。 请提交一个包含您的模板的 PR（点击页面底部的 编辑此页）。 要构建您自己的模板，请参考 模板 指南。

要使用这些模板，请运行 wails init -n "您的项目名" -t [下面的链接[@版本]]

如果不带版本后缀，默认使用的是主分支代码模板。 如果带有版本后缀，则使用该版本对应标签的代码模板。

示例：wails init -n "Your Project Name" -t https://github.com/misitebao/wails-template-vue

注意

Wails 项目不维护也不对第 3 方模板负责

如果您不确定某个模板，请检查 package.json 和 wails.json 中安装的模块和运行的脚本。

Vue​

• wails-template-vue - 基于 Vue 生态的 Wails 模板（集成 TypeScript、黑暗主题、国际化、单页路由、TailwindCSS）
• wails-vite-vue-ts - 使用 Vite 的 Vue 3 TypeScript（以及添加功能的说明）
• wails-vite-vue-the-works - 使用 Vite, Vuex, Vue Router, Sass, 和 ESLint + Prettier 的 Vue 3 TypeScript
• wails-template-quasar-js - 使用 JavaScript + Quasar V2（Vue 3, Vite, Sass, Pinia, ESLint, Prettier）的模板
• wails-template-quasar-ts - 使用 TypeScript + Quasar V2（Vue 3、Vite、Sass、Pinia、ESLint、Prettier、带 <script setup> 的Composition API）的模板

Angular​

• wails-angular-template - 带有 TypeScript, Sass, 热重载, 代码拆分和 i18n 的 Angular

React​

• wails-react-template - 基于 reactjs 的模板
• wails-react-template - 基于 React 并支持实时开发模式的轻量级模板
• wails-vite-react-ts - 基于 Vite + React + TypeScript 的模板
• wails-vite-react-ts-tailwind-template - 一个 React + TypeScript + Vite + TailwindCSS 模板

Svelte​

• wails-svelte-template - 基于 Svelte 的模板
• wails-vite-svelte-template - 使用 Svelte 和 Vite 的模板
• wails-vite-svelte-tailwind-template - 使用 Svelte 和 Vite 和 TailwindCSS v3 的模板
• wails-template-nextjs - 基于 Next.js + TypeScript 的模板

Elm​

• wails-elm-template - 使用函数式编程和 快速 的热重载设置开发您的 GUI 应用程序 🎉 🚀
• wails-template-elm-tailwind - 结合 Elm + Tailwind CSS + Wails 的力量 💪 ！ 支持热重载。

纯 JavaScript (Vanilla)​

• wails-pure-js-template - 一个只有基本 JavaScript、HTML 和 CSS 的模板