【Vue.js】VueCLIで環境構築する手順を初心者向けに解説

今回はVueCLIを使った環境構築の方法をまとめました。

この記事で学べる内容は以下のとおりです。

VueCLIを使った環境構築
Vue-router, Vuexのインストールと簡単な設定

今回の記事を終えるとVue + Vue-Router ＋ Vuexの開発環境をセットアップできるので、すぐに開発にとりかかる事ができます。

Vue.jsの基礎知識を学んだばかりの人やとりあえずVue.jsを動かしてみたい人に向けて解説したので、是非チャレンジしてみてください。

また、Vue.jsの体系的な学習法を知りたい方はまずは以下の記事からどうぞ。

VueCLIって何？

まずはVueCLI(Vue Command Line Interface）とは何かを簡単に説明します。

超簡潔に説明すると、Vue.jsとその周辺の色々な機能をひとまとめにしたものです。

VueCLIにはVueをCDNなどで読み込む場合と比べて、以下のような特徴があります。

VueCLIにはVue.jsで開発するための便利ツールがパッケージングされている
npmなどでインストールする必要がある
単一ファイルコンポーネント（.vue）を使って開発できる

実務などで使う場合多くはVueCLIで環境構築するので、今回はこちらでやっていきます。

Vue.jsの環境構築

事前に必要なインストール

今回はnpmを利用するのでnode.jsのインストールが必要です。

下記サイトからインストールできます。

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

左側の推奨版（LTS）を選択します。

ダウンロードしたインストーラを開いてウインドウの手順通りに進めていきます。

最後まで進めてインストールが完了したらインストーラはゴミ箱へ。

全部終わったら、「ターミナル」を開いて、以下のようなコマンドでバージョンが確認できれば、インストール完了です。

（Node.jsを入れればnpmも自動的にインストールされます。）

$ node -v
v9.5.0

$ npm -v
v5.6.0

Vue CLIのインストール

まずはVueCLIをPCにインストールしていきます。（今回はMacOSを想定しています。）

Macの「ターミナル」を開いてコマンドを実行していきます。

まずは以下のコマンドでホームディレクトリに移動して、

$ cd ~

npm を使ってvue cliをインストールしていきます。

$ npm install -g @vue/cli

インストールが完了したら、以下のコマンドで正常にインストールできているか確認してください。

うまくインストールできていると以下のようにバージョンを確認できるようになるはずです。

$ vue --version
@vue/cli 4.4.6

これでVueCLIのインストールは完了です。

vue: command not foundのエラーが出た場合

インストールは無事に終わったのに「vue: command not found」というエラーがでる場合は

PATHが通っていないことが原因である可能性が高いです。

VueCLIをインストールしたファイルまでのパスを通してあげることで解決します。

順番に見ていきましょう。

①VueCLIがどこにインストールされたのか確認する。

最初に行うのは先程インストールしたVueCLIがどこのフォルダにあるのか確認することです。

ターミナル上でnpm install -g @vue/cliを実行したときにズラーッと自動で色々出てきたかと思いますが、その中で以下のような内容を探してください。

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
/Users/fujishimaryo/.npm_global/bin/vue -> /Users/fujishimaryo/.npm_global/lib/node_modules/@vue/cli/bin/vue.js

かなり見づらくて申し訳ないのですが、npm WARN deprecatedの部分を探すと見つけやすいと思います。

注目するのは上の例の下の行の矢印の先の表示です。

今回は、以下のように表示されていますね。

/Users/fujishimaryo/.npm_global/lib/node_modules/@vue/cli/bin/vue.js

これが今回のVueCLIのインストール先です。

末尾の/vue.jsを含めずにコピーしておきましょう。

②.bash_profileを編集してVueCLIまでのパスを通す

次に、.bash_profileという設定ファイルに追記してパスを通していきます。

まずは以下のコマンドでホームディレクトリに移動します。

$ cd ~

そこで以下のコマンドで隠しファイルも含めて全てを表示しましょう。

$ ls -la

そうするとファイルやフォルダの一覧が表示されるかと思います。

そこで.bash_profileというファイルがあることを確認してください。

確認できたら以下のコマンドで.bash_profileを編集します。

$ vi .bash_profile

すると、以下のような画面になります。これはvimと呼ばれるターミナル上で起動できるテキストエディタです。少し操作が特殊なので慎重に行いましょう。

環境によって中身は違うので全く同じである必要はありません。

source ~/.profile
eval "$(rbenv init -)"
export PATH="/Users/ユーザー名/.npm_global/bin:$PATH"
export PATH="/usr/local/opt/php@7.3/bin:$PATH"
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
".bash_profile" 5L, 227C

vimエディタを開けたらまずはキーボードのiを押してINSERTモード（編集モード）にします。

編集モードになったら、最終行（今回の場合は上から5行目）に以下の内容を追記していきます。

export PATH="さっきコピーした物:$PATH"

source ~/.profile
eval "$(rbenv init -)"
export PATH="/Users/fujishimaryo/.npm_global/bin:$PATH"
export PATH="/usr/local/opt/php@7.3/bin:$PATH"
export PATH="/Users/fujishimaryo(人によって異なります)/.npm_global/lib/node_modules/@vue/cli/bin:$PATH" //この行を追記
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
".bash_profile" 5L, 227C

これで.bash_profileの編集は終了です。vimを保存して終了するにはキーボードでesc(エスケープキー)を押した後に、:wqと入力して下さい。

③編集内容を反映させてパスが通ったか確認する

通常のターミナル画面に戻れたら、以下のコマンドを入力して編集内容を反映させます。

$ source　.bash_profile

これでパスが通ったはずなので、確認してみます。

ターミナルで以下のコマンドを入力してちゃんとバージョンが表示されれば成功です。

$ vue --version
@vue/cli 4.4.6

Vueプロジェクトの作成

VueCLIをインストールし終わったら、以下のコマンドでvueプロジェクトを作成できます。

名前は好きなように設定してください。今回はvue-for-blogとしました。

$ vue create vue-for-blog

途中で"? Please pick a preset "などと聞かれると思うので、とりあえず全てdefaultでOKです。（Enterキーで決定できます。）

正常にプロジェクトを作成できたら、以下のコマンドを入力して開発用サーバーを立ち上げていきます。

$ cd vue-for-blog

$ npm run serve

開発サーバーが正常に立ち上がると、以下のような表示でターミナルが止まります。

 DONE  Compiled successfully in 3331ms                                                17:40:26

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.24:8080/

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

上記のような表示がされている場合は正常に開発用サーバーが動いているということです。

（control + Cでサーバーを抜けられますが、開発中は立ち上げっぱなしにしておいてください。）

これで自分のPC上に開発用のサーバーが立ち上がったので、ターミナルに表示されている"http://localhost:8080/"にブラウザでアクセスしてみてください。

下の画像のような画面になっていれば成功です。

デフォルトで表示されているコンポーネントを確認しよう

現時点では上の画像のような画面になっていると思います。

これはVue.jsのデフォルトの画面で/src直下のApp.vueが表示されている状態です。

では実際にApp.vueを編集して確かめてみましょう。

デフォルトのコードを全て削除して以下のように書き換えてみてください。

<template>
  <div>
    <h1>App.vueです</h1>
  </div>
</template>

以下のようになっていればApp.vueに記述した内容がしっかり反映されていることが確認できますね。

Vue-routerのインストールと設定

ここからは先程まで開いていたターミナルはそのままで、テキストエディタで作成したプロジェクトフォルダを開いてください。

今回はVSCodeを使用します。以下の画像のような感じです。

ここまでできたら次はデフォルトでどんなコンポーネントが表示されているのかを確認してみましょう。

開発サーバーを動かしているターミナルとは別に作業用のターミナルがあると便利なので、VScode上で、control + shift + `でターミナルを起動します。

これから先はVSCode上のターミナルで作業しますが、以前開いたターミナル上では開発用サーバーを動かしているのでそのままにしておきましょう。

ここからの作業は全てエディタ上のターミナルで行うことに注意してください。

以下のコマンドでvue-routerをインストールします。

$ npm install vue-router

正常にインストールが終わったらVueアプリでVueRouterを使う設定をしていきます。

まずはプロジェクトの/src直下にrouter.jsという新しいファイルを作成してください。

最初の内容は以下の通りです。最初はVueとVue-routerをimportしてVueプロジェクト全体でVue-Routerを使うという設定をしているだけです。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: []
});

次にこのrouterをsrc/main.jsに追記することで「Vueアプリ全体で使いますよ」という設定をします。

import Vue from 'vue'
import App from './App.vue'
import router from './router'; //追記

Vue.config.productionTip = false

new Vue({
  router, //追記
  render: h => h(App),
}).$mount('#app')

ここまでできたらVue-routerを使う準備は完了しました。

実際に使う場合はrouter.jsのroutesという配列の中にオブジェクト形式でpath(アクセスするURL)とcomponent(そのときに表示したいコンポーネント)の組み合わせを記述していきます。

今回はトップページ・ログインページ・新規登録ページの3つのページを実装する想定で3つのコンポーネントを作成していきましょう。

/src直下にpagesというフォルダを作成し、その中にHome.vue, Login.vue, Register.vueを作成してください。

<template>
  <h1>トップページです</h1>
</template>

<template>
  <h1>ログインページです</h1>
</template>

<template>
  <h1>新規登録ページです</h1>
</template>

作成したコンポーネントをrouter.jsで読み込み、URLと紐付ける作業を行います。

先程も説明したとおり、routesの配列の中にオブジェクト形式で記述していくことでルーティングの設定を行います。

import Vue from 'vue';
import Router from 'vue-router';
import Home from './pages/Home.vue';
import About from './pages/Login.vue';
import About from './pages/Register.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
  ]
});

こうすることで、pathに指定したURLにアクセスすると、componentに指定したコンポーネントが表示されるということですね。

ただ、実はこのままではVue-routerで指定したコンポーネントは画面に表示されません。

というのも、まだ先程確認したようにApp.vueが表示されるようになっています。

そこでアクセスするURLによって先程の3つのコンポーネントが表示されるように、App.vueを以下のように編集します。

<template>
  <div>
    <router-view></router-view> 
  </div>
</template>

<router-view></router-view>というコンポーネントを記述することでvue-routerで設定したコンポーネントが<router-view></router-view>を入れたところに挿入されるイメージです。

App.vueの編集が終わったら、vue-routerで設定したURLにアクセスしてみましょう。

今回は/loginにアクセスしてみます。

以下のように以前作ったLoginコンポーネントが表示されていれば成功です。

/registerにもアクセスして、Registerコンポーネントの内容が表示されることを確認してください。

Vuexのインストール

次に状態管理を行うライブラリであるVuexをインストールします。

正直Vuexに関しては小規模なアプリでは優先度は低いので、お好みでどうぞ。

まずは以下のコマンドでVuexをインストールしていきます。

$ npm install vuex

インストールが完了したら/src直下にstore.jsという新しいファイルを作成してください。

最初に記述する内容は以下のとおりです。

今回も最初はVueとVuexをimportしてVueプロジェクト全体でVuexを使うという設定をしているだけです。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(vuex);

export default new Vuex.Store({
  state: {}
})

こちらもvue-routerのときと同じくmain.jsに追記してVueアプリ全体で使えるように設定していきます。

import Vue from 'vue'
import App from './App.vue'
import router from './router'; 
import store from './store'; //追記

Vue.config.productionTip = false

new Vue({
  router, 
  store, //追記
  render: h => h(App),
}).$mount('#app')