使用 Vite 在 Laravel 中安装 React

2024-05-26 渥太华微生活

maxresdefault.jpg


介绍

Vite 是一款高速开发工具,用于在 Laravel 应用程序中捆绑 CSS 和 JavaScript 文件。它通过官方插件和 Blade 指令与 Laravel 无缝集成,方便在开发和生产环境中轻松加载资源。

下面是使用 Vite 在 Laravel 中安装 React 的流程。


01:创建Laravel项目

composer create-project --prefer-dist laravel/laravel LaravelReact

用下面命令运行本地服务器,检查网页看看 laravel 是否安装成功。

php artisan serve


02:安装 react, react-dom 和 @vitejs/plugin-react

npm install
npm install react@latest react-dom@latest
npm install @vitejs/plugin-react

03:更新 vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});


04:创建路由

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('app');
});

05:创建 app.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>Install React in Laravel using Vite</title>

    @viteReactRefresh
    @vite('resources/js/app.jsx')
</head>

<body>
    <div id="app"></div>
</body>

</html>

06:用 resources/js/app.jsx 代替 resources/js/app.js

import './bootstrap';
import '../css/app.css'
import ReactDOM from 'react-dom/client';
import Home from './components/Home';

ReactDOM.createRoot(document.getElementById('app')).render(<Home />)

07:创建 resources/js/components/Home.jsx

import React from "react"

export default function() {
    return <div>Home Test</div>
}

08:运行测试

在一个终端运行 VITE server

npm run dev

在另一个终端运行 Laravel server

php artisan serve

在浏览器中检查 http://127.0.0.1:8000  是否运行成功。

编者注:新闻取自各大新闻媒体,新闻内容并不代表本网立场!文字和图片来自网络,版权归原作者所有。如有侵权,请速联系小编,立即删除。

328
全部评论 (0)
展开快速发表评论
二维码 | 渥太华微生活
<广而告之>
缩略图

看新闻?

渥太华微生活

- 新闻|活动|优惠|房屋|汽车|留学|移民|工作|理财|旅游|美食|健康|宠物|种植|文化|时尚|科技|历史|体育|黄页


缩略图

刷视频?

传奇视频

- 电影 | 电视剧 | 综艺 | 小品 | 动漫 | 戏曲 | 短视频


缩略图

听音频?

传奇音频

- 音乐 | 有声小说 | 评书 | 相声


缩略图

找乐趣?

传奇活动

- 渥太华 | 多伦多 | 温哥华 | 蒙特利尔 | 卡尔加里


缩略图

想省钱?

传奇打折

- Amazon打折专区 | Temu打折专区 | 打折资讯


缩略图

租房子?

传奇租房

- 渥太华 | 多伦多 | 温哥华 | 蒙特利尔 | 卡尔加里

科技专栏