Skip to content

RoyRao2333/template-tauri-vite-react-ts-tailwind

Repository files navigation

TauriVite

template-tauri-vite-react-ts-tailwind

Introduction

A starter Tauri template, but with pnpm monorepo and some recommended configurations:

这是一个 Tauri 启动模板,已经整理成 pnpm monorepo 结构,并带了一些常用的推荐配置:

  • Vite
  • React
  • TypeScript
  • Tailwind CSS
  • Oxc

Install

This project uses pnpm as its package manager. Go check it out if you don't have it locally installed. If you use other package managers like Yarn or npm, you may need to change some scripts in tauri.conf.json and package.json.

这个项目使用 pnpm 作为包管理器。如果本地还没安装,可以先去看一下 pnpm 的安装方式。如果你更习惯用 Yarnnpm,可能需要自己调整 tauri.conf.jsonpackage.json 里的部分脚本。

Tip

The fastest way to use this template is to click the “Use this template” button on the top right of this repository. It will help you create a new repository quickly, and you can make any modifications to your own repository. If you still want to download this template separately, please continue reading.

使用这个模板最快的方式,是点击仓库右上角的 “Use this template” 按钮。它会帮你快速创建一个新仓库,之后你就可以在自己的仓库里自由修改。如果你还是想单独下载一份模板,也可以继续往下看。

Then you need a copy of this repository. You can download a copy as zip but tiged is recommended.

接着你需要把这个仓库复制到本地。你可以直接下载 zip 压缩包,不过更推荐使用 tiged

After you installed tiged, please excute the following command:

安装好 tiged 后,执行下面的命令:

$ cd path-to-save-your-project
$ tiged royrao2333/template-tauri-vite-react-ts-tailwind your-project-name

After getting a copy of this repository, you can use your package manager to install dependecies:

拿到项目代码后,进入项目目录并安装依赖:

$ cd path-to-your-project
$ pnpm install

Rename Project

Before you start development, rename the template placeholders to your own project name and bundle identifier:

开始开发前,建议先把模板里的占位名称改成你自己的项目名称和 bundle identifier:

$ pnpm rename-project --name "My App" --id com.example.my-app
Argument 参数 Required 是否必填 Default 默认值 Example 示例 Description 说明
--name Yes 是 None 无 "My App" The project name you would enter as Project name in create-tauri-app.
也就是你在 create-tauri-app 里会填写的 Project name。它会用于 Tauri 的 productName 和窗口标题;Node.js、pnpm、TypeScript 相关命名会转成 kebab-case;Rust 相关命名会继续使用 create-tauri-app 的 package name 规则。
--id Yes 是 None 无 com.example.my-app The bundle identifier you would enter as Identifier in create-tauri-app.
也就是你在 create-tauri-app 里会填写的 Identifier,会写入 src-tauri/tauri.conf.json
Usage 用途 Command 命令
Rename the template to My App
把模板重命名为 My App
pnpm rename-project --name "My App" --id com.example.my-app

For Node.js, pnpm, and TypeScript related names, this template uses kebab-case. For Rust and Tauri package names, it follows the same normalization rules as create-tauri-app: it is lowercased, :, ;, spaces, and ~ become -, ., /, and \ are removed, leading digits and - are removed, and an empty result falls back to tauri-app.

Node.js、pnpm、TypeScript 相关命名会使用 kebab-case,主要包括 apps/<workspacePackageName>@app/<workspacePackageName> 和根目录 package.json 里的 pnpm --filter。Rust 和 Tauri package name 继续使用 create-tauri-app 的归一化规则:先转成小写;把 :;、空格和 ~ 转成 -;移除 ./\;再移除开头的数字和 -。如果最后结果为空,就使用 tauri-app 作为默认值。

Input --name 输入值 Workspace package name Rust package name Rust lib name
MyProjectHello my-project-hello myprojecthello myprojecthello_lib
myProjectHello my-project-hello myprojecthello myprojecthello_lib
my_project_hello my-project-hello my_project_hello my_project_hello_lib

Usage

Let's run!

现在可以启动项目了:

$ pnpm tauri dev

We've already implemented some recommended configurations in .eslintrc.js, .eslintignore, .prettierrc.json5 and .prettierignore. Feel free to edit them if you have your own preferences.

模板里已经放好了一些推荐配置,比如 .eslintrc.js.eslintignore.prettierrc.json5.prettierignore。如果你有自己的偏好,可以按项目习惯继续调整。

Related Efforts

相关项目:

Contributing

Feel free to dive in! Open an issue or submit PRs.

欢迎一起改进这个模板!你可以提交 issue,也可以直接发 PR。

About

Starter Tauri pnpm monorepo template for Vite + React + TypeScript + TailwindCSS + oxc build-in.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Contributors