Vue CLI 3をわずか10分でセットアップする方法

わずか10分でセットアップできてしまうVue CLI 3。
そんなVue CLI 3の情報がまだまだ少ないので、超簡単なセットアップの流れを紹介します。

インストール

まずはVue CLI 3をグローバルにインストールします。
ターミナルで以下のコマンドを入力してください。

npm, yarnの両方に対応しています。

npm
npm install -g @vue/cli
Yarn
yarn global add @vue/cli

インストールが済んだら、念のためバージョンを確認してみましょう。

バージョン確認
vue --version
注意
Vue CLIにはNode.jsのバージョン8.9以上が必要です。
Node.jsが入っていない方はまずインストールしておきましょう。

プロジェクトの作成

新しいプロジェクトを作成するために任意のディレクトリに移動し、以下のコマンドを実行します。

vue
vue create my-project

最初にどんなプラグインを一緒にインストールするか聞かれます。

プロジェクトの作成
defaultではBabelとESLintが自動でインストールされます。
しかしこのままではVue Router, Vuex, Sassがインストールされません
自分で設定するのも面倒ですし、この段階で自動でインストールすることをオススメします。

Manually select freaturesからプラグインの選択画面に移動してください。

BabelとESLintで十分という人はdefaultで進めちゃってください。

プラグインの設定

使用プラグインの選択

プラグインの設定

ここで使用するプラグインを選択します。
もちろんそのプロジェクトにふさわしいプラグインを設定するのですが、おすすめはBabel, Router, Vuex, Css Pre-processors, Linter / formatterです。

矢印キーで移動しながら、スペースで選択していきます。

CSSプリプロセッサの選択

CSSプリプロセッサの選択

次にCSS pre-processorのタイプを選びます。
ここでは SCSS/SASSを選択しています。

ちなみにPostCSS, Autoprefixer と CSS Modulesは自動で設定されます。

Linterの設定

Linterの設定

次にLinterの設定です。

僕の場合はPrettierを使ってコードを自動整形するので、ESLint + Prettierを選択しています。

Linterの設定2
そのあとにLint on saveを選択して、保存時に自動的にLintが走るようにしています。

コンフィグの設定

コンフィグの設定

設定をどこに書くかを指定します。

今回は個別にconfigファイルを生成するようにIn dedicated config filesを選択しました。

package.jsonに直接記入したい場合はIn package.jsonを選んでください。

プリセットの設定

プリセットの設定

最後に、「今回選択した設定を保存するか?」と聞かれるので、y(yes)n(no)を選択しましょう。

y(yes)を選択した場合はプリセットとしてすぐに利用できます。
同じ設定で今後アプリケーションを作成するのであれば便利なので利用しましょう。

これでプロジェクトが自動で生成されます。
ここまで10分程度で完了です。
vuexやvue-router, Scss の設定を自分でする必要がないのが本当にラクで嬉しいですね。

プロジェクトを立ち上げてみる

プロジェクトの作成は30秒ほどで終わります。
作成が終わったら、以下のコマンドで立ち上げてみましょう。

npm run
npm run serve

プロジェクトを立ち上げ

無事立ち上がりましたか?

もしもエラーが出てしまったら、一度node_modulesフォルダを削除し、npm installしてみてください。
だいたいこれで直るはずです。

まとめ

Vue CLI 3を使えばアプリケーションのセットアップが本当に10分程度で終わらせる事ができます。

面倒なセットアップに時間をかけず、アプリケーション本体の開発に時間をかけましょう!