💻

環境構築 Vue3 + TS + Vuetify3(Beta) + Vite + Vue Router + Tailwind CSS

2022/10/14に公開

タイトル通り Vue3 の環境構築の備忘録です。Yarnを使っているのでnpmの場合は読み替えが必要です。

Vue3 + TypeScript プロジェクトの作成

yarn create vite my-page --template vue-ts

TailwindCSS の追加

yarn add tailwindcss

Vue Router の追加

yarn add vue-router@4

Vuetify3(Beta)の追加

Vue CLI を使用して追加します。CLI のバージョンは 5.0 系である必要があります。4 系ではうまく反映されません。

vue --version
> @vue/cli 5.0.8
vue add vuetify

? Choose a preset:
Vuetify 2 - Configure Vue CLI (advanced)
Vuetify 2 - Vue CLI (recommended)
Vuetify 2 - Prototype (rapid development)
❯ Vuetify 3 - Vite (preview)
Vuetify 3 - Vue CLI (preview)

これで無事、環境構築できました。

Vuetify3-beta

https://github.com/ryos-n/vue3-ts-template

GitHubで編集を提案

Discussion