どうも、こんにちわ。気づけば2019年もあっという間に3月ですね。。ついこの間年が開けたような気もするのですが。。
さて、今回はWebpackを使用してVue.jsのSPA環境を簡単に構築してみたいと思います。
Webpackと？
Webpackとは、簡単に言うと複数のファイルを１つのファイルにまとめてくれるツールのようなものです。システム用語的に言うとモジュール（jsやcssファイル）をバンドルしてくれるっていうやつですね。今回のVue.jsだけに限らず複数のjavascriptファイルを１つのjavascriptファイルんびまとめてくれたり、複数のcss等もバンドルしてくれたりします。
Node.jsをインストール
そんなWebpackを使用して今回はVue.js環境を構築していくのですが、そもそもとしてVue.jsを使用するにはNode.jsをインストールする必要があります。
Node.jsのインストールに関しては下記の関連記事に記載しているので、そちらを参照してインストールしてみてください。環境が異なる方は検索すれば出てくるので探してみてください。
Webpackを使用してVue.js環境を構築する
てなわけで、Node.jsがインストールが完了しているという前提で進めていきたいと思います。
まず、問題なくインストールされているか下記のコードで確認しておきます。
Node.jsのバージョン確認
$ node -v
v10.12.0
npmのバージョン確認
$ npm -v
6.4.1
いずれもバージョン名が表示されればインストールは無事完了しているということになります。
Vue-cliをインストール
無事Node関連のインストールが完了していれば、続いてVueのインストールをします。
今回は、vue-cliを使用するので下記コードでインストールしていきます。
$ npm install --global vue-cli
インストールしたら下記のコードでバージョンを確認しておきましょう。
$ vue -V
2.9.6
Webpackをインストール
vue-cliのインストールが完了したら続いてWebpackをインストールしていきます。
$ vue init 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を実行するか？ |
全ての確認と質問に回答したらインストールが始まり、インストールが完了したら指定したプロジェクト名のディレクトリが生成されていると思うので、そのディレクトリに下記コードで移動します。
$ cd プロジェクト名
ディレクトリの中身を見れば色々なファイルやディレクトリが出来ていると思いますが、それぞれの説明は今回は割愛します。
開発用サーバーを起動
最後に該当ディレクトリに移動したら、下記コードで開発用サーバーを起動します。
$ npm run dev
# ========================
（中略）
# ========================
Compiled successfully in 3093ms
Your application is running here: http://localhost:8080
問題なければ「http://localhost:8080」にブラウザでアクセスすることでVue.jsのページが表示されていると思います。
これでWebpackを使用したVue.js環境の構築ができました。
まとめ
ということで、今回はWebpackを使用してVue.jsのSPA環境を構築する方法を簡単に紹介させていただきました。
Webpackを使えば面倒な設定等をまとめてやってくれ、とても便利なのでVue.jsで構築する必要性がある場合は使用すると良いでしょう。
てことで、今回はここまで！また！
