シングルページアプリケーション - Vue.js

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

Vue CLI でアプリの作成

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

vue create spa

プロジェクト作成種類を選択します。

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

使用プラグイン等を選択します。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Vue.jsバージョンを選択します。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

Vue Router で history モードを使用するかどうかを選択します。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

構文チェック機能等選択します。

  • ESLint with error preventation only ：構文チェック機能（推奨されるルールをチェック）
  • ESLLint + Airbnb config：構文チェック機能（コミュニティによって定義されているルールをチェック）
  • ESLLint + Standard config：構文チェック機能（コミュニティによって定義されているルールをチェック、Airbnbとはルールが違う）
  • ESLint + Prettier：整形ルールにのっとり自動修正される
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

Lint機能の追加設定します。

Lint（リント）機能とは、プログラムのコードを静的に解析して、文法ミスやスタイルの問題、潜在的なバグなどを検出するツールや仕組みのことです。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

Babel、PostCSS、ESLintなどの設定をどこでするか選択します。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

設定ファイル名を入力します。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: router-sample

設定ファイル名を入力し Enter を押すとプロジェクトの作成が始まります。

Vue CLI v5.0.8
✨  Creating project in F:\ex5\spa.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

プロジェクトが作成されれば、プロジェクトのディレクトリに移動し、「 http://localhost:8080 」にブラウザでアクセスします。

ディレクトリ構成

  • example
    • node_module
    • public
      • favicon.ico
      • index.html
    • src
      • assets
      • components
        • HelloWorld.vue
      • router
        • index.js
        • AboutView.vue
        • HomeView.vue
      • App.vue
      • main.js
    • .browserslistrc
    • .editorconfig
    • .eslintrc.js
    • .gitignore
    • babel.config.js
    • jsconfig.json
    • package-lock.json
    • package.json
    • README.md
    • vue.config.js
ファイル名・ディレクトリ名 説明
public/index.html div#id が定義されているファイル
vue.config.js Vue CLI を使ったプロジェクトの設定ファイル
src/components ディレクトリ 再利用可能な UI 部品（ボタンや入力フォーム）の設置場所
src/views ディレクトリ アプリケーションの各ページを担当するコンポーネントの設置場所
src/App.vue Vue CLI で作るプロジェクトのデフォルトのルートコンポーネント

vue/no-multiple-template-root

[vue/no-multiple-template-root]
The template root requires exactly one element.
eslint-plugin-vue

上記は、Vue 2 のテンプレート内で複数のルート要素が存在する場合に出る ESLint の警告です。template のルート要素は 必ず1つ でなければなりません。複数のトップレベル要素があるとエラーになります。

Vue 3 では複数のルート要素が許可されています。しかし、ESLint のルール（vue/no-multiple-template-root）が残っていると Vue 3でもこのエラーが出る場合があります。

Vue.js におけるルート要素（root element）とは、template タグの 中にある一番外側の（トップレベルの）HTML要素のことです。

Vue はテンプレートの中身をコンポーネントとして JavaScript で管理しますが、HTMLの構造がツリーになっていないと正しく仮想DOMに変換できないため、Vue 2 では明確な「1つのルート」が必要でした。

<template>
  <h1>タイトル</h1>     <!-- これが1つ目のルート要素 -->
  <p>説明文です。</p>   <!-- これが2つ目 → × -->
</template>

上記がtemplate の中に複数のルート要素がある状態のため、Vue2 ではエラーになります。

以下の場合は、template タグ配下のルート要素は div タグのみのためエラーになりません。

<template>
  <div>
    <h1>タイトル</h1>
    <p>説明文です。</p>
  </div>
</template>

アプリのビルド

以下のコマンドを実行するとdistディレクトリの中に成果物が作成されます。

npm run build

dist ディレクトリの中身を全部コピーしサーバーに配置するとアプリが利用できます。