저는 vite+tauri+vue의 조합으로 프로젝트를 진행하려고 합니다.


프로젝트 생성

npm create tauri-app@latest
  • 설치를 시도하면 아래의 것들을 입력 및 선택해야 합니다.
  • 프로젝트명
  • 식별자 (기본으로 쓰셔도 됩니다.)
  • 프론트엔드 언어, 패키지 매니저, UI 템플릿 선택
    • 일단 제가 세팅한 값을 적어두겠습니다.
    • frontend language: TypeScript / JavaScript
    • package manager: npm
    • UI template: Vue
    • UI flavor: TypeScript



cd project-folder
npm i
  • 그 다음에 프로젝트로 이동 후 패키지를 설치해줍니다.



npm run tauri dev
  • 마지막으로 개발모드로 실행해줍니다. 그러면 이런 화면이 저희를 반겨줍니다.



Tailwindcss 적용

npm install tailwindcss @tailwindcss/vite




import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
  • 그 다음으로는 vite.config.ts 설정 파일에 tailwindcss 플러그인을 넣어줍니다.



@import "tailwindcss";
  • css 파일 하나 만들어서 tailwindcss를 import 해줍니다.
  • 저는 src/assets/styles/global.css 파일 하나 만들었습니다.



import { createApp } from "vue";
import App from "./App.vue";
import './assets/styles/global.css';

createApp(App).mount("#app");
  • main.ts에서 import를 해줍니다. tailwindcss의 기본 css로 덮어씌워집니다.



<style>
@reference "assets/styles/global.css";
h1 {
	@apply text-4xl font-bold;
}
</style>
  • 마지막으로 사용할 vue 컴포넌트의 style에서 만들었던 css를 참조하게 만듭니다.
  • 그러면 @apply 키워드를 이용해서 tailwindcss 문법을 그대로 사용할 수 있게 됩니다.
  • 물론 class를 이용해서 css를 적용할 수 있습니다!



페이지

페이지 이동은 vue 라우터를 이용할 겁니다. 기존에 웹페이지를 만들던 것과 다른게 없습니다.


npm install vue-router@5
  • Vue Router 라이브러리를 먼저 설치해줍니다.


<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>
  • 공식 문서에서 사용 예시를 가져왔습니다.
  • 여기에서는 hashchange 이벤트를 감지해서 페이지를 바꾸는 식으로 처리합니다.



유용할 것 같은 플러그인

tauri에 다양한 플러그인을 제공하더라고요. 제가 쓸 것 같은 플러그인만 여기에 몇 개 적어둡니다.

  • Dialog: 파일 읽기 및 저장을 위한 대화 상자 기능입니다.
  • Os Information: 운영체제 정보를 알려줍니다.
  • Notifications: 알림 기능을 제공합니다.
  • Process: 현재 프로세스에 접근하기 위한 api를 제공합니다.
  • Shell: 시스템 쉘에 접근할 수 있게 해줍니다. 자식 프로세스 생성도 가능하게 해줍니다.
  • Store: 영구적 키-값 저장소 기능을 제공합니다. (비동기 처리)
  • Updater: 업데이트 기능을 제공합니다.