【vue】vuetify3をインストールしてみた話
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)
? 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",となっていました！
{
"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/cliでvueプロジェクト作ってから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の中身はこんな感じになります。
"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は定義されていないので使用できません。
"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