🔖

Vue3.js(Tauri vue3 vuetity) から始めるディスクトップアプリ＃6 [Vuetify3の導入をしようその２]

2022/12/02に公開

Rust

はじめに

前回　Vuetify3をあとから導入しましたが、今回はプロジェクト作成時より導入したいと思います。
ほぼ通常のプロジェクト作成と同じなので、異なる部分だけ紹介します。

Step2　ViteAPPのスタートアップ (Vuetify3)

異なるのはStep2です。
yarn create vite　→　yarn create vuetify
と変更します。

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

√ Project name: ... myvuetify
√ Use TypeScript? ... No / Yes
√ Would you like to install dependencies with yarn, npm, or pnpm? » yarn

◌ Generating scaffold...
◌ Installing dependencies with 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 22.21s.

myvuetify has been generated at D:\Project\tauri\myvuetify

Discord community: https://community.vuetifyjs.com
Github: https://github.com/vuetifyjs/vuetify
Support Vuetify: https://github.com/sponsors/johnleider
Done in 72.75s.

この後は、Step３を実施してください。（Tauri導入）

2022.12.02 現在下記のような導入になっていると思います

package.json

{
  "name": "myvuetify",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "roboto-fontface": "*",
    "vue": "^3.2.38",
    "vuetify": "^3.0.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.9",
    "@types/webfontloader": "^1.6.35",
    "@vitejs/plugin-vue": "^3.0.3",
    "typescript": "^4.0.0",
    "vite": "^3.0.9",
    "vite-plugin-vuetify": "^1.0.0-alpha.12",
    "vue-tsc": "^1.0.9"
  }
}

こっちの方が簡単でした。

はじめに

Step2 ViteAPPのスタートアップ (Vuetify3)

Discussion

Step2　ViteAPPのスタートアップ (Vuetify3)