JavaScript

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

はじめに

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

本記事のゴール

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

環境

事前準備

Node.jsインストール

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

Node.jsインストール確認

コマンドラインからnode -vnpm -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環境構築は完了!!

まとめ

環境構築というとつまりながらやるイメージがあったけど、cliとそのプラグインのおかげで特に詰まるところなく、一気に環境構築までできた。

あくまでここはスタートラインなのでこれからどんどんカスタマイズしていきたいと思う。