Nuxtの開発支援CLIツール「naru」の紹介

naru

Nuxtの開発支援CLIツール「naru」を開発しました。
npmまたはyarnでインストールできます。

npm install -g naru
# or
yarn global add naru

どういうツール？

コンポーネントやページ、プラグインなどの雛形をコマンドで作成できるツールです。

下記はLoginFormというコンポーネントを作成する例です。

naru create-component LoginForm
# or
naru cc LoginForm # 省略した書き方

components/フォルダ直下にLoginForm.vueが作成されます。

中は初期設定だと下のようになります。

このようにコマンドでnuxtで使うファイルなどを作成することができます。

なぜ作ろうかと思ったか

最近Nuxt.jsとLaravelでCMSを開発しています。
Laravelではartisanというコマンドでコントローラーやモデルを作成できます。
このartisanのようにnuxtで必要なコンポーネントやページを作成できたらいいなと思い開発しました。

Nuxt.js+Laravelで開発しているCMSの紹介

インストール

npmまたはyarnでインストールできます。

npm install -g naru
# or
yarn global add naru

機能

機能一覧

• create-component <名前> コンポーネントを作成します
• create-page <名前> ページを作成します
• create-layout <名前> レイアウトを作成します
• create-middleware <名前> ミドルウェアを作成します
• create-plugin <名前> プラグインを作成します
• create-store <名前> モジュールモードでVuexストアを作成します
• config naruのコンフィグファイル(.naru)を作成します

それぞれの<名前>はパスにもできます。
例：naru create-component articles/_id/edit

create~だと長いので省略ができます。
例：naru cl blog

省略形一覧

• create-component → cc
• create-page → cp
• create-layout → cl
• create-middleware → cm
• create-plugin → cpl
• create-store → cs

設定

naru configを実行すると.naruというディレクトリが作成され、その中にnaru.config.jsというファイルが作成されます。

このファイルを書き換えることでnaruの設定を上書きすることができます。

初期のnaru.config.jsは下のようになっています。

naru.config.js

module.exports = {
  componentsPath: './components',
  pagesPath: './pages',
  layoutsPath: './layouts',
  middlewarePath: './middleware',
  pluginsPath: './plugins',
  storePath: './store'
}

例としてnaruでコンポーネントを作成するディレクトリをpartsにしたい場合はcomponentsPathを./partsにするとできます。

またコンポーネントなどの雛形を自分で作成したい場合は./naru直下に対応する雛形の名前のファイルを作成してください。

例：コンポーネントの雛形を作成する際は.naru直下にcomponent.vueというファイルを作成します。

作成した際のスクショ

雛形ファイルの例

component.vue

<template>
  <div class="component">
    Component Template
  </div>
</template>

<script>
export default {}
</script>

<style></style>

対応する雛形の名前

• コンポーネント → component.vue
• ページ → page.vue
• レイアウト → layout.vue
• ミドルウェア → middleware.js
• プラグイン → plugin.js
• Vuexストア → store.js

まとめ

こういうCLIツールを開発したのは初めてでした。いい経験になりました。
ちなみにライブラリはoclifというものを使っています。結構便利でした。