Laravel vuecli最短レシピ（ついでにvuetify導入）

6520 ワード
vue-cli Laravel Vuetify Laravel テキストリンク

本記事はうるる Advent Calendar 2019 16日目の記事です。

はじめに

laravel×vuecliでまとまった記事がなかったのでまとめた

要件

  • vuecliの雛形をそのまま使用できるようにする
  • 今回はLaravel Mixは使わない

というのもvuecliに新機能が追加されてもLaravel Mixが対応するのが遅いと使えないというデメリットがあるから
なるべくvueは独立させてlaravelに依存しないようにしたい

構成

ざっくり解説

frontendディレクトリがvuecliプロジェクト
frontendでnpm run buildすると
resources/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するとbladeの出力とアセットの出力がされる

Vue CLIのpagesでは、アセット(js, cssなど)をテンプレートに自動注入する設定をpages.＜アプリ名＞.templateで指定することができる
laravelのpublic/index.htmlをアセット注入用のテンプレートとして使用する

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

これでvue側の設定は完了

laravelのルーティングをいじっておく

コントローラーを作る

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の導入も簡単ですね

まとめ

大好きなvuecliをそのままそっくりlaravelに入れることができました
実際に会社の業務で０からプロジェクトを作ることがないのでいい経験になりました
特にエントリーポイントを意識したことがなかったので学びが多かったです

参照