이 기사는 우루루 Advent Calendar 2019 16 일째 기사입니다.

소개

laravel×vuecli로 정리된 기사가 없었기 때문에 정리했다

요구사항

vuecli의 병아리를 그대로 사용할 수있게 만들기

이번에는 Laravel Mix를 사용하지 않습니다

라고 하는 것도 vuecli에 새로운 기능이 추가되어도 Laravel Mix가 대응하는 것이 늦으면 사용할 수 없다고 하는 단점이 있기 때문에
가능한 한 vue는 독립적으로 laravel에 의존하지 않기를 원합니다.

구성

거꾸로 해설

frontend 디렉토리는 vuecli 프로젝트
frontend에서 npm run buildresources/views/spa/app.blade.php 생성

Laravel 프로젝트 만들기

composer create-project laravel/laravel sampleApp --prefer-dist "5.5.*"

Laravel Mix 삭제

이번에는 laravel 초기에 들어있는 Laravel Mix를 사용하지 않으므로 삭제합니다.

rm -rf package.json webpack.mix.js yarn.lock resources/assets

Vue CLI 설치

Vue CLI를 설치하고 Vue CLI를 사용하여 프런트 엔드 프로젝트 만들기
vueRouter 사용

npm install -g @vue/cli
vue create frontend

frontend 디렉토리로 이동
frontend/src/app/로 만들기 위한 작업

cd frontend
mv src app
mkdir src
mv app src

그에 따른 변경

src/app/views/Home.vue 편집

import HelloWorld from "@/app/components/HelloWorld.vue"

vue.config.js 파일 만들기

touch vue.config.js

vue.config.js

module.exports = {
  // アセットはLaravelの `public` の `app` ディレクトリ配下に作成されるようにする.
  outputDir: '../public/app',


  // app配下にjs, cssなどが置かれるので、publicPathを調整する
  publicPath: '/app',


  pages: {
  // appのエントリポイント、テンプレート、出力先を調整
    app: {
      entry: 'src/app/main.js',
      template: 'templates/base.html',
      filename: '../../resources/views/spa/app.blade.php',
    },
  },
};

이제 npm run build 그러면 블레이드 출력과 자산 출력이 발생합니다.

Vue CLI pages에서 자산 (js, css 등)을 템플릿에 자동 주입하는 설정을 pages.＜アプリ名＞.template에서 지정할 수 있습니다.
라라벨 public/index.html을 자산 주입 템플릿으로 사용

mkdir templates
mv public/index.html templates/base.html

이것으로 vue 측 설정이 완료됩니다.

라라벨의 라우팅을 만나십시오.

컨트롤러 만들기

php artisan make:controller SpaController

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;


class SpaController extends Controller
{
    public function app()
    {
        return view('spa/test');
    }
}

라우팅도 만지다

routes/web.php

Route::get('/app', 'SpaController@app');

Laravel의 라우팅에 맞게 vueCli의 router.js도 편집합니다.
frontend/src/app/router.js 편집

export default new Router({
  mode: 'history',
  base: '/test/', // ←修正

지금까지 laravel vuecli의 협력은 끝났습니다.

npm run build

http://vuetest.test/test
이제 vue를 볼 수 있으면 여기까지 성공

이번에는 구현하지 않지만 Vue와 Laravel 사이에서 API 결합은 클래식 axios

번외편(vuetify 도입)

npm install vuetify

base.html의 head에 추가

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

우선 확인을 위해 App.vue를 vuetify 대응으로 재작성

<template>
  <v-app id="inspire">
    <v-btn>button</v-btn>
  </v-app>
</template>


<script>
export default {
  data: () => ({
  }),
  props: {
    source: String
  },
  methods: {
  }


};
</script>

Main.js 편집

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuetify from 'vuetify' // ←追加
import 'vuetify/dist/vuetify.min.css' // ←追加
Vue.use(Vuetify) // ←追加
const vuetify = new Vuetify(); //←追加

Vue.config.productionTip = false

new Vue({
router,
vuetify, //←追加render: h => h(App)
}).$mount('#app')

vuetify의 도입도 간단합니다.

요약

내가 좋아하는 vucli를 그대로 똑같이 laravel에 넣을 수있었습니다.
실제로 회사 업무에서 0에서 프로젝트를 만들지 않기 때문에 좋은 경험이되었습니다.
특히 엔트리 포인트를 의식한 적이 없었기 때문에 배우기가 많았습니다.

참조