[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-loadercss-loaderの2つがインストールされている必要がある。

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