Docker Laradock Laravel PHP Vue

Laravel+Vue環境を作る

Laravel+Vueの環境を作るまでのメモ。


とりあえず以前書いたこの記事（Laradockで簡単にLaravel開発を開始しよう！）でLaradocでLaravelを導入済み前提で進めます。

※Laradocで環境を作って無くても大丈夫です。


目次[非表示]

node関連ライブラリのインストール

※LaradocだとNode.jsとnpmがインストール済みなのでインストール済み前提で進めます。

Laravelがインストールされているフォルダ直下で以下のコマンドを実行してください。

1
2
npm install
npm install vue

Vueを使ってみる


ルーティングの設定を変更

サンプル用にルーティングを変更します。

/laravel/routes/web.php
1
2
3
4
5
6
<?php
 
Route::get('/', function () {
    // return view('welcome');
    return view('vue');
});

コンポーネントの作成

コンポーネントファイルの作成。

/laravel/resources/js/components/VueComponent.vue
1
2
3
4
5
6
7
8
9
10
11
<template>
    <h1>Vue Sample</h1>
    <p>Hello,World</p>
</template>
<script>
   export default {
       mounted() {
           console.log('Hello,World')
       }
   }
</script>

app.jsの編集

app.jsのを編集。

/laravel/resources/js/app.js
1
2
3
4
5
6
7
8
require('./bootstrap');
import Vue from 'vue'
 
Vue.component('vue-component', require('./components/VueComponent.vue').default);
 
const app = new Vue({
    el: '#app'
});

Viewの作成

Viewの作成

/laravel/resources/views/vue.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="{{ config('app.locale')}}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel + Vue</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 </head>
 <body>
    <div id="app">
      <vue-component></vue-component>
    </div>
  <script src="{{ asset('js/app.js') }}" ></script>
  </body>
</html>

実行

以下のコマンドを実行するとタスクが実行します。

1
2
3
4
5
6
7
8
9
10
11
// 全タスク実行
npm run dev
 
// 全タスク実行を実行し、出力を圧縮
npm run production
 
// アセットの変更監視
npm run watch
 
// アセットの変更監視（watchが効かない場合）
npm run watch-poll

最後にhttps://localhost/publicにアクセスしたら画面が出ます。


まとめ

Vueを勉強中ですが、簡単に結構Laravel+Vueの環境は構築できました。


0 件のコメント :

コメントを投稿