iT邦幫忙

2022 iThome 鐵人賽

DAY 2
1
Modern Web

30天學習Tauri系列 第 2

2.準備與安裝環境

  • 分享至 

  • xImage
  •  

預先安裝工具

這邊使用windows為目標平台,來預安裝工具。(其他平台參考官方doc)

1. 安裝Microsoft Visual Studio C++ Build Tools

可以透過Visual Studio Installer來安裝
https://ithelp.ithome.com.tw/upload/images/20220917/20108931sM8KkKwPXG.png

記得這兩個要勾選(C++ build tools and Windows 10 SDK)
https://ithelp.ithome.com.tw/upload/images/20220917/20108931ErPHrTLK9S.png

或是不使用Visual Studio直接下載Build Tools
Microsoft C++ Build Tools Link

2. 安裝rust

前往rust-lang去安裝
Install Rust

https://ithelp.ithome.com.tw/upload/images/20220917/20108931x7X0wxZTmU.png

會安裝三個套件

  • Rustup: 版本管理器
  • Cargo: 套件管理器
  • Rustc: 編譯器

安裝完成後,測試一下套件
> rustup -V

> cargo -V

> rustc -V

https://ithelp.ithome.com.tw/upload/images/20220917/20108931Xrs9wC6MuE.png

3.安裝nodejs

透過 https://nodejs.org/en/ 安裝nodejs

這次練習使用的node版本
https://ithelp.ithome.com.tw/upload/images/20220917/20108931CRmqxUNSKF.png

啟動Tauri專案

1. 開始安裝Tauri專案,這邊我使用pnpm來進行安裝

pnpm create tauri-app

(不是用pnpm的可以使用cargo、yarn或npm)

npm create tauri-app
yarn create tauri-app
cargo install create-tauri-app
cargo create-tauri-app

2. 這邊設定project name、使用package manager以及UI template

https://ithelp.ithome.com.tw/upload/images/20220917/20108931hFol5cbGkC.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931Cbs5LCzxgh.png

cd todo

pnpm install

pnpm tauri dev

https://ithelp.ithome.com.tw/upload/images/20220917/20108931uC4v1xdhOu.png

...

https://ithelp.ithome.com.tw/upload/images/20220917/20108931o6LisD6pdI.png

最後,編譯完成會啟動tauri app
https://ithelp.ithome.com.tw/upload/images/20220917/20108931at9TPmw3sJ.png

或者,你可以透過瀏覽器來開啟觀看
https://ithelp.ithome.com.tw/upload/images/20220917/20108931FffQfIXdc4.png

輸入http://localhost:1420/

https://ithelp.ithome.com.tw/upload/images/20220917/20108931lHQxhZWGKg.png

測試一下,輸入並送出
https://ithelp.ithome.com.tw/upload/images/20220917/201089314NcHxYLuhv.png


接下來,明天會研究Tauri的專案架構,大家明天見


上一篇
1.介紹與前言
下一篇
3.Hello, Tauri
系列文
30天學習Tauri30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言