2017-10-1

[Vue.js]単一ファイルコンポーネントのための環境構築

以下に構築中

GitHub

メモしておきたいことは随時追記する。

概要

vue-cliを利用して単一ファイルコンポーネントの機能を使用することが推奨されているが、webpack 初心者な自分にとっては一番シンプルなテンプレートでも複雑で、ブラックボックスが大きいため気持ちが悪い。

そのためvue-cliを使用せず、まずは自分の手で環境を構築することに。理解次第vue-cliを利用することにしたい。

webpack に関してざっくり

ざっと見た感じ、webpack の思想は「画像も CSS も HTML も全部 JS で扱えるように（import とかで呼び出せるように）しようぜ」って感じっぽい。

そのためよくある勘違いとして「webpack は Grunt,gulp といったタスクランナーの新しい版」といった理解は完全に間違っている。実際には gulp と webpack を併用することもよくある、みたい。（Vue.js だと、WEB サイトで部分的に Vue.js を利用するさいにそのような方法を取ったりする模様）

loader

前述の通り、色々なファイル形式を JS で利用出来るようにするのだが、そのためには対応するloaderが必要となる。

例えば、css を webpack で import 出来るようにするにはstyle-loaderとcss-loaderの２つがインストールされている必要がある。

Vue.js の単一ファイルコンポーネントの場合、.vueという形式でコンポーネントのファイルを作成するため、それを import 出来るようにするためのvue-loaderも必要となる。