【Vue3】Vueプロジェクトの作成(Windows11)

時間が空いたので、久しぶりにVueのプロジェクトを作成した記録を残します。

公式サイトはこちら👇

Windowsのコマンドプロンプトの実行

下記のコマンドを実行します。

npm create vue@latest

すると、下記のようにいろいろ聞かれるので順次入力をします。

数秒でVueプロジェクトが完了するので、モジュールをインストールします。

npm install

以上で完了です。

Vuetifyを既存のプロジェクトに入れてみる

今度は、UIフレームワークVuetifyを既存のプロジェクトにインストールしていきましょう。
cdコマンドで対象のディレクトリに移動します。

cd frontend

vuetifyをインストールします。

npm i vuetify

packege.jsonにvuetifyが記載されていればインストールは完了です。

package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build"
  },
  "dependencies": {
    "vue": "^3.5.29",
    "vuetify": "^4.0.3"
  },
  "devDependencies": {
    "@tsconfig/node24": "^24.0.4",
    "@types/node": "^24.11.0",
    "@vitejs/plugin-vue": "^6.0.4",
    "@vue/tsconfig": "^0.8.1",
    "npm-run-all2": "^8.0.4",
    "typescript": "~5.9.3",
    "vite": "^7.3.1",
    "vite-plugin-vue-devtools": "^8.0.6",
    "vue-tsc": "^3.2.5"
  },
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  }
}

main.tsを修正する

【修正前】

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

【修正後】

main.ts

// Vuetifyのデフォルトのスタイリングが適用
import 'vuetify/styles'

// VuetifyのcreateVuetify関数をインポート
import { createVuetify } from 'vuetify'

// Vuetifyのコンポーネントが使用できる
import * as components from 'vuetify/components'

// Vuetifyのディレクティブが使用できる
import * as directives from 'vuetify/directives'
import { createApp } from 'vue'
import App from './App.vue'

// インポートしたコンポーネントとディレクティブを設定としてVueインスタンスを生成
const vuetify = createVuetify({
    components,
    directives,
})

createApp(App).use(vuetify).mount('#app');

以上で、既存のVueプロジェクトにVuetifyを導入することができました。

App.vueにVuetifyを導入してみる

ではさっそく、App.vueにVuetifyを導入してみましょう。

App.vue

<template>
  <v-app>
    <v-app-bar-title>Application Bar</v-app-bar-title>
  </v-app>
</template>

npm run devでサーバを起動して下記のように表示されればOKです。

サイト

【個人開発】Vue.jsを触ってみる -フォルダ構成-

【Vuetify3】Vuetifyの導入方法について解説します。

Vuetify公式

「あなたのVueファイルは読みづらい」と文句を言われたくない② -- コンポーネント＆ディレクトリ設計編 --