インストール
まずはVue CLI 3をグローバルにインストールします。
ターミナルで以下のコマンドを入力してください。
npm, yarnの両方に対応しています。
npm install -g @vue/cliyarn global add @vue/cliインストールが済んだら、念のためバージョンを確認してみましょう。
vue --versionNode.jsが入っていない方はまずインストールしておきましょう。
プロジェクトの作成
新しいプロジェクトを作成するために任意のディレクトリに移動し、以下のコマンドを実行します。
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 pre-processorのタイプを選びます。
ここでは SCSS/SASSを選択しています。
ちなみにPostCSS, Autoprefixer と CSS Modulesは自動で設定されます。
Linterの設定
次にLinterの設定です。
僕の場合はPrettierを使ってコードを自動整形するので、ESLint + Prettierを選択しています。
そのあとに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 serve
無事立ち上がりましたか？
もしもエラーが出てしまったら、一度node_modulesフォルダを削除し、npm installしてみてください。
だいたいこれで直るはずです。
まとめ
Vue CLI 3を使えばアプリケーションのセットアップが本当に10分程度で終わらせる事ができます。
面倒なセットアップに時間をかけず、アプリケーション本体の開発に時間をかけましょう！
