mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-18 18:09:30 +08:00
98 lines
3.2 KiB
Plaintext
98 lines
3.2 KiB
Plaintext
# 模板
|
||
|
||
Wails 从预先创建的模板生成项目。 在 v1 中，这是一组难以维护的项目，这些项目可能会过时。 在 v2 中，为了增强社区的能力，为模板添加了一些新功能：
|
||
|
||
- 能够从 [远程模板](../reference/cli#远程模板) 生成项目
|
||
- 帮助创建自己的模板的工具
|
||
|
||
## 创建模板
|
||
|
||
要创建模板，您可以使用 `wails generate template` 命令。 要生成默认模板，请运行：
|
||
|
||
`wails generate template -name mytemplate`
|
||
|
||
这将使用默认文件创建“mytemplate”目录：
|
||
|
||
```shell title=mytemplate/
|
||
.
|
||
|-- NEXTSTEPS.md
|
||
|-- README.md
|
||
|-- app.tmpl.go
|
||
|-- frontend
|
||
| `-- dist
|
||
| |-- assets
|
||
| | |-- fonts
|
||
| | | |-- OFL.txt
|
||
| | | `-- nunito-v16-latin-regular.woff2
|
||
| | `-- images
|
||
| | `-- logo-dark.svg
|
||
| |-- index.html
|
||
| |-- main.css
|
||
| `-- main.js
|
||
|-- go.mod.tmpl
|
||
|-- main.tmpl.go
|
||
|-- template.json
|
||
`-- wails.tmpl.json
|
||
```
|
||
|
||
### 模板概述
|
||
|
||
默认模板包含以下文件和目录：
|
||
|
||
| 文件名 / 目录 | 描述 |
|
||
| --------------- | ----------------- |
|
||
| NEXTSTEPS.md | 有关如何完成模板的说明 |
|
||
| README.md | 随模板发布的 README |
|
||
| app.tmpl.go | `app.go` 模板文件 |
|
||
| frontend/ | 包含前端资源的目录 |
|
||
| go.mod.tmpl | `go.mod` 模板文件 |
|
||
| main.tmpl.go | `main.go` 模板文件 |
|
||
| template.json | 模板元数据 |
|
||
| wails.tmpl.json | `wails.json` 模板文件 |
|
||
|
||
此时，建议按照 `NEXTSTEPS.md` 中的步骤操作。
|
||
|
||
## 从现有项目创建模板
|
||
|
||
通过在生成模板时将路径传递给项目，可以从现有的前端项目创建模板。 我们现在将介绍如何创建 Vue 3 模板：
|
||
|
||
- 安装 vue cli： `npm install -g @vue/cli`
|
||
- 创建默认项目：`vue create vue3-base`
|
||
- 选择 `Default (Vue 3) ([Vue 3] babel, eslint)`
|
||
- 项目生成后，运行：
|
||
|
||
```shell
|
||
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
|
||
Extracting base template files...
|
||
Migrating existing project files to frontend directory...
|
||
Updating package.json data...
|
||
Renaming package.json -> package.tmpl.json...
|
||
Updating package-lock.json data...
|
||
Renaming package-lock.json -> package-lock.tmpl.json...
|
||
```
|
||
|
||
- 现在可以按照 `NEXTSTEPS.md` 中指定的方式定制模板。
|
||
- 一旦文件准备完毕，就可以通过运行命令来测试它：`wails init -n my-vue3-project -t .\wails-vue3-template\`
|
||
- 要测试新项目，请运行：`cd my-vue3-project` then `wails build`
|
||
- 项目编译完成后，运行它：`.\build\bin\my-vue3-project.exe`
|
||
- 您应该有了一个功能齐全的 Vue3 应用程序：
|
||
|
||
```mdx-code-block
|
||
<div className="text--center">
|
||
<img
|
||
src={require("@site/static/img/vue3-template.png").default}
|
||
width="50%"
|
||
/>
|
||
</div>
|
||
```
|
||
|
||
## 发布模板
|
||
|
||
发布模板只是将文件推送到 GitHub。 鼓励以下最佳实践：
|
||
|
||
- 从前端目录中删除任何不需要的文件和目录（例如：.git）
|
||
- 确保 `template.json` 完整，尤其是 `helpurl`
|
||
- 将文件推送到 GitHub
|
||
- 在 [社区模板](../community/templates) 页面上创建 PR
|
||
- 在 [模板公告](https://github.com/wailsapp/wails/discussions/825) 讨论板上发布模板
|