Zenn
🙄

Vue3.js(Tauri vue3 vuetity) から始めるディスクトップアプリ＃1 [初めてのプロジェクト作成]

2022/11/25に公開
TypeScript
Vue.js
Vue 3
Vite
Tauri
tech

はじめに

Windows用アプリを作る場合、自分は、VB/C＃(.net)やＣ＋＋だと思っていました。実際にC＃(Wpf)でアプリ制作をすすめていたのですが、wpfのUIコントロールの拡張を現代風のUIデザインで仕上げるためには、膨大な時間を要します。また、UIMAやUWFなどなど、乱立する規格に分けわからなくなります。結局　WinFromでいいじゃんとなり、ふと気が付くのです。作りたいのはこんなんじゃない！！！

Windows用アプリを作成するなら、Electron と Tauriが視野に入ります。
Electronは、情報量多いので検索が得意であれば困らないと思いますが、Tauriは、2022/7 にVer1.0となったばかりでいろいろ困りそうなので、記事にしながら進めます。

Step0　Tauri導入にあたり

本記事は、windows11にTauriを導入します。

https://tauri.app/v1/guides/getting-started/setup/
2022.11　現在本家によると下記のパターンがあるようです。
　・HTML/CSS/JavaScript
・React フレームワーク　Next.js
・SvelteKitフロントエンド フレームワーク
・フロントエンド ビルド ツールVite
・既存 Web プロジェクト

慣れないうちは、HTML/CSS/JavaScriptと記載ありますが、自分はVite（Vue3)を使って構築します。

Step1　Rust の導入

Microsoft Visual Studio C++の導入

まず最初に、Microsoft Visual Studio C++ ビルド ツールをインストールします。
下記のオプションを選択します。

WebView2の導入

WebView2 は Windows11 にプリインストールされていますので、自分は不要。
Windows10 の方は下記を参考にしてください。
https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section

Rust インストーラー

下記より、必要な資材をダウンロードしてください。
https://www.rust-lang.org/tools/install

ダウンロードした、rustup-init.exeを実行してください。

”1”を入力してリターンで基本OKです。
お疲れさまでした。

Step2　ViteAPPのスタートアップ

プロジェクト設定

下記のサイトを見ながら進めました。
https://tauri.app/v1/guides/getting-started/setup/

自分の環境は下記を使っています。
・VisualStadioCode　
・bash(Git for Windows)

保存したいフォルダに移動して下記のコマンドを投入します。

$ yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@3.2.1" with binaries:
      - create-vite
      - cva
√ Project name: ... myProject
√ Package name: ... myproject
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\Project\tauri\myProject...

Done. Now run:

  cd myProject
  yarn
  yarn dev

Done in 122.32s.

Project name:　好きなプロジェクト名を入力してください。今回は　myProjectです。
Package name: 好きなパッケージ名を入力してください。今回は　myProjectです。
Select a framework: » vanillaがデフォルトです。今回は、Vueを選択しました。
Select a variant: » TypeScriptを選択しました。お好みで。

viteの起動

  cd myProject
  yarn
  yarn dev

と順番に入力します。

$ cd myProject/
$ yarn
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 9.21s.

$ yarn dev
yarn run v1.22.19
$ vite

  VITE v3.2.4  ready in 249 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

http://localhost:5173/
をクリック起動（+control)すると下記のようにブラウザに表示されればひとまず成功

この動作が通常のViteです。

Step3　Tauriの導入

Tauriの導入の準備

上記で作成したプロジェクトにTauriを導入する準備をします。
vite.config.ts の修正

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' //ここ①

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]　　//ここ②
})

上記を下記のように修正します。①②をVueを指定しています。他のフレームワークの場合ここをチェックしてください。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'   //ここ①

export default defineConfig({
　// vue plugin-vue ここ②
  plugins: [vue()],
  // prevent vite from obscuring rust errors
  clearScreen: false,
  // Tauri expects a fixed port, fail if that port is not available
  server: {
    strictPort: true,
  },
  // to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
  // `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
  // env variables
  envPrefix: ['VITE_', 'TAURI_'],
  build: {
    // Tauri supports es2021
    target: ['es2021', 'chrome100', 'safari13'],
    // don't minify for debug builds
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    // produce sourcemaps for debug builds
    sourcemap: !!process.env.TAURI_DEBUG,
  },
})

環境変数のあたりでエラーとなりますが、気にしないで。パッケージが足りていないですが、支障ないので先に進めます。

Tauriの導入

yarn add -D @tauri-apps/cli　コマンドを投入します。

$ yarn add -D @tauri-apps/cli
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ @tauri-apps/cli@1.2.1
info All dependencies
├─ @tauri-apps/cli-win32-x64-msvc@1.2.1
└─ @tauri-apps/cli@1.2.1
Done in 3.54s.

次にTauriのプロジェクト作成

$ yarn tauri init
yarn run v1.22.19
$ D:\Project\tauri\myProject\node_modules\.bin\tauri init
✔ What is your app name? · myproject
✔ What should the window title be? · myproject
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:5173
✔ What is your frontend dev command? · yarn dev
✔ What is your frontend build command? · yarn build
Done in 154.08s.

・What is your app name?　プロジェクト名を指定しました。
・What should the window title be? プロジェクト名を指定しました。
・Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist　保存先です。
✔ What is the url of your dev server? · http://localhost:5173　viteのアドレスを指定
✔ What is your frontend dev command? · yarn dev　 yarnに書き換え
✔ What is your frontend build command? · yarn build　　yarnに書き換え

Tauriによる起動

yarn tauri dev　を投入します。

$ yarn tauri dev
yarn run v1.22.19
$ D:\Project\tauri\myProject\node_modules\.bin\tauri dev
     Running BeforeDevCommand (`yarn dev`)
$ vite

  VITE v3.2.4  ready in 248 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
        Info Watching D:\Project\tauri\myProject\src-tauri for changes...
    Updating crates.io index
  Downloaded wry v0.22.5
  Downloaded 1 crate (2.1 MB) in 1.29s
   Compiling proc-macro2 v1.0.47
   Compiling unicode-ident v1.0.5
   ～ 略　～
   Compiling tauri-macros v1.2.1
   Compiling app v0.1.0 (D:\Project\tauri\myProject\src-tauri)
   Compiling webview2-com v0.19.1
    Finished dev [unoptimized + debuginfo] target(s) in 1m 00s

Step4　Tauri起動

起動したかな？


お疲れさまでした。

あとがき

参考にしていただければ幸いです。誤った記述などあれば教えてください。

Discussion