Skip to content

Instantly share code, notes, and snippets.

@acro5piano

acro5piano/app.blade.php

Last active April 18, 2020 12:33
Show Gist options
  • Save acro5piano/443802a58653617d73250e313a363bbb to your computer and use it in GitHub Desktop.
Save acro5piano/443802a58653617d73250e313a363bbb to your computer and use it in GitHub Desktop.
Download ZIP
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4 ref: https://qiita.com/acro5piano/items/908cd751b2ea97e19be1
Raw
app.blade.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue TODO</title>
<link rel="stylesheet" href="css/app.css">
<script>
window.Laravel = {};
window.Laravel.csrfToken = "{{ csrf_token() }}";
</script>
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script src="js/app.js"></script>
</html>
Raw
app.js
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
Raw
file0.txt
<template>
<h1>Hello, {{ name }}</h1>
</template>
<script>
export default {
data () {
return {
name: 'Kazuya'
}
},
}
</script>
<style>
.h1 {
border-bottom: 1px;
}
</style>
Raw
file1.html
<h1>Hello, Kazuya</h1>
Raw
file10.txt
yarn run dev
php artisan serve
Raw
file12.txt
yarn run dev
php artisan serve
Raw
file2.txt
composer create-project --prefer-dist laravel/laravel spa-todo 5.4
cd spa-todo
Raw
file3.txt
perl -i -pe 's/DB_.+\n//g' .env
echo 'DB_CONNECTION=sqlite' >> .env
touch database/database.sqlite
# DBのマイグレーションして動くことを確認
php artisan migrate
# => Migrated: 2014_10_12_000000_create_users_table
# => Migrated: 2014_10_12_100000_create_password_resets_table
Raw
file4.txt
# お好みでyarn使おう
npm install -g yarn
# vue-router 追加
# npm install --save-dev vue-router でも一緒
yarn add vue-router vue-spinner --dev
Raw
file6.txt
yarn add cross-env --dev
Raw
file8.txt
.
|-- package.json
|-- resources
| |-- views
| | `-- app.blade.php
| `-- assets
| `-- js
| `-- app.js
`-- routes
`-- web.php
Raw
package.json
{
...,
"scripts": {
"dev": "cross-env.js ...",
"watch": "cross-env.js ...",
"hot": "cross-env.js ...",
"production": "cross-env.js ...",
},
...
}
Raw
web.php
<?php
Route::get('/{any}', function () {
return view('app');
})->where('any', '.*');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment