JavaScript

【VueによるSPA構築】Vue CLIを使った開発環境構築方法

課題を持った人
課題を持った人
仕事でVue.jsによるシングルページアプリケーションを作ることになったんだけど、どうやって作ればいいのだろう。

こういった要望に答えます。

この記事の筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。

Node.jsのインストール

Vue.jsでシングルページアプリケーション構築する際、様々なツールやライブラリをインストールする必要があります。インストールにはnpmというパッケージ管理ツールを使うと便利で、npmを利用するには、Node.js(サーバサイドのJavaScript環境)をお使いのパソコンにインストールすることが必要です。

早速、Node.jsをインストールしていきましょう。

Node.jsの公式サイトを開きます。
以下のような画面が表示されます(お使いのOSやブラウザによって若干異なります)。
「推奨版」のボタンをクリックして、インストーラをダウンロードします。

ダウンロードが完了したら、インストーラを実行します。
インストールが完了したら、コマンドラインツール(Windowsならコマンドプロンプト、Macならターミナル、Ubuntsuなら端末)を立ち上げて、Node.jsとnpmのバージョンを確認してみましょう。バージョンが表示されれば正常にインストールされています。

Vue CLIのインストール

npmを利用できるようになったら、Vue CLIをインストールしていきます。Vue CLIをインストールすることでコマンドラインツールからシングルページアプリケーションの雛形を作成できるようになります。

以下のコマンドでVue CLIをインストールします。

インストールが完了したら、バージョン確認のコマンドで正常にインストールされていることを確認しましょう。

プロジェクトの作成

まずは任意のディレクトリに移動します。今回はホームディレクトリ直下を指定します。「cd」はChange Directoryの略です。「~/」はホームディレクトリを表します。
※ディレクトリの指定方法はお使いのOSによって異なりますので、うまくいかない場合は、Googleで「cd Windows」などと検索してみてください。

ここからはVue.jsによるシングルページアプリケーションの雛形を作成していきます。

画面に質問が表示されるので答えていきます。初めての方は以下の指示通り選択していって、慣れてきたらカスタマイズしてみると良いと思います。

質問:Please pick a preset
「Manually select features」を選択します。こちらを選択することで任意のプラグインやCSSプリプロセッサを選択していくことができます。

質問:Check the features needed for your project
「Babel」「Router」「CSS Pre-processors」「Linter / Formatter」を選択します。

質問:Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
「n」と回答します。

質問:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
「Sass/SCSS」を選択します。

質問:Pick a linter / formatter config: (Use arrow keys)
「ESLint + Standard config」を選択します。

質問:Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
「Lint on save」を選択します。

質問:Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
「In package.json」を選択します。

質問:Save this as a preset for future projects? (y/N)
「n」と回答します。

「Successfully created project my-project.」と表示されればVue CLIによるシングルページアプリケーションの雛形作成は成功です。

シングルページアプリケーションの雛形をブラウザで表示する

まずはディレクトリを移動します。

次にローカルサーバを立ち上げます。以下のコマンドを実行します。

以下のような画面が表示されましたか?

画面に表示されているとおり、「http://localhost:8080」というURLにローカルサーバが稼働しています。ブラウザを開いて表示してみましょう。

上の画面が表示されましたか?このWebサイトは既にシングルページアプリケーションとして構築されています。上の画面内の赤で囲んだところがナビゲーションになっています。「About」を押してみてください。すこし分かりづらいかもしれませんが、ナビゲーション以外が切り替わることが確認できるはずです。

以上でシングルページアプリケーションの雛形は作成できました。でも、これだけだとまだシングルページアプリケーションぽくないですよね。例えば、ここに画面切り替え時にフェードイン効果をつけたりするとよりシングルページアプリケーションぽくなっていきます。

以下の記事では、今回作った雛形を編集して、よりシングルページアプリケーションらしくしていく方法を解説しています。