RitoLabo

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

  • 公開:
  • カテゴリ: JavaScript Vue.js
  • タグ: JavaScript,Vue,VueCLI,VueRouter,Vuex

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

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

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

アジェンダ
  1. 開発環境
  2. Vue CLI
    1. Vue CLIでできること
    2. インストール
  3. SFCをサクッと動かす
  4. プロジェクトを作成する
    1. プリセットの選択
    2. プロジェクトに必要な機能の選択
    3. HTML5 History モードの選択
    4. CSSプリプロセッサの選択
    5. ESLintプリセットの選択
    6. 追加のlint機能オプションの選択
    7. ユニットテストツールの選択
    8. E2Eテストツールの選択
    9. 設定ファイル設置箇所の選択
    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をインストールします。バージョンは3系です。依存モジュールも合わせてインストールします。

# 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

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

sample.vue実行結果

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

  • 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

ブラウザで確認します。

root.vue実行結果

このようにして、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を用いると、簡単に開発環境を整える事ができるので便利です。是非試してみてください。
サンプルソース