客户端设置

未匹配的标注

一旦你配置了 服务器端框架,然后你需要设置客户端框架。Inertia 目前支持 React,Vue,和 Svelte。

安装依赖

使用 NPM 或 Yarn 安装 Inertia 客户端适配器。

npm install @inertiajs/inertia @inertiajs/inertia-vue3
yarn add @inertiajs/inertia @inertiajs/inertia-vue3

初始化应用程序

接下来,更新主 JavaScript 文件以启动你的 Inertia 应用。我们在这里所做的就是用基本的 Inertia 组件初始化客户端框架。

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

resolve 回调告诉 Inertia 如果加载页面组件。它接收一个页面名称 (字符串),并返回一个页面组件模块。

默认情况下,Inertia 假设你有一个 idapp 根元素。如果不同,你可以使用 id 属性更改它。

createInertiaApp({
  id: 'my-app',
  // ...
})

进度指示器

由于 Inertia 请求是通过 XHR 发出的,因此从一个页面导航到另一个页面时没有默认的浏览器加载指示器。为了解决这个问题,Inertia 提供了一个可选的 进度 库,每当你进行 Inertia 访问时,它会显示一个加载条。

要使用它,从安装它开始:

npm install @inertiajs/progress
yarn add @inertiajs/progress

安装完成后,在应用中初始化它。

import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

它还提供了许多自定义选项,你可以在 进度指示器 上了解更多相关这些选项的信息。

代码拆分

代码拆分将应用程序的各个页面拆分成更小的捆绑包,然后在访问新页面时按需加载。这可以显著减少初始的 JavaScript 包的大小,缩短第一次呈现的时间。

虽然代码拆分对非常大的项目很有帮助,但在访问新页面时确实需要额外的请求。一般来说,如果您能够使用单个捆绑包,您的应用程序会感觉更快。

要使用 Inertia 代码拆分,您需要启用 动态导入。你需要一个 Babel 插件才能让它工作。首先,安装插件:

npm install @babel/plugin-syntax-dynamic-import
yarn add @babel/plugin-syntax-dynamic-import

接下来,在你的项目中创建一个 .babelrc 文件。

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

如果您使用的是 Laravel Mix,则动态导入 Babel 插件已经配置好了。 但是,我们建议使用 Laravel Mix 6,因为旧版本存在已知问题。

最后,更新应用程序初始化中的 解析 回调,以使用 import 而不是 require

resolve: name => import(`./Pages/${name}`),

考虑使用缓存崩溃来强制浏览器加载最新版本的资产。为此,请将以下内容添加到您的 webpack 配置中:

output: {
  chunkFilename: 'js/[name].js?id=[chunkhash]',
}

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/cl...

译文地址:https://learnku.com/docs/inertia/0.11/cl...

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~