Vue CLIでVue.jsの開発環境をサクッと構築する（Vuex/VueRouter/SFC）

Vue.js は、小規模から大規模まで段階的に導入していける柔軟性を持ったプログレッシブフレームワークです。

簡単なものをさらっと書く程度であれば HTML 内の script タグ内で済みますが、アプリケーションの成長に伴った複雑化や 、SPA を構築しようと思うとそれでは難しくなってきます。

今回は、Vue CLI を使って Vue.js の開発環境を構築していきます。

Contents

1. 開発環境
2. Vue CLI
   1. Vue CLI でできること
   2. インストール
3. SFC をサクッと動かす
4. プロジェクトを作成する
   1. 1. プリセットの選択
   2. 2. プロジェクトに必要な機能の選択
   3. 3. HTML5 History モードの選択
   4. 4. CSS プリプロセッサの選択
   5. 5. ESLint プリセットの選択
   6. 6. 追加の lint 機能オプションの選択
   7. 7. ユニットテストツールの選択
   8. 8. E2E テストツールの選択
   9. 9. 設定ファイル設置箇所の選択
   10. 10. プリセット保存の選択
   11. インストール開始

開発環境

Mac のローカルで作業を行います。 ベースは HTML/CSS/JavaScript なので、細かい制約はありません。

尚、今回は npm を使って入れていくので、node.js をインストールしておいてください。

ここで取り扱う Vue CLI のバージョンは 3.x です。

Vue CLI

Vue CLI は、Vue.js でアプリケーションを構築する際に、開発環境をセットアップしてくれたりする公式のコマンドラインツールです。

Vue CLI
https://cli.vuejs.org/

Vue CLI でできること

• プロジェクト作成
• 開発サーバ稼働
• 開発用にバックエンドの API サーバ役をひとまず召喚
• トランスパイル
• ビルド
• コンパイル
• 単体テスト
• 静的コード解析
• E2E テスト

思いつく限りで上げましたが（おそらくまだある）、これで大抵の事はできてしまいます。 厳密には裏側で webpack が動いていて、必要なツールは都度調達して的な部分はありますが、細かいことは抜きにして、SFC（単一ファイルコンポーネント）を使ったモジュール化や、SPA の構築等、一定規模のアプリケーションを構築するにはとても便利なツールです。

インストール

Vue CLI をインストールします。バージョンは３系です。依存モジュールも合わせてインストールします。

# Vue CLI インストール
npm install -g @vue/cli @vue/cli-service-global

# インストール完了後、バージョン確認
vue --version
3.7.0

cli-service-global は、SFC をとりあえず動かしてみるのに使用するので導入しています。

SFC をサクッと動かす

Vue CLI のインストールが完了したら、まずはサクッと SFC（単一ファイルコンポーネント）を動かしてみます。

ファイル sample.vue を作成し、以下を定義します。

/sample.vue

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
    data () {
        return {
            message: 'Hello, world!'
        }
    }
}
</script>

<style>
  p {
    margin: 20px;
  }
</style>

作成したら、以下のコマンドを叩きます。

# sample.vue が設置されている場所まで移動
cd /path/to/dir

# sample.vue 実行
vue serve sample.vue --open

コンパイルが終わるとブラウザが立ち上がり結果が確認できます。

自動でブラウザが開かない場合は、以下のどちらかでアクセスすると確認できます。

• http://localhost:8080/
• http://192.168.2.108:8080/

開発サーバを停止する時は ctrl + c です。

もう一つ例を。今度は複数の SFC を組み合わせます。

/hoge.vue

<template>
  <div id="hoge">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
    name: "hoge",
    data () {
        return {
            msg: 'hoge'
        }
    }
}
</script>

<style scoped>
  p {
    color: red;
  }
</style>

/root.vue

<template>
  <div>
    <p>{{ message }}</p>
    <hoge/>
  </div>
</template>

<script>
import hoge from'./hoge'

export default {
    components: {
      hoge
    },

    data () {
        return {
            message: 'Hello, world!'
        }
    }
}
</script>

<style scoped>
  p {
    color: blue;
  }
</style>

<style>
  p {
    margin: 20px;
  }
</style>

作成したら、再度コマンドを叩いて開発サーバを起動します。

# root.vue が設置されている場所まで移動
cd /path/to/dir

# root.vue 実行
vue serve root.vue --open

ブラウザで確認します。

このようにして、Vue CLI を導入すると、簡単に Vue.js の開発環境を構築する事ができます。

プロジェクトを作成する

次は、プロジェクトを作成して、ある程度のアプリケーションを構築する為の開発環境を整えます。

プロジェクト（ルート）を作成したい場所へ移動し、以下のコマンドを叩く事で、対話型でプロジェクトを作成していく事ができます。

