deno.com
本页内容

构建一个 Vue.js 应用

Vue.js 是一个渐进式前端 JavaScript 框架。它提供了创建动态和交互式用户界面的工具和功能。

在本教程中，我们将使用 Vite 和 Deno 构建一个简单的 Vue.js 应用。该应用将显示一个恐龙列表。当你点击其中一个时，它会带你到一个恐龙页面，显示更多详细信息。你可以在 GitHub 上查看完整的应用。

The Vue.js app in action

使用 Vite 和 Deno 创建 Vue.js 应用 跳转到标题

我们将使用 Vite 脚手架搭建一个基本的 Vue.js 应用。在你的终端中，运行以下命令来创建一个新的 Vite .js 应用

deno run -A npm:create-vite

当出现提示时，为你的应用命名，并在提供的框架中选择 Vue，然后选择 TypeScript 作为变体。

创建后，cd 进入你的新项目，并运行以下命令安装依赖

deno install

然后，运行以下命令来启动你的新 Vue.js 应用

deno task dev

Deno 将运行 package.json 文件中的 dev 任务，这将启动 Vite 服务器。点击输出的 localhost 链接以在浏览器中查看你的应用。

配置格式化程序 跳转到标题

deno fmt 支持使用 --unstable-component 标志的 Vue 文件。要使用它，运行此命令

deno fmt --unstable-component

要配置 deno fmt 始终格式化你的 Vue 文件，请将此添加到你的 deno.json 文件的顶层

"unstable": ["fmt-component"]

添加后端 跳转到标题

下一步是添加一个后端 API。我们将创建一个非常简单的 API，用于返回恐龙信息。

在你的新 vite 项目根目录下，创建一个 api 文件夹。在该文件夹中，创建一个 main.ts 文件（用于运行服务器）和一个 data.json 文件（用于存放硬编码数据）。

复制并粘贴这个 JSON 文件到 api/data.json 中。

我们将构建一个简单的 API 服务器，其中包含返回恐龙信息的路由。我们将使用 oak 中间件框架和 cors 中间件来启用 CORS。

使用 deno add 命令将所需的依赖项添加到你的项目

deno add jsr:@oak/oak jsr:@tajpouria/cors

接下来，更新 api/main.ts 以导入所需的模块并创建一个新的 Router 实例来定义一些路由

main.ts
import { Application, Router } from "@oak/oak";
import { oakCors } from "@tajpouria/cors";
import data from "./data.json" with { type: "json" };

const router = new Router();

之后，在同一个文件中，我们将定义三个路由。第一个路由 / 将返回字符串 Welcome to the dinosaur API，然后我们将设置 /dinosaurs 以返回所有恐龙，最后 /dinosaurs/:dinosaur 将根据 URL 中的名称返回特定恐龙。

main.ts
router
  .get("/", (context) => {
    context.response.body = "Welcome to dinosaur API!";
  })
  .get("/dinosaurs", (context) => {
    context.response.body = data;
  })
  .get("/dinosaurs/:dinosaur", (context) => {
    if (!context?.params?.dinosaur) {
      context.response.body = "No dinosaur name provided.";
    }

    const dinosaur = data.find((item) =>
      item.name.toLowerCase() === context.params.dinosaur.toLowerCase()
    );

    context.response.body = dinosaur ? dinosaur : "No dinosaur found.";
  });

最后，在同一文件的底部，创建一个新的 Application 实例，并使用 app.use(router.routes()) 将我们刚刚定义的路由附加到应用程序，然后启动服务器监听端口 8000。

main.ts
const app = new Application();
app.use(oakCors());
app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });

你可以使用 deno run --allow-env --allow-net api/main.ts 运行 API 服务器。我们将创建一个任务来运行此命令，并更新 dev 任务以同时运行 Vue.js 应用和 API 服务器。

在你的 package.json 文件中，更新 scripts 字段以包含以下内容

{
  "scripts": {
    "dev": "deno task dev:api & deno task dev:vite",
    "dev:api": "deno run --allow-env --allow-net api/main.ts",
    "dev:vite": "deno run -A npm:vite",
    // ...
}

现在，如果你运行 deno task dev 并访问 localhost:8000，你的浏览器中应该会看到文本 Welcome to dinosaur API!；如果你访问 localhost:8000/dinosaurs，则应该会看到所有恐龙的 JSON 响应。

构建前端 跳转到标题

入口点和路由 跳转到标题

在 src 目录下，你会找到一个 main.ts 文件。这是 Vue.js 应用的入口点。我们的应用将有多个路由，因此我们需要一个路由器来进行客户端路由。我们将为此使用官方的 Vue Router。

更新 src/main.ts 以导入和使用路由器

import { createApp } from "vue";
import router from "./router/index.ts";

import "./style.css";
import App from "./App.vue";

createApp(App)
  .use(router)
  .mount("#app");

使用 deno add 将 Vue Router 模块添加到项目

deno add npm:vue-router

接下来，在 src 目录下创建一个 router 文件夹。在其中，创建一个 index.ts 文件，内容如下

router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomePage from "../components/HomePage.vue";
import Dinosaur from "../components/Dinosaur.vue";

export default createRouter({
  history: createWebHistory("/"),
  routes: [
    {
      path: "/",
      name: "Home",
      component: HomePage,
    },
    {
      path: "/:dinosaur",
      name: "Dinosaur",
      component: Dinosaur,
      props: true,
    },
  ],
});

这将设置一个包含两个路由的路由器：/ 和 /:dinosaur。HomePage 组件将在 / 处渲染，Dinosaur 组件将在 /:dinosaur 处渲染。

最后，你可以删除 src/App.vue 文件中的所有代码，并更新它，使其只包含 <RouterView> 组件

App.vue
<template>
  <RouterView />
</template>

组件 跳转到标题

Vue.js 将前端 UI 拆分为组件。每个组件都是可重用的代码片段。我们将创建三个组件：一个用于主页，一个用于恐龙列表，以及一个用于单个恐龙。

每个组件文件分为三个部分：<script>、<template> 和 <style>。<script> 标签包含组件的 JavaScript 逻辑，<template> 标签包含 HTML，<style> 标签包含 CSS。

在 /src/components 目录下，创建三个新文件：HomePage.vue、Dinosaurs.vue 和 Dinosaur.vue。

Dinosaurs 组件 跳转到标题

Dinosaurs 组件将从我们之前设置的 API 中获取恐龙列表，并使用 Vue Router 的 RouterLink 组件将它们渲染为链接。（因为我们正在创建一个 TypeScript 项目，不要忘记在 script 标签上指定 lang="ts" 属性。）将以下代码添加到 Dinosaurs.vue 文件中

Dinosaurs.vue
<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    async setup() {
      const res = await fetch("https://:8000/dinosaurs");
      const dinosaurs = await res.json() as Dinosaur[];
      return { dinosaurs };
    },
  });
</script>

<template>
  <div v-for="dinosaur in dinosaurs" :key="dinosaur.name">
    <RouterLink
      :to="{ name: 'Dinosaur', params: { dinosaur: `${dinosaur.name.toLowerCase()}` } }"
    >
      {{ dinosaur.name }}
    </RouterLink>
  </div>
</template>

此代码使用 Vue.js 的 v-for 指令迭代 dinosaurs 数组，并将每个恐龙渲染为 RouterLink 组件。RouterLink 组件的 :to 属性指定了点击链接时导航到的路由，:key 属性用于唯一标识每个恐龙。

Homepage 组件 跳转到标题

主页将包含一个标题，然后渲染 Dinosaurs 组件。将以下代码添加到 HomePage.vue 文件中

HomePage.vue
<script setup lang="ts">
  import Dinosaurs from "./Dinosaurs.vue";
</script>
<template>
  <h1>Welcome to the Dinosaur App! 🦕</h1>
  <p>Click on a dinosaur to learn more about them</p>
  <Suspense>
    <template #default>
      <Dinosaurs />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

由于 Dinosaurs 组件异步获取数据，请使用 Suspense 组件来处理加载状态。

Dinosaur 组件 跳转到标题

Dinosaur 组件将显示特定恐龙的名称和描述，以及一个返回完整列表的链接。

首先，我们将为要获取的数据设置一些类型。在 src 目录下创建一个 types.ts 文件并添加以下代码

types.ts
type Dinosaur = {
  name: string;
  description: string;
};

type ComponentData = {
  dinosaurDetails: null | Dinosaur;
};

然后更新 Dinosaur.vue 文件

Dinosaur.vue
<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    props: { dinosaur: String },
    data(): ComponentData {
      return {
        dinosaurDetails: null,
      };
    },
    async mounted() {
      const res = await fetch(
        `https://:8000/dinosaurs/${this.dinosaur}`,
      );
      this.dinosaurDetails = await res.json();
    },
  });
</script>

<template>
  <h1>{{ dinosaurDetails?.name }}</h1>
  <p>{{ dinosaurDetails?.description }}</p>
  <RouterLink to="/">🠠 Back to all dinosaurs</RouterLink>
</template>

此代码使用 props 选项定义了一个名为 dinosaur 的 prop，该 prop 将传递给组件。mounted 生命周期钩子用于根据 dinosaur prop 获取恐龙的详细信息，并将其存储在 dinosaurDetails 数据属性中。然后，这些数据在模板中渲染。

运行应用 跳转到标题

现在我们已经设置好了前端和后端，我们可以运行应用了。在你的终端中，运行以下命令

deno task dev

在浏览器中访问输出的 localhost 链接以查看应用。点击恐龙以查看更多详细信息！

The vue app in action

🦕 既然你已经能够在 Deno 中使用 Vite 运行 Vue 应用，你就可以开始构建实际应用了！如果你想在此演示的基础上进行扩展，可以考虑构建一个后端服务器来在构建后提供静态应用，这样你就可以将你的恐龙应用部署到云端了。

您找到所需内容了吗？

编辑此页面
隐私政策