1
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Laravel + Vue のセットアップ

Last updated at Posted at 2020-05-27

#書くこと

  • Laravelのプロジェクト作成
  • UIにVueを使えるようにする
  • Vueのサンプルコンポーネントを表示してみる

#本題

##プロジェクト作成
コマンドでプロジェクト作成。
PROJECT_NAMEのプロジェクトフォルダが作成される。

composer create-project laravel/laravel PROJECT_NAME

作成したら移動しておく。
移動を忘れると後から行うパッケージインストールがプロジェクトの外にされるので注意。

cd PROJECT_NAME

Laravelを実行するのは下記のコマンド

php artisan serve

成功すると「Laravel development server started: http://127.0.0.1:8000 」と出てくる。
http://127.0.0.1:8000 にアクセスしてLaravelのウェルカムページが出てくればOK。
(localhost:8000でもいい)

##Vueのインストールと有効化
パッケージをインストールして、UIにVueを使うように設定。

composer require laravel/ui
php artisan ui vue --auth

2個目のコマンドを実行した時点で、resources/js/componentsにExampleComponentというサンプルのVueコンポーネントが作成される。

実行後、「Please run "npm install && npm run dev" to compile your fresh scaffolding.(npm installとnpm run devも実行してね)」
と言われるので実行。

npm install
npm run dev

Vueに必要なモジュールのインストールとビルドをしていると思う。
Vueコンポーネントのコードを変更するたびにnpm run devを実行する必要がある。

##コンポーネント登録を自動化
デフォルトだと、新しくVueコンポーネントを作成したらresources/js/app.jsにコンポーネントを登録する必要がある。
app.jsを開いて見てみると、先ほどのコマンドで作成されたExampleComponentがすでに登録されている。

app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

が、その上に

app.js
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

という記述があり、コメントアウトされている2行のコードを有効にすれば自動でコンポーネントが登録されるようになる。

これでもともと書かれていたExampleComponentの登録も行われるため、ExampleComponentの登録処理は念のためコメントアウトしておく。

app.js
// コメントアウトを外す
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

// 一応コメントアウトしておく
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);

##ExampleComponentを表示してみる
resources/views/layouts/app.blade.phpを開く。
このファイルはUI設定のコマンドで自動生成される。
ここまでの段階で既に作成されているはず。

idにappが設定されているdiv要素がある。
ExampleComponentを表示するよう書き加えてみる。

app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    省略
</head>
<body>
    <div id="app">

        <!-- 追加 -->
        <example-component></example-component>

        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
           省略 
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

この状態で http://127.0.0.1:8000 にアクセスするとExampleComponentの内容が表示されるようになる。

1
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?