하다

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 라고 하는 것을 사용하고 있습니다. 상당히 편리했습니다.