Vue CLIを使ってVue.js環境を作ってみる

はじめに

SPAでWebアプリを作りたいと思ったので、SPAフレームワークの中でも比較的難易度の優しいといわれているVue.jsの環境をVue CLIを使って構築してみる

本記事のゴール

VueCLIで作ったVue.jsのアプリ骨格を起動するまで

環境

Windows 10 64bit
node v19.1.0
Vue CLI 5.0.8
- コマンドラインインタフェース(CLI)でvue.jsの骨格となる環境を簡単に作れる開発ツール
- Vue CLIといいつもGUIでも作れるみたい
  - https://cli.vuejs.org/guide/creating-a-project.html#vue-create

事前準備

Node.jsインストール

Node.jsにアクセスして、自身の環境にあったLTS(推奨版)をダウンロードし、インストールする。

Node.jsインストール確認

コマンドラインからnode -vとnpm -vを入力してバージョンが表示されれば、nodeのインストールは完了。

>node -v
v19.1.0

環境構築手順

Vue CLI インストール

コマンドプロンプトで下のコマンドを実行する

>npm install -g @vue/cli

コマンドプロンプトで下のコマンドを実行してバージョンが表示されればOK。

>vue --version
@vue/cli 5.0.8

プロジェクト作成

初めてのプロジェクトなのでとりあえず名前は「hello_vue」で以下コマンドを実行してプロジェクトを作成していく。

>vue create hello_vue

そうするとまずプリセットを選択するように求められる。つまり、どんな設定でVue.jsプロジェクトの骨格を作りますかーってことを聞かれている。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

選択肢の1つ目は、Vueのバージョンが3系で基本的な Babel + ESLint がセットアップに付属するプリセットになっており、2つ目はVueのバージョンが2系になっているもの。

そして、3つ目がVueのバージョンからBabel, ESLintといったプラグインまでをすべて手動で選択していくことになる。

今回のプロジェクトでは特にこったことをすることもないし、後で追加することもできるので、「Vue 3」選択してみる。

プロジェクトの作成が始まるので完了後に、Vueプロジェクトのベースとなる「hello_vue」フォルダが作成されていればプロジェクトの作成は完了になる。

サンプルアプリの起動

ここまでの手順でサンプルアプリのひな型ができたので、「hello_vue」直下で次のコマンドを実行する。

>npm run serve

そうすると以下のような画面が表示されるので、「http://localhost:8080/」にアクセスしてみる

DONE  Compiled successfully in 6735ms                                                                           8:05:51

  App running at:
  - Local:   <http://localhost:8080/>
  - Network: <http://192.168.68.59:8080/>

  Note that the development build is not optimized.
  To create a production build, run npm run build.

サンプル画面が表示されれば、Vue CLIを使ったVue.js環境構築は完了！！