Vue を使ってみる

Vue CLI

Vue には、CLIツールが提供されており、それが Vue CLI です。

Vue CLI を使うことで、CLI で Vue プロジェクトの作成等の操作が可能です。
プロジェクト作成時には、Vue のバージョン、npm or yarn どちらを使うか、 Babel や Lintツール 等の設定もできます。

Vue CLI で Vue を始める

Vue CLI を使って、Vue プロジェクトを作成していきます。

Vue CLI インストール

まずは、npmを使って、Vue CLI をインストールします。
-gオプションを使うことで、グローバルにインストールします。
(プロジェクト外でも、コマンド利用可能)

$ npm install -g @vue/cli

Vue CLI でプロジェクト作成

Vue CLI を使ってプロジェクトを作成するのはとても簡単です。
作業ディレクトリに移動して、vue createコマンドを利用するだけです。
vue createコマンドは引数で、ディレクトリを指定できます。

$ vue create .

実行すると、いろいろな設定をしていきます。
質問が繰り返されるので適当に答えていけばOKです。
今回は、Default (Vue 3) としました。
パッケージマネージャーには、npmを選択しています。

Vue CLI v4.5.13
? Generate project in current directory? Yes

Vue CLI v4.5.13
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: NPM

Vue CLI v4.5.13
✨  Creating project in /app.
⚙️  Installing CLI plugins. This might take a while...

プロジェクトの作成が完了すると、次のようなメッセージが表示されます。

🎉  Successfully created project app.
👉  Get started with the following commands:

 $ npm run serve

http://localhost:8080/

ここまでで、プロジェクトの作成が完了しました。

ブラウザから、http://localhost:8080/にアクセスすると、↓のような画面が表示されます。

終わり