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) |
---|