Vue CLIでVue.jsの開発環境をセットアップするまでの流れ

今回はVue CLIを使って、Vue.jsの開発環境を作るまでの手順をメモしておきます。

Vue CLIはVue.jsの開発環境を作ってくれる公式のコマンドラインツール

cli.vuejs.org

Vue CLI

https://cli.vuejs.org

🛠️ Standard Tooling for Vue.js Development

Vue CLIはVue.jsでアプリケーションを構築するときに、必要となるツールを簡単にセットアップしてくれる公式のコマンドラインツールです。

これを使うことで、1から自分でインストールして回る必要がなくなり、プロジェクトの作成が簡単にできます。

Vue CLIとYarnのグローバルインストール

まずは必要となる「Vue CLI」のインストールと「Yarn（インストールしていない人）」をインストールします。

Yarnに関しては過去に記事にしているので、詳細はそちらをご覧ください。
npmよりも高速なパッケージマネージャーだと考えてもらえればOKです。

Webrandum

JavaScriptパッケージマネージャーをnpmからYarnへ移行しました

https://webrandum.net/yarn

JavaScriptのパッケージマネージャーといえば「npm」が有名です。npmを使用している人も多いとは思いますが、Facebookが開発した「Yarn」というパッケージマネージャーが非常によく、1度使うとnpmに戻れなくなりました。本記事ではYarnの魅力と導入方法、簡単な使い方まで一気に解説していきます。Yarnの魅力そもそも自分は少し前からYarnを知ってはいたものの、npmに慣れていたため使う気はあまりありませんでした。しかし試しに一度使ってみると、そのインストールの早さに驚きました。他にもメリットとしては、npmを使ったことがあ...

YarnはなくてもVue CLIは使えますが、一度に大量のパッケージをインストールすることになるので、npmよりも軽いYarnを使うのがオススメです。

下記のコマンドでYarnをインストールします。

$ npm install -g yarn

つぎに下記コマンドでVue CLIをインストールします（せっかくなのでYarnコマンドでインストール）。

$ yarn global add @vue/cli

Vue CLIでプロジェクトの作成

次にVue CLIでプロジェクトの作成をします。
先ほどVue CLIをインストールしたので、Vue CLIのコマンドが使えるようになっているはずです。

下記のコマンドでプロジェクトの作成ができます。

$ vue create プロジェクト名

今回はプロジェクト名は「sample-project」にして、vue create sample-projectで実行します。

プロジェクトの設定

コマンドを実行すると下記のような画面が表示されます。

これは、最初にVue CLIのプリセットを選択する画面で、いくつかデフォルトで入っていますが、今回はすべて自分で選択できる「manually」を選択します。
（上下矢印キーで移動、enterで確定）

すると、使用する機能を選択する画面になります。
使用したい機能を矢印キーで選択して、spaceで使用するかどうかの切り替えをして、すべて選択し終えたらenterで次のステップへ進みます。

あとは選択した機能に合わせてそれぞれ細かい内容を聞かれるので、それぞれ選択して答えていきます。

最終てきに「Save this as a preset for future projects?（今後のためにこの設定をプリセットとして保存する？）」と聞かれるので、保存しておきたい場合は「y」を入力してenterしてプリセット名を決めて保存できます。

次回以降は最初のプリセット画面に、保存したプリセット名が表示されるので、それを選択すれば今回の設定が全て適用されてプロジェクトが作成されます。

保存が不要な場合は「n」を入力してenterします。

必要なパッケージがインストールされるので、完了されるので待ちます。

下記の画面になれば、インストール完了です。

プロジェクトの起動

プロジェクトフォルダが作成されているので、cdコマンドで下の階層のプロジェクトへ移動して、yarn serveでプロジェクトを起動します。

$ cd プロジェクト名
$ yarn serve

URLが表示されるので、そのURLへアクセス（ターミナル上をcommand + クリックでURLを開けます）すればページが表示されるはずです。

これで開発環境のセットアップは完了です。
停止したい場合はcontrol + Cで停止できます。