# プロジェクトの作成を開始する
vue create [PROJECT_NAME]

今回は、プロジェクト名を sample-app として作成していきます。

# プロジェクトを作成する場所へ移動
cd /path/to/dir

# プロジェクトの作成を開始する
vue create sample-app

以下、対話形式で作成する内容を決定していく流れになります。

1. プリセットの選択

Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

default (babel, eslint) デフォルトプリセット（Babel + ESLint） Manually select features 手動で機能を選択する キーボードの上下キーでどちらかを選択します

Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
❯ Manually select features

デフォルトプリセットを選択すると、それだけでセットアップが完了します。

今回は手動選択で進めます。 選択したら、[Enter]キーを押下して先に進みます。

2. プロジェクトに必要な機能の選択

次は、プロジェクトに必要な機能の選択を行います。 以下の選択画面になります。

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle al
l, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

[上下]キー カーソル移動 [space]キー カーソルのある項目を選択・選択解除 [a]キー すべて選択・選択解除 [i]キー 現在の状態を反転させる 今回は以下の選択で進めます。

• ◉ Babel
• ◯ TypeScript
• ◯ Progressive Web App (PWA) Support
• ◉ Router
• ◉ Vuex
• ◉ CSS Pre-processors
• ◉ Linter / Formatter
• ◉ Unit Testing
• ◉ E2E Testing

選択したら、[Enter]キーを押下して先に進みます。

3. HTML5 History モードの選択

導入機能に Vue Router を選択した場合に表示されます

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, L
inter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in produ
ction) (Y/n)

Vue Router を hash モードで使う（デフォルト）か、history モードで使うかを選択できます。

[公式]HTML5 History モード

今回はデモなので、デフォルトの hash モードで進めます（ [n]キー -> [Enter]キー）

4. CSS プリプロセッサの選択

次は、CSS pre-processor の選択です。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by defau
lt): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

使用する CSS プリプロセッサを選択します。 （PostCSS, Autoprefixer, CSS モジュールはデフォルトでサポートされます。）

• Sass/SCSS (with dart-sass)
• Sass/SCSS (with node-sass)
• Less
• Stylus

選択したら、[Enter]ボタン押下で先に進みます。

5. ESLint プリセットの選択

次は、ESLint のプリセットを選択します。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

ESLint with error prevention

only エラー防止のみ

ESLint + Airbnb config

Airbnb設定

ESLint + Standard config

標準設定

ESLint + Prettier

Prettier 併用設定

今回は「エラー防止のみ」を選択して次へ進みます。

6. 追加の lint 機能オプションの選択

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Lint on save

保存時に Lint 実行

Lint and fix on commit

コミット時に Lint 実行

7. ユニットテストツールの選択

単体テストのツールを選択します。

? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
  Jest

8. E2E テストツールの選択

何を用いて E2E テストを行うか選択します。

? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only)
  Nightwatch (Selenium-based)

9. 設定ファイル設置箇所の選択

Babel ・ PostCSS ・ ESLint などの設定をどこに設置するかを選択します。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

In dedicated config files

専用の設定ファイル内

In package.json

package.json 内

今回は「専用の設定ファイル内」を選択します。

10. プリセット保存の選択

ここまで選択してきたことをプリセットとして保存しておくかを選択します。

? Save this as a preset for future projects? (y/N)

ちなみにプリセットとして保存する場合に[y]キーを押下すると、プリセット名を聞かれるので入力します。

? Save preset as:

こうしておくことで、次回の vue create 時にプリセットとして選択する事ができます。

Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
❯ sample-app-preset (vue-router, vuex, dart-sass, babel, eslint, unit-mocha, e2e-nightwatch)
  default (babel, eslint)
  Manually select features

インストール開始

ここまで進めるとインストールが開始されます。

インストールが完了すると、以下が出力されます。

Successfully created project sample-app.
Get started with the following commands:

 $ cd sample-app
 $ npm run serve

表示の通り、プロジェクトルートへ移動し、開発サーバを起動させます。

# プロジェクトルートへ移動
cd sample-app

# 開発サーバ起動
npm run serve

起動が完了すると、以下のように表示されます。

 DONE  Compiled successfully in 3439ms


 App running at:
 - Local:   http\://localhost:8080/
 - Network: http://192.168.2.108:8080/

 Note that the development build is not optimized.
 To create a production build, run npm run build.

ブラウザから http://localhost:8080/ もしくは http://192.168.2.108:8080/ へアクセスします。

プロジェクトが作成され、開発サーバの起動を確認できました。

尚、ctrl + c で開発サーバを停止できます。

まとめ

以上で作業は完了です。 作成されたプロジェクトでアプリケーションの開発を始める事ができます。

Vue CLI を用いると、簡単に開発環境を整える事ができるので便利です。是非試してみてください。
サンプルソース