💡

【vue】vuetify3をインストールしてみた話

2023/01/04に公開

vuetifyがvueのなんなのか未だによくわかっていませんが・・・
UIフレームワークなのでしょうか。

ともあれ、タイトルの通りvuetify3がリリースされたっぽいので、インストールして初期ページを表示させてみましょう!

環境

  • Windows(10)
  • Vue(3)
    • Vuetify(3)
  • yarn(1.22.11)

事前準備

  • くじけぬ心

手順

フロントプロジェクトの準備

1. vuetifyプロジェクトの作成

公式サイトの手順に沿ってコマンドプロンプトを開いて下記コマンドを実行します。

yarn create vuetify

※最後vuetifyはプロジェクト名じゃなかった

2. 事前設定

こんな感じの画面になるので、任意で設定していってください。

プロジェクト名
ZZZ:folder>yarn create vuetify
yarn create v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vuetify@1.0.6" with binaries:
      - create-vuetify
[############] 12/12
Vuetify.js - Material Component Framework for Vue

? Project name: » vuetify-project
プリセット
? Which preset would you like to install? » - Use arrow-keys. Return to submit.
    Default (Vuetify)
>   Base (Vuetify, VueRouter)
    Essentials (Vuetify, VueRouter, Pinia)
    Custom (Choose your features)
TypeScriptを使うかどうか
? Use TypeScript? » No / Yes
パッケージ管理
? Would you like to install dependencies with yarn, npm, or pnpm? » - Use arrow-keys. Return to submit.
>   yarn
    npm
    pnpm
    none

インストールまでしばし待つ・・・。

3. 起動と確認

3-1. 起動

作成したプロジェクトへ移動し、ローカル環境を立ち上げてみましょう。

cd {プロジェクト名}
yarn dev

※上記はyarnで起動した例

すると↓こんな感じの画面になります。

  VITE v3.2.5  ready in 378 ms

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

3-2. 確認

指定のアドレスにアクセスすると・・・

見事アクセスできました!

念のため・・・
私はこれだけでVuetify3になったか不安だったので、プロジェクト直下にあるpackage.jsonを確認しました。
dependenciesの中に"vue": "^3.2.13","vuetify": "^3.0.0",となっていました!

package.json
{
  "name": "vuetify-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vue-router": "^4.0.0",
    "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",
    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.55.0",
    "typescript": "^4.0.0",
    "vite": "^3.0.9",
    "vite-plugin-vuetify": "^1.0.0-alpha.12",
    "vue-tsc": "^1.0.9"
  }
}

追記

2023/02/02

ずっとハマってたvuetify3のpreview

vue/cliのせいだ

"せいだ"っていうのも、良くないですかね笑
今までpreviewにしかならん・・・って思っていたのは、vue/clivueプロジェクト作ってからvuetifyをInstallしてたのが原因だったみたいです。

こんな感じです。

>vue -V
@vue/cli 5.0.8

>vue create vue-sample
>vue add vuetify
~中略~
? Choose a preset: (Use arrow keys)
  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)

Vuetify 3 - Vite (preview)を選択してVuetify追加したら
package.jsonの中身はこんな感じになります。

package.json
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vuetify": "npm:@vuetify/nightly@next",
    "webfontloader": "^1.0.0"
  },
local起動させるのはdevなのかserveなのか

ローカルサーバを起動する際、ずっとnpm run serveと打ち込んでいて、
今回Vuetify3いれたときに上記コマンド起動しないのはなんでやねん。を調べました。

package.jsonの記載によるみたいです。

vue/cliでプロジェクト作成したらpackage.jsonは↓になります。

  "scripts": {
    "serve": "vite preview",
    "build": "vite build",
    "lint": "vue-cli-service lint",
    "dev": "vite"
  },

なので、yarn serveだったり、yarn dev
npm run serveだったり、npm run devが使えます。

本記事に記載したコマンドでは

yarn create vuetify

package.jsonは↓になり、serveは定義されていないので使用できません。

package.json
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },

あとがき

また一つ、かしこくなりました。
そして、何かを忘れた気もします・・・笑

いつだ、いつだと思っていたVuetify3ですがリリースされていました。
npm createからやった時は、ずっとpreviewってなっていたのに・・・。
yarnでやったら解決するとは何故なのか。
npmのバージョンとか上げて年内トライしようと思います。

公式もリリースになってますた。

参考記事

Discussion