使用Svelte开发Tauri应用

发表于 分类于 阅读次数： Disqus：

初始化项目

SvelteKit初始化

使用以下命令初始化，其中<project-name>是项目名称：

1
npm init svelte <project-name>

配置选项：

  • 是否使用Typescript
  • 是否使用ESlint
  • 是否使用Prettier
  • 是否使用Playwright

image-20220524214148732

1
2
3
4
cd <project-name>
yarn dev
# 或者 
# npm run dev

可以启动http://localhost:3000，表明初始化成功。

Tauri初始化

在项目根目录下，运行如下命令：

1
2
yarn add -D @tauri-apps/cli
yarn add -D @tauri-apps/api

如果使用NPM：

1
npm install -D @tauri-apps/cli

然后在package.json文件中添加：

1
2
3
4
5
{
  "scripts": {
    "tauri": "tauri"
  }
}

然后运行以下命令：

1
2
3
yarn tauri init
# 或者用 npm
# npm run tauri init

会添加以下配置信息：

  • App name (project-name)
  • Window title (project-name)
  • Web assets path (default)
  • Dev server URL (http://localhost:3000)

这时候，会生成src-tauri文件夹。

查看初始化信息

1
yarn tauri info

image-20220524234705873

修改 Tauri启动命令

查看<project-root-folder>/src-tauri/tauri.conf.json文件，在build字段下修改：

1
2
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build"

如果使用NPM则为

1
2
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"

启动项目

1
2
3
yarn tauri dev
# 或者npm
# npm run tauri dev

image-20220524235525793

参考资料

  1. https://medium.com/@cazanator/tauri-with-standard-svelte-or-sveltekit-ad7f103c37e7