Vue CLI3 を使う
何度も使っているはずなんですけどいまいち毎回躓くのでメモっていきます。
バージョン
2018年10月現在のメジャーバージョンはVue CLI3です。
まず最初につまずくのがこのバージョンです。というのも、3にメジャーアップデートがなされたのはつい最近*1で、configの様相などがガラッと変わってしまったんですね。Vueは日本語コミュニティが比較的活発でたくさん解説記事が出ていたり商業本も出始めているのですが、当然Vue CLI2までを前提に解説しているところが多いので、親切な記事を読みながら手元では3を操作していると事故ります。事故りました。というか資料が全然ない。まずもって最初のプロジェクト作成からコマンド（というか思想）が違うので気をつけましょう。
参考
GUIあるの知らなかった。 jp.vuejs.org
そしてなんと実はVue CLI3のドキュメントはこの記事を書いている現在英語と中国語とロシア語版しかありません。これを機に英語ドキュメント読解力を磨いていきたい(？)。
以下 Vue CLI3 を前提にしていきます。
カレントディレクトリにプロジェクトを作る
Gitでコードを管理していたりするとまず最初にディレクトリが存在していることが多いと思います。自分は多いです。
しかし普通にCLIに身を任せプロジェクト名を指定してプロジェクトを作ると、新たなディレクトリが作成されそこにプロジェクトが生成されてしまいます。
Vue CLI3のプロジェクト作成コマンドは
vue create <project name>
ですが、すでにあるディレクトリ内からプロジェクトを展開したいときはカレントディレクトリを指定します。
vue create .
そうすると
? Generate project in current directory? (Y/n)
と聞かれるので、Y を入力して先に進みます。 package.jsonの nameパラメータは勝手にカレントディレクトリの名称に設定されます。便利。
設定ファイルをつくる
プロジェクトを作成したのでこのままでも最低限開発を始めることはできるのですが、Webpackの設定をいじったり諸々ファイル管理を行う場合は vue.config.js というファイルを手動で作成する必要があります。Webpackの設定もここに書きます。これが異様にややこしい。どのドキュメントをみればいいのかわからない。もともとドキュメント読めないけど
Webpackそのものもあんまり理解してないので二重苦なんですよね……
pugを入れる
一度閉じタグのない環境に慣れてしまったらもう戻れません。というわけで開発には必ずpugを使うのですが、CSSのプリプロセッサと違ってこれはCLIの設定項目にはありません。
調べていると pug-loader がどうの pug-plain-loader がどうのと出てくるんですが、自分でloaderを指定しようとすると爆死します（しました）。Vue CLI3ではpugの読み込みも親切な方がパッケージングしてくれているのでそれをつかいます。
導入は簡単。
vue add pug
これだけ。冗長と言わざるを得ないnpm モジュール名すら入力する必要がありません。これでもう vue.config.js の configureWebpack に長々とプロパティを書き込んで頭を抱えることもなく、ただ pages の template にpugファイルを指定すればよしなにコンパイルされます。爆速！*2
まとめ
Vue CLI3は2に比べて総合してカプセル化*3が進んで、設定が楽になった反面とっつきにくさと細かい設定のしにくさが増した感じがしますね。複雑なことをしようとするとまた頭を抱えそうです。
Vue CLIに限らないですが、こういう新しいものに触れるたび、ドキュメント原典に対する苦手意識をなくしたいと強く思います。
