使用 Vite 在 Laravel 中安装 React
2024-05-26 渥太华微生活
介绍
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 是否运行成功。
编者注：新闻取自各大新闻媒体，新闻内容并不代表本网立场！文字和图片来自网络，版权归原作者所有。如有侵权，请速联系小编，立即删除。
| 全部评论 (0) |
|---|
