【Vue.js】Nuxt.jsの自分用テンプレートを作ってみた

概要

Nuxt.jsのプロジェクト作成といえば、vue initですね。

$ vue init nuxt-community/starter-template my-project  

しかし頻繁にプロジェクトを作ってると「これ毎回入れてるよなー」ってものが出てきて、面倒になってきます。
そこで新しく自分のtemplateを追加してみました。

手順

nuxt-community/starter-templateをforkする

ゼロから作りたいわけじゃないんで、nuxt-community/starter-templateをベースに自分なりにカスタマイズすることにします。
ということで、まず自分のアカウントにnuxt-community/starter-templateをforkします。

自分好みに改変

あとはstarter-template/templateを自分好みに改変するだけです。
今回は、pugとstylusを追加してみることにします。

diff --git a/template/package.json b/template/package.json
index 3bcc572..e30ae3b 100644
--- a/template/package.json
+++ b/template/package.json
@@ -20,6 +20,10 @@
     "eslint": "^4.19.1",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.1.1",
-    "eslint-plugin-vue": "^4.0.0"
+    "eslint-plugin-vue": "^4.0.0",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2"
   }
 }

動作テスト

自分のTemplateを元に作成

Templateに自分のRepositoryを指定して作成してみます。

$ vue init dorarep/starter-template my-project
$ cd my-project
$ yarn install

動作テスト

Componentをpugとstylusを使う形に修正して...

components/AppLogo.vue

<template lang="pug">
  .VueToNuxtLogo
    .Triangle.Triangle--two
    .Triangle.Triangle--one
    .Triangle.Triangle--three
    .Triangle.Triangle--four
</template>

<style lang="stylus">
  .VueToNuxtLogo
    display inline-block
    animation turn 2s linear forwards 1s
    transform rotateX(180deg)
    position relative
    overflow hidden
    height 180px
    width 245px

  .Triangle
    position absolute
    top 0
    left 0
    width 0
    height 0
...

無事動作しました！

おわりに

記事にするまでもない簡単な内容かもしれませんが、あまり情報もなさそうなのでまとめてみました。

AppLogoなどの削除や、Atomic DesignのDirectory構成の作成、.gitignoreの修正など、まだまだやれることはありそうです。

また汎用的なTemplateだけでなく、『ゲーム用テンプレート』『LP用テンプレート』みたいにSpecificなテンプレート資産を増やしていくと、開発効率上がりそうですね。