プログラミングどうも、こんにちわ。気づけば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のインストールに関しては下記の関連記事に記載しているので、そちらを参照してインストールしてみてください。環境が異なる方は検索すれば出てくるので探してみてください。関連記事XserverにNode.jsをインストールしてみるこんにちわ、まだ娘からもらった風邪が完治しないHashiです。最近Node.js周りを勉強がてらいじっ...Webpackを使用してVue.js環境を構築するてなわけで、Node.jsがインストールが完了しているという前提で進めていきたいと思います。問題なくインストールされているか下記のコードで確認しておきます。-v6.4.1いずれもバージョン名が表示されればインストールは無事完了しているということになります。Vue-cliをインストール無事Node関連のインストールが完了していれば、続いてVueのインストールをします。今回は、vue-cliを使用するので下記コードでインストールしていきます。vue-cliインストールしたら下記のコードでバージョンを確認しておきましょう。-V2.9.6Webpackをインストールvue-cliのインストールが完了したら続いてWebpackをインストールしていきます。プロジェクト名Webpackのインストールが始まると色々と聞かれるのでそれぞれ環境に合わせて入力していきます。installを実行するか?全ての確認と質問に回答したらインストールが始まり、インストールが完了したら指定したプロジェクト名のディレクトリが生成されていると思うので、そのディレクトリに下記コードで移動します。プロジェクト名ディレクトリの中身を見れば色々なファイルやディレクトリが出来ていると思いますが、それぞれの説明は今回は割愛します。最後に該当ディレクトリに移動したら、下記コードで開発用サーバーを起動します。http://localhost:8080問題なければ「http://localhost:8080」にブラウザでアクセスすることでVue.jsのページが表示されていると思います。これでWebpackを使用したVue.js環境の構築ができました。まとめということで、今回はWebpackを使用してVue.jsのSPA環境を構築する方法を簡単に紹介させていただきました。Webpackを使えば面倒な設定等をまとめてやってくれ、とても便利なのでVue.jsで構築する必要性がある場合は使用すると良いでしょう。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。