Laravelでの作成

ターミナルで作成したいディレクトリに移って

$ composer create-project laravel/laravel [プロジェクト名] --prefer-dist 

で新規のプロジェクトを立ち上げれる
バージョン指定したい時は

composer create-project --prefer-dist laravel/laravel [プロジェクト名] "6.*"　//バージョン指定

そのファイルのターミナル上で

php artisan serve

をすると、localhost:8000でアクセスでき、確認しコードの
config/app.phpの

'timezone' => 'UTC',
//↓
'timezone' => 'Asia/Tokyo',

'locale' => 'en',
//↓
'locale' => 'ja',

config/database.phpの

'mysql' => [
 'charset' => 'utf8mb4',
 //↓
 'charset' => 'utf8',

 'collation' => 'utf8mb4_unicode_ci',
 //↓
 'collation' => 'utf8_unicode_ci',            
]

そのファイルのターミナルで

mysql -u root

もしここでmysqlがないってできなかったら

brew install mysql
//でダウンロードして
mysql.server start --skip-grant-tables

エラーが出るなら

brew services stop mysql
mysql.server start --skip-grant-tables
mysql -uroot

もしERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)なら

mysql.server restart

で　＞mysqlの画面になったら

show databases;

で確認したら

create database データベース名;

.envにそのデータベース名とパスワード　もしユーザー名もrootじゃないのにするならそこも変更し、保存
そしてターミナルに戻り

php artisan config:cache

そして

php artisan migrate

で確認
また、mysqlでも確認

mysql -uroot -p

DB一覧を表示

show databases;

使用するDBを選択

use SampleApp;

テーブル一覧を表示する

show tables;

そしてlarravel passportを読み込む

composer require laravel/passport //バージョン指定あるなら　"9.*"的な

そしてphp artisan migrateしたらoauthが入ってるか確認し

php artisan passport:install

App\Models\Use.phpに

use Notifiable, HasApiTokens; //laravel6

use HasFactory, Notifiable, HasApiTokens; //laravel8

とし、App\Providersに
laravel6なら　App\Providers\AuthServerProvider.php

public function boot()
   {
       $this->registerPolicies();

       Passport::routes();　　//追加
   }

上に
use Laravel\Passport\Passport;　//追加

config\auth.phpの

'api' => [
           'driver' => 'passport',　///変更
           'provider' => 'users',
           'hash' => false,
       ],

APP\HTTP\Kermel.phpの

 protected $middlewareGroups = [
       'web' => [
           \App\Http\Middleware\EncryptCookies::class,
           \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
           \Illuminate\Session\Middleware\StartSession::class,
           // \Illuminate\Session\Middleware\AuthenticateSession::class,
           \Illuminate\View\Middleware\ShareErrorsFromSession::class,
           \App\Http\Middleware\VerifyCsrfToken::class,
           \Illuminate\Routing\Middleware\SubstituteBindings::class,
           \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class, //追加
       ],

ターミナルに戻って

composer require laravel/ui

php artisan ui vue //laravel7以上

php artisan ui;auth

npm install

php artisan serve
npm run watch
にして

php artisan make:controller AppController

AppControllerに

public function index()
   {
       return view('home');
   }

welcome.blade.phpを消して
web.phpに

use App\Http\Controllers\AppController;
を追加して
Route::get('{any}', [AppController::class, 'index'])->where('any', '.*')->middleware('auth')->name('home');
//laravel8
Route::get('{any}', 'HomeController@index')->where('any', '.*')->middleware('auth')->name('home');
//laravel6

resourcesの中のcomponentsのExampleを消してApp.vueを作成

App.vueに
<template>
   <div></div>
</template>

<script>
   export default {
       name: "App"
   }
</script>

<style scoped>

</style>

を作成し、home.blade.phpに

@section('content')
   <App></App>
@endsection

resourcesのjs\app.jsを

require('./bootstrap');

window.Vue = require('vue').default;

const app = new Vue({
   el: '#app',
});

ターミナルで

npm install vue-router --save-dev

resourcesのjsにrouter.jsを作成し

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
   mode: 'history',

   routes: [
       {
           path: '/',
           name: 'home',
           component: Start,
       }
   ]
});

jsにviewsファイルを作成し、Start.vueを作成し

<template>

</template>

<script>
   export default {
       name: "Start"
   }
</script>

<style scoped>

</style>

router.jsに

import Start from './views/Start.vue';

を追加し、app.jsの

import Vue from 'vue';
import router from './router';
import App from './components/App';

require('./bootstrap');
window.Vue = require('vue').default; //削除

const app = new Vue({
   el: '#app',

   components: {
       App
   },

   router,
});

App.vueのtemplateに

<div>Start
       <router-view></router-view>
</div>

Start.vueのtemplateに

<div>
適当に打つ
</div>

とやると’ / ’にアクセスすると表示されるか確認
ターミナルで

npm install tailwindcss --save-dev

resources\sass\app.sassを書き換え

@tailwind base;
@tailwind components;
@tailwind utilities;

webpack.min.jsのsassを書き換え

const tailwindcss = require('tailwindcss');  //上に追加

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .sass('resources/sass/app.scss', 'public/css')
   .options({
       processCssUrls: false,
       postCss: [ tailwindcss('./tailwind.config.js') ],
   });

ターミナルで

npx tailwind init

実際に何か試してみて

npm run dev

で変更されてたら設定完了