【Vue CLI 3】プロジェクトテンプレートを作りたくて
Vue CLI 3になってプラグイン＆プリセットというコンセプトになった。
これに沿う形でプロジェクトテンプレートを作りたい。
リモートプリセットを作ってみた。
vue create --preset yoko0180/vue-cli-preset-basic-project hello-vue
このコマンド１つでプロジェクトがテンプレートから作成できる。
ただしオンラインが条件。
はじめはローカルで動作すれば十分と考えていたが、スッキリしない部分があったので路線変更した。スッキリしない部分は後述。
プロジェクトのテンプレートとして次を使う。
- Vuex
- stylus
- pug
vuexとstylusはvue cliが設定を提供してくれる。
pugはローダーを追加してくれるプラグインがnpmにあった。
（https://www.npmjs.com/package/vue-cli-plugin-pug）
ローダーを追加してくれるだけなので.vueコンポーネントの記述をpugに変換してはくれない。
今回は変換するプラグインを作るのは難しいので、予め用意したテンプレートの.vueファイルに差し替えることでpug記述にするプラグインを作ってみた。
冒頭のコマンドができるまでのアウトラインは次のようなもの。
- ローカルでpub記述に差し替えるcliプラグインを作る
- １をサンプルプロジェクトにローカルで適用して動作を確認する
- １をnpmにpublishしてvue add <plugin name>で実行できるようにする
- cliプリセットを作成してgithubにpushする
（前述のスッキリしない部分）
上記２では次のようにコマンド実行する。
yarn add -D file:..\vue-cli-plugin-pug-template
Vue CLI 3 プラグインのコンセプトとして次のようなコマンドでプラグインを適用できる。
vue add pug-template
これが動作するためにはvue-cli-plugin-pug-templateがnpmにpublishされている必要がある。
とにかくプロジェクトを作るときにごちゃごちゃしたくなかったのでpublishしてみた。
publishするにはnpmにユーザ登録してnpm publishすればいいのだが、ユーザ登録としてメール認証（メールにリンククリックしてとくるやつ）をする前にpublishしようとしてエラーになるということをやらかしたが、結果よしとする。
