Vue.js について - Vue.js

  • 作成日：
  • 最終更新日：2025/06/25

Vue.js の使う方法

Vue.js の利用用途は大きく分けると2通りの方法があり、SPA（シングルページアプリケーション）と テンプレートエンジン（例: EJS）の中で一部 で使う方法があります。

また、中間的な使い方としてMPA（マルチページアプリケーション）：各ページは別 HTML で、Vueコンポーネントを各ページに埋め込んで使う方法やSSR（サーバーサイドレンダリング）：Nuxt.js（Vueベース）などを使って、SEOや初期描画速度を改善する方法などの使い方があります。

Vue.js を CDN で利用する

CDN でVue.jsを読み込みます。

CDN の読み込み

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vue.js のインストール

@vue/cliのインストールするには、以下のコマンドを実行します。

npm install -g @vue/cli

# バージョンの確認
vue --version

以下のコマンドを実行してプロジェクトを作成します。

vue create プロジェクト名

以下のような表示がされれば、「 Default ([Vue 3] babel, eslint) 」を選択したまま Enter を押します。

 Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

作成したプロジェクトに移動します。以下のコマンドを実行し、プロジェクトを起動します。

npm run serve

ブラウザでhttp://localhost:8080/にアクセスし、ページが表示されるか確認します。

views フォルダと components フォルダの違い

どちらもコンポーネントを格納する場所ですが、views フォルダは主にアプリケーションの各ページを担当するコンポーネントを置きます。

components フォルダは、再利用可能な UI 部品（ボタンや入力フォーム）を置く場所です。