Laavel Nova에 자신의 페이지를 추가했습니다.

이른바 라벨노바

Laavel Nova는 최근에 발표한 Laavel에서 관리자 화면으로 만든 가방입니다.
라벨의 주 개발자가 만들었기 때문에 상당한 화제가 됐죠
라벨노바 같은 관리자 화면용 포장은 제품 초기 등 관리자 화면 제작에 노동시간을 피하지 않는 것이 편리하다.

도입 요점

이런 관리자 화면용 포장은 무료부터 유료까지 다양하지만 실제 도입을 논의할 때
놓칠 수 없는 두 가지 포인트라고 생각합니다.
1. 표의 CRUD 화면은 거의 작업 시간 0으로 실현할 수 있다
2. 자신의 페이지를 간단하게 추가할 수 있다
1에 관해서는 다른 기사와 공식 사이트를 참고할 수 있다면 괜찮을 것 같아요.
2의 개별 페이지에 대한 추가 등은 기재되지 않았기 때문에 이번에는 제가 소개해 드리겠습니다.

전제 지식

개별 페이지를 추가할 때 라벨노바의 간단한 구성을 말씀드리겠습니다.
Laavel Nova는 페이지 구성에 Vue를 사용합니다.js 사용, 페이지 이동 등 vue-router 사용
SPA의 관리 화면입니다.
따라서 페이지를 추가할 때 laavel의 blade가 아니라 vue 파일 단위로 추가됩니다.
따라서build을 진행해야 합니다. npm 명령을 실행할 수 있는 환경을 미리 구축하십시오.

추가 페이지

이번에는 화면에서.

이런 느낌의 맞춤형 화면을 추가해보고 싶어요.

１. 구축 환경의 구축

우선 항목의 바로 아래에 있는 nova 디렉터리로 이동합니다

cd nova

다음에 필요한 모듈을 설치합니다(nova 디렉터리에서 꼭 진행하세요)

npm install

완성 후 노바 산하에 node_modules 디렉터리 만들기

nova
　　　├─　config
　　　├─　database
　　　├─　node_modules
　　　├─　...

다음은 노바 다음 댓글.mix.js가 있기 때문에 이름을 바꾸어 사용하십시오webpack.mix.js.dist→webpack.mix.jswebpack.mix.js에 기술된build을 수정한 후 복사 대상 디렉터리

.copy('public', '../nova-app/public/nova')

↓

.copy('public', '../public/nova-assets/')

페이지 추가 준비 완료

2. 및 vue 페이지를 추가합니다.로그인 설정

다음은views의 부하 테스트입니다.vue 추가

nova
　　　├─　config
　　　├─　database
　　　├─　node_modules
　　　├─　resources
    　　 ├─js
　　　　       ├─　views
　　　　           ├─　test.vue ⬅　ここに追加する！！

test.vue

<template>
  <main>
    <p>カスタムページです</p>
    <br>
    <input type="button" value="OK">
  </main>
</template>

페이지를 추가할 수 있는 경우 라우트를 설정합니다.
routes.js 내용에 아까 그 페이지를 다시 써주세요.

nova
　　　├─　config
　　　├─　database
　　　├─　node_modules
　　　├─　router
    　　 ├─routes.js

routes.js

import test from '@/views/test'

// 省略

{
    name: 'test',
    path: '/test',
    component: test,
},

다음 파일도 추가됩니다.

nova
　　　├─　config
　　　├─　database
　　　├─　node_modules
　　　├─　resources
    　　 ├─components.js

components.js

import test from '@/views/test'

// 省略

Vue.component('test', test)

위 페이지의 추가는 이것으로 끝냅니다.

3.build을 통해 반영

마지막build 해주세요.

npm run watch

실행하면 다음과 같은build이 성공했다는 것을 알 수 있을 거라고 생각합니다.

 WAIT  Compiling...                                                                                                                                                                                       00:24:18

 95% emitting

 DONE  Compiled successfully in 457ms                                                                                                                                                                     00:24:18

   Asset     Size  Chunks                    Chunk Names
 /app.js  2.39 MB       0  [emitted]  [big]  /app
/app.css  68.5 kB       0  [emitted]         /app

왜냐하면build이 완성됐어요.
방문/nova/test 후 방금 추가된 페이지를 보실 수 있습니다.

원래는 왼쪽 사이드바에서 페이지로 넘어가고 싶은데 이 근처에 다른 기회를 주세요.
이상은 개별 페이지의 추가 완성입니다!!

후기

Laavel Nova는 방금 출시되었는데 지금은 issue가 많아서 더 간단할 수 있습니다.저는 개인적으로 UI와 vue를 좋아하기 때문에 앞으로 Laavel Admin의 표준이 될 것으로 기대합니다.
물론 간단한 CRUD 페이지라면 vue를 하지 않아도 php의 기술로만 실현할 수 있습니다
이번에는 단순한 CRUD로 덮어쓸 수 없는 상황에서 사용하세요.