【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法

Vue.jsの環境構築が簡単にできる『Vue CLI』の使い方を備忘録として残しておきます。

Vue CLIとは？

■コマンドラインでVue.jsの開発環境をセットアップする為のツール
■Vue.jsの開発に必要なツール類を選択方式の質問に答えるだけで、下記のようなツールをまとめてインストールすることができる

スポンサードサーチ

Node.jsのインストール

Node.jsのインストールが必要になるので、まだの方は過去に手順の記事を書いたのでよかったらご参考ください。

Homebrew（nodebrew）経由でnode.jsインストール、gulp環境を構築する方法

yarnのインストール

ターミナルで下記内容を打ち込むことで、Homebrew経由でYarnをインストールすることができます。

yarnをインストールするコマンド

参考：https://yarnpkg.com/ja/docs/install#mac-stable

Homebrewのインストールがまだの場合は、以下のページの『インストール』の下にあるスクリプトをコピペでターミナルに貼り付けることでインストールすることができます。

Homebrewをインストールするコマンド

参考：https://brew.sh/index_ja.html

スポンサードサーチ

Vue CLIをインストール

Vueコマンドがインストールできたか確認

Vue.jsのプロジェクトを作成

vue create 【プロジェクト名】とコマンドを打つことでプロジェクトを作成できます。

ここでは【vue-cli】という名前でプロジェクトを作成してみます。

すると、下記のような確認画面が表示されるので進めていきましょう。

デフォルトのプリセットを使用するか、個別にインストールするかを選べます。

次に、プロジェクトで使用するライブラリを選択します。

デフォルトでBabelとLinterが選択されていますが、ここではRouterとVuex、CSS Pre-processosを選択します。

矢印で移動し、スペースキーで選択することができます。

Routerの動作モードについて質問されるので、エンターを押します。

CSSプリプロセッサの選択画面が表示されるので、Sass/SCSSを選択します。

次に、リンターの初期設定を選択する画面が表示されるので、今回はESLint with error prevention only を選択します。

リント（構文チェック）の実行タイミングが聞かれるので、Lint on saveを選択してコードの保存時にチェックが走るようにします。

各種設定ファイルを分けるか、package.jsonに記述するか質問されるので、そのまま In dedicated config files を選択します。

最後に、これまでの設定内容で保存するか質問されるのでエンターを押します。

以上でプロジェクトの作成は完了です！

作成したプロジェクトに移動し、yarn serve コマンドを打つとサーバーの起動ができます。
今回のサンプルの場合だと、http://localhost:8080/ もしくは、http://192.168.3.2:8080/にアクセスすることでページを表示することができます。

キャプチャのような画面が表示されれば、これでVue CLI を使った開発環境の構築は完了です！