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ディレクトリが相対パスになるように./にしています。
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で停止