使用带有 vue 3 的 NPM 安装 Inertia 客户端 (1)

📌 相关文章

📜 使用带有 vue 3 的 NPM 安装 Inertia 客户端 (1)

📅 最后修改于: 2023-12-03 15:06:56.206000 🧑 作者: Mango

使用带有 Vue 3 的 NPM 安装 Inertia 客户端

Inertia.js是一个现代化的Web应用程序开发工具，它结合了服务器端渲染（SSR）和单页面应用程序（SPA）。它基于 PHP 和 Laravel 框架，允许使用 Vue、React、Svelte或其他前端框架构建快速、现代、交互式的用户界面。

在使用 Inertia.js 开发 Web 应用程序时，Vue 3 可以作为客户端框架来使用。下面是在 NPM 上安装 Inertia 客户端的步骤。

步骤 1: 使用 NPM 安装 Inertia 和 Vue 3

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

步骤 2: 导入 Inertia 和 Vue 3

import { createApp } from 'vue'
import { InertiaApp } from '@inertiajs/inertia-vue3'

const app = createApp({
  render: () => h(InertiaApp, {
    initialPage: JSON.parse(document.getElementById('app').dataset.page),
    resolveComponent: async (name) => {
      const page = await import(`./Pages/${name}.vue`)
      return page.default
    },
  }),
})

app.mount('#app')

步骤 3: 在 HTML 模板中设置 Inertia 应用程序

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <!-- 设置 title 和 meta 信息 -->
</head>
<body>
  <div id="app" data-page="{{ json_encode($page) }}"></div>

  <script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>

步骤 4: 使用 Inertia 进行路由跳转

import { InertiaLink } from '@inertiajs/inertia-vue3'

export default {
  components: {
    InertiaLink,
  },
  data() {
    return {
      form: {
        email: '',
        password: '',
      },
    }
  },
  methods: {
    async submit() {
      this.$inertia.post('/login', this.form)
    },
  },
}

以上是在使用 Vue 3 的情况下，在 NPM 中安装 Inertia 客户端的步骤。