laravelをインストールが完了していることが条件
参考
https://www.softel.co.jp/blogs/tech/archives/6490
https://qiita.com/howaito01/items/3195b5b11184661cedd2
nodejs と npm をインスコ
n ってのでバージョン管理をすると良いらしい
dnf install nodejs npm
npm install -g n
n stable
#古いの消す
dnf remove nodejs npm
#再度ログイン
exec $SHELL -l
node -v
最新版になってるね！
依存関係をインスコ
npm install
npm install vue@next --save-dev
npm install vue-router@4
#webpackの編集
vim webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue() //ここ
.postCss('resources/css/app.css', 'public/css', [
//
]);
vueファイルを新規作成
mkdir resources/js/components/
vim resources/js/components/Top.vue
Top.vue
<template>
<div>Hello Vue3</div>
</template>
app.js を編集
vim resources/js/app.js
resources/js/app.js
require('./bootstrap');
import Top from './components/Top.vue';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: "/",
component: Top
}
];
const router = createRouter({
routes, // short for `routes: routes`
history: createWebHistory(),
})
const app = createApp({
components: {
Top
}
});
app.use(router);
app.mount('#app');
ルートを編集
vim routes/web.php
routes/web.php
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.-]*');
#laravelのファイルを編集
vim resources/views/welcome.blade.php
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>
<script src="{{ asset('js/app.js') }}" defer="defer"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
ok