Chapter 02

Vuetifyのインストール

sosa
sosa
2022.09.28に更新
このチャプターの目次

Vue-CLIのインストール

ターミナルで以下を入力してEnter
PaizaCloudの場合
左にあるターミナルアイコンをクリックしてください。

npm install -g @vue/cli

プロジェクトを作成(frontendは任意の名前です。)

vue create frontend

以下のように出たとき[Vue 2]にカーソルキーで変更してEnterします。
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
❯ Default ([Vue 2] babel, eslint)
Manually select features

この次もuse yeanではなくuse npmにしてEnter
PaizaCloudの場合
frontend/vue.config.jsというファイルがあります。このファイルを以下のように変更しないと立ち上げたときInvalid Host headerと出ます。(devServer: {allowedHosts: "all",
},の部分、注意、最終的なビルド前には消した方がいい

publicPathの設定も後で楽なのでしておきます。
ビルドしたときjsやcssディレクトリが相対パスになるように./にしています。

frontend/vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: "all",
  },
  publicPath: './',
})

Vutifyをインストールすると自動的にVutify用のコードtranspileDependencies: ['vuetify']などが追加されます。なのでVutifyインストール後に、vue.config.jsを見ると記述が変わります。
ディレクトリを移動してVuetifyをインストールします。

cd frontend
vue add vuetify

Still proceed? (y/N)yでEnter

? Choose a preset: Default (recommended)はそのままEnter

動作確認

npm run serve

ブラウザでhttp://localhost:8080/にアクセス。
PaizaCloudの場合
左の8080アイコンをクリック。
Vuetifyの画面が表示されればインストール成功です。
PaizaCloudの場合
ctrl+Cで停止