Webpackを使ってVue.jsのSPA環境を簡単に構築をする

 どうも、こんにちわ。気づけば2019年もあっという間に3月ですね。。ついこの間年が開けたような気もするのですが。。

 さて、今回はWebpackを使用してVue.jsのSPA環境を簡単に構築してみたいと思います。

Webpackと?

 Webpackとは、簡単に言うと複数のファイルを1つのファイルにまとめてくれるツールのようなものです。システム用語的に言うとモジュール(jsやcssファイル)をバンドルしてくれるっていうやつですね。今回のVue.jsだけに限らず複数のjavascriptファイルを1つのjavascriptファイルんびまとめてくれたり、複数のcss等もバンドルしてくれたりします。

Node.jsをインストール

 そんなWebpackを使用して今回はVue.js環境を構築していくのですが、そもそもとしてVue.jsを使用するにはNode.jsをインストールする必要があります。

 Node.jsのインストールに関しては下記の関連記事に記載しているので、そちらを参照してインストールしてみてください。環境が異なる方は検索すれば出てくるので探してみてください。

Webpackを使用してVue.js環境を構築する

 てなわけで、Node.jsがインストールが完了しているという前提で進めていきたいと思います。

 まず、問題なくインストールされているか下記のコードで確認しておきます。

Node.jsのバージョン確認

npmのバージョン確認

 いずれもバージョン名が表示されればインストールは無事完了しているということになります。

Vue-cliをインストール

 無事Node関連のインストールが完了していれば、続いてVueのインストールをします。

 今回は、vue-cliを使用するので下記コードでインストールしていきます。

 インストールしたら下記のコードでバージョンを確認しておきましょう。

Webpackをインストール

 vue-cliのインストールが完了したら続いてWebpackをインストールしていきます。

 Webpackのインストールが始まると色々と聞かれるのでそれぞれ環境に合わせて入力していきます。

質問 内容
Project name プロジェクト名
Project description プロジェクトの概要
Author 制作者
Install vue-router? vue-routerをインストールするか?
Use ESLint to lint your code? ESLintを使用するか?
Set up unit tests Unit Testのセットアップをするか?
Setup e2e tests with Nightwatch? e2e Testの設定をするか?
Should we run ‘npm install’ for you after the project has been created? (recommended) プロジェクト作成後にnpm installを実行するか?

 全ての確認と質問に回答したらインストールが始まり、インストールが完了したら指定したプロジェクト名のディレクトリが生成されていると思うので、そのディレクトリに下記コードで移動します。

 ディレクトリの中身を見れば色々なファイルやディレクトリが出来ていると思いますが、それぞれの説明は今回は割愛します。

開発用サーバーを起動

 最後に該当ディレクトリに移動したら、下記コードで開発用サーバーを起動します。

 問題なければ「http://localhost:8080」にブラウザでアクセスすることでVue.jsのページが表示されていると思います。

 これでWebpackを使用したVue.js環境の構築ができました。

まとめ

 ということで、今回はWebpackを使用してVue.jsのSPA環境を構築する方法を簡単に紹介させていただきました。

Webpackを使えば面倒な設定等をまとめてやってくれ、とても便利なのでVue.jsで構築する必要性がある場合は使用すると良いでしょう。

 てことで、今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活をしたい30代のおじさん。仕事の傍、子育て&趣味に精を出す一児のパパ。普段はプログラム書いたりデザインしたりWeb関連のお仕事をしています。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です