文档/框架差异

Vue

Nexy 在服务器上渲染 Vue 3 个单文件组件，然后 Vue 在浏览器中接管它们。每个框架中的页面、布局、岛和操作都是相同的：此页面涵盖设置，然后是与共享合约不同的部分。

开始一个项目

nx new my-app --template web-fbr-vue

nx new my-app --template web-modular-vue

该模板是一个带有 Vue 岛屿的服务器模式项目。在没有模板的情况下运行 nx new my-app 来回答提示：路由器、项目类型、是否使用客户端路由，然后是框架。

在现有项目中启用 Vue

from nexy.core.models import NexyConfigModelfrom nexy.frontend import vue  class NexyConfig(NexyConfigModel):    useFF = vue()    useAliases = {"@": "src"}

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), vue()],  customLogger: nexy.log(),});

nx new 写入此文件； Nexy 自己编写 __nexy__/vite.ts，因此请勿编辑它。

规则

• 每个项目一个框架。 useFF 只需要一个框架； useFF = [vue(), react()] 在启动时停止服务器。
• 每个文件一个组件。 .vue 文件默认导出其组件；您导入它时使用的名称只是您编写的标签。

<template>  <h1>Hello</h1></template>

<script setup lang="ts">defineProps<{ slug: string }>();</script> <template>  <h1>{{ slug }}</h1></template>

<template>  <html>    <body>      <header>My app</header>      <main><slot /></main>    </body>  </html></template>

岛屿

在服务器模式下，导入到 .nexy 文件中的 Vue 组件是一个岛。

导入

在 .nexy 文件的 frontmatter 中导入组件：

---from "@/components/Counter.vue" import Counter---<Counter start=3 />

---from "@/components/Counter.vue" import Counter---<Counter start=3 />

补水指令

使用 directive 道具来控制岛屿何时水合：

• client:load（默认）：立即
• client:idle：当浏览器空闲时
• client:visible：当它滚动到视图中时
• client:media：当媒体查询匹配时

操作和导航

调用动作

使用 useAction 挂钩来管理操作调用的状态。在 Vue 中，返回的状态（pending、data、error）是计算的引用。

<script setup lang="ts">import { ref } from "vue";import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const title = ref("");const { run, pending, error, data } = useAction(add_todo, {  onSuccess: () => (title.value = ""),});</script> <template>  <form @submit.prevent="run({ title })">    <input v-model="title" />    <button :disabled="pending">Add</button>  </form></template>

导航

使用 Link 组件进行客户端转换：

<template>  <Link href="/about" active-class="active">About</Link></template>

对于编程式导航，请使用 useRouter 挂钩：

import { useRouter } from "@nexy/client"; const router = useRouter();router.push("/dashboard");

网址访问

所有位置挂钩都返回计算后的引用：

• usePathname()：当前路径
• useParams()：动态段
• useSearchParams()：查询字符串
• useLocation()：完整位置对象

后续步骤

• 视图：比较页面可以使用的格式
• 前端：Vite 和客户端构建

以 Markdown 复制本页 在 GitHub 上编辑