LaravelでVue.jsを使えるように設定したので一旦メモ。細かいところは一旦見ないで手順のみ記します。
環境について
- php 7.2
- laravel 5.7
- node 6.16
- npm 3.10.10
Laravelアプリケーションの作成
Laravelのアプリケーションを作る。わからない人は以下の記事を参考に。Rails経験者向けと書いてありますが、Railsの部分無視すればRails初心者でもいけます。
【Rails経験者向け】Laravelでhello worldして、簡単にフレームワークの違いを見てみよう！
nodeのインストール
以下のサイトからnodeをインストールする。
https://nodejs.org/ja/download/
nodeに関しては、過去記事で一回インストール手順を解説しているので、わからない人は下記記事参考。
Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！
npmを使ってライブラリのインストール
以下のコマンドを打って諸々のライブラリをインストールします。
$ npm install
welcome.blade.phpの編集
resources/views/welcome.blade.phpを以下のように編集する。
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- laravelmix style -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<header-component></header-component>
<example-component></example-component>
</div>
<!-- laravelmix-style -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
jsファイルの編集
resources/js/components下にHeaderComponent.vueを追加。中身は以下のように。
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1>This is header!</h1>
</div>
</div>
</div>
</template>
<script>
</script>
その後に、resoueces/js/app.jsを編集。新規に作成したコンポーネントファイルを読み込む。
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('header-component', require('./components/HeaderComponent.vue').default);
const app = new Vue({
el: '#app'
});
npmを使ってコンパイル
ターミナルで以下のコマンドを実行。cssとjs関連のファイルをコンパイルする。
npm run dev
そのあとにlocalサーバーを立ち上げてみると以下のような画面になっているはず。
最後に
一旦やったことをまとめましたが、まだよくわかっていない部分が多いので順次付け足していきたいです。