laravel怎么安装inertia vue3的版本-Vue.js-PHP中文网

一、安装前要求

二、服务端配置

三、客户端配置

四、安装VUE

首页

web前端

Vue.js

laravel怎么安装inertia vue3的版本

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 15, 2023 am 10:31 AM

laravel vue3

一、安装前要求

1.1 已安装laravel框架
1.2 已安装Node JS
1.3 已安装Npm包管理工具

二、服务端配置

2.1 第一步：composer安装inertia-laravel

$ composer require inertiajs/inertia-laravel

登录后复制

2.2 第二步：laravel目录resouces/views/新增app.blade.php文件，加入以下代码

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <link href="{{ mix(&#39;/css/app.css&#39;) }}" rel="stylesheet"/>
        <script src="{{ mix(&#39;/js/app.js&#39;) }}" defer></script>
    </head>
    <body>
        @inertia    </body></html>

登录后复制

2.3 第三步：执行artisan命令，添加中间件

$ php artisan inertia:middleware

登录后复制

文件生成后，手动添加到Kernel文件中的web中间件组最后一行

&#39;web&#39; => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,],

登录后复制

三、客户端配置

3.1第一步：使用npm命令安装前端框架依赖，安装VUE3版本。

$ npm install @inertiajs/inertia @inertiajs/inertia-vue3

登录后复制

3.2第二步：初始化应用
打开/resouces/js/app.js，清空后覆盖以下代码

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },})

登录后复制

3.3第三步：npm安装进度条包
使用inertia做出来的页面，浏览器不会刷新，为了用户感知增加了页面顶部进度条这种友好的提示[脑补一下]

$ npm install @inertiajs/progress

登录后复制

安装完成后，引入并初始化，打开/resouces/js/app.js，清空后覆盖以下代码

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;import { InertiaProgress } from &#39;@inertiajs/progress&#39;createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mount(el)
    },})InertiaProgress.init()

登录后复制

3.4 第四步 使用以下 webpack 配置来强制浏览器在文件更新后，加载新的资源，而不是使用缓存。
打开webpack.mix.js，清空并覆盖以下代码

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

登录后复制

四、安装VUE

第一步 使用npm命令安装vue最新稳定版

$ npm install vue@next

登录后复制

第二步 添加.vue()到webpack.mix.js

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .vue()
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

登录后复制

第三步通过npm命令运行

$ npm run watch

登录后复制

如果报错

laravel怎么安装inertia vue3的版本

解决：升级vue-loader，执行

$ npm i vue-loader

登录后复制

如果还报错

laravel怎么安装inertia vue3的版本

解决：resouces/js目录下新增Pages文件夹。

成功状态

laravel怎么安装inertia vue3的版本

以上是laravel怎么安装inertia vue3的版本的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1676

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

laravel入门实例 Apr 18, 2025 pm 12:45 PM

Laravel 是一款 PHP 框架，用于轻松构建 Web 应用程序。它提供一系列强大的功能，包括：安装：使用 Composer 全局安装 Laravel CLI，并在项目目录中创建应用程序。路由：在 routes/web.php 中定义 URL 和处理函数之间的关系。视图：在 resources/views 中创建视图以呈现应用程序的界面。数据库集成：提供与 MySQL 等数据库的开箱即用集成，并使用迁移来创建和修改表。模型和控制器：模型表示数据库实体，控制器处理 HTTP 请求。

解决 Craft CMS 中的缓存问题：使用 wiejeben/craft-laravel-mix 插件 Apr 18, 2025 am 09:24 AM

在使用CraftCMS开发网站时，常常会遇到资源文件缓存的问题，特别是当你频繁更新CSS和JavaScript文件时，旧版本的文件可能仍然被浏览器缓存，导致用户无法及时看到最新的更改。这个问题不仅影响用户体验，还会增加开发和调试的难度。最近，我在项目中遇到了类似的困扰，经过一番探索，我找到了wiejeben/craft-laravel-mix这个插件，它完美地解决了我的缓存问题。

Laravel如何学习怎么免费学习Laravel Apr 18, 2025 pm 12:51 PM

想要学习 Laravel 框架，但苦于没有资源或经济压力？本文为你提供了免费学习 Laravel 的途径，教你如何利用网络平台、文档和社区论坛等资源，从入门到掌握，为你的 PHP 开发之旅奠定坚实基础。

laravel框架安装方法 Apr 18, 2025 pm 12:54 PM

文章摘要：本文提供了详细分步说明，指导读者如何轻松安装 Laravel 框架。Laravel 是一个功能强大的 PHP 框架，它 упростил 和加快了 web 应用程序的开发过程。本教程涵盖了从系统要求到配置数据库和设置路由等各个方面的安装过程。通过遵循这些步骤，读者可以快速高效地为他们的 Laravel 项目打下坚实的基础。

laravel有哪些版本 laravel新手版本选择方法 Apr 18, 2025 pm 01:03 PM

在面向初学者的 Laravel 框架版本选择指南中，本文深入探讨了 Laravel 的版本差异，旨在协助初学者在众多版本之间做出明智的选择。我们将重点介绍每个版本的关键特征、比较它们的优缺点，并提供有用的建议，帮助新手根据他们的技能水准和项目需求挑选最合适的 Laravel 版本。对于初学者来说，选择一个合适的 Laravel 版本至关重要，因为它可以显著影响他们的学习曲线和整体开发体验。

laravel用户登录功能 Apr 18, 2025 pm 12:48 PM

Laravel 提供了一个全面的 Auth 框架，用于实现用户登录功能，包括：定义用户模型（Eloquent 模型）创建登录表单（Blade 模板引擎）编写登录控制器（继承 Auth\LoginController）验证登录请求（Auth::attempt）登录成功后重定向（redirect）考虑安全因素：哈希密码、防 CSRF 保护、速率限制和安全标头。此外，Auth 框架还提供重置密码、注册和验证电子邮件等功能。详情请参阅 Laravel 文档：https://laravel.com/doc