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