秒でVue3開発環境～ vue-cli 編～

Vue.jsとは？

Vue.jsは「簡単に開発できるJavaScriptのフレームワーク」です。
JavaScriptだけで開発すると、細かく自分の作りたいようにできますが、難易度が高く時間もかかってしまうでしょう。

一方で、JavaScriptのフレームワークを使うと、あらかじめ用意されているものがあるため、簡単に開発することができます。

さらにVue.jsでは、自由度が高いため、「簡単に開発できる」のに「生産性の高い」ものを作ることができます。

こんな人におすすめ

・とりあえずVue.jsでアプリを作ってみたい
・すぐ開発できるようにしたい

開発環境を構築する方法として、2つの方法があります。

cdnを用いる方法とインストールする方法です。

Vue.jsを使うためには、Node.jsのインストールが必要です。

node.jsのページにアクセスし、「推奨版」と「最新の機能」があるので、今回は「推奨版」を使いましょう。

推奨版はLTS（Long Term Support）と呼ばれるように、最新機能よりも長期間セキュリティアップデートが提供されるので、基本はLTSを用いる場合が多いです。

使用許諾契約やインストールする場所の指定など様々な設定方法を聞かれますが、こだわりがなければデフォルトのままで大丈夫です。

コマンドプロンプトでバージョンを確認します。

Windowsでは、検索ボックスで「cmd」とするか「Ctrl」＋「R」で開くことができます。

開けたら、以下のコマンドを打ちます。

node --version

CLIとは「Command Line Interface」のことで、Vue3を開発するために使うツールです。

vueで使うツール「cli」をインストールします
という意味です。

npm install -g @vue/cli

コマンドプロンプトで上記のコマンドを打ちましょう。

cliのインストールでvueから始まるコマンドを使えるようになったので、次にプロジェクトを作成します。

vue create ****

（例）vue create memo_app

「****」に入る部分はプロジェクト名になるので、作りたいプロジェクトの名前を自分で作りましょう。

コマンドを実行すると、以下のようなテキストが表示されます。

プリセットとは、プロジェクトで必要となるプログラムをあらかじめ設定するというものです。

今回はVue3を使うので、画像の水色で示した「Default (Vue3) ([Vue3] babel, eslint)」を選択しましょう。

①プロジェクトに移動

cd ****
(例)　cd memo_app

②サーバー起動

npm run serve

この画面になっていたら成功！