构建一个 Vue.js 应用
Vue.js 是一个渐进式前端 JavaScript 框架。它提供了用于创建动态和交互式用户界面的工具和功能。
在本教程中，我们将使用 Vite 和 Deno 构建一个简单的 Vue.js 应用。该应用将显示恐龙列表。当您单击其中一个时，它将带您进入包含更多详细信息的恐龙页面。您可以在 GitHub 上查看完成的应用。
使用 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 服务器。点击输出的本地主机链接，即可在浏览器中查看您的应用。
添加后端 跳转到标题
下一步是添加后端 API。我们将创建一个非常简单的 API，用于返回有关恐龙的信息。
在新的 Vite 项目的根目录下，创建一个 api 文件夹。在该文件夹中，创建一个 main.ts 文件（用于运行服务器）和一个 data.json 文件（用于存放硬编码数据）。
将此 JSON 文件复制并粘贴到 api/data.json 中。
我们将使用 oak 中间件框架 和 cors 中间件 构建一个简单的 API 服务器，其路由返回恐龙信息，并启用 CORS。
使用 deno add 命令将所需的依赖项添加到您的项目中。
deno add jsr:@oak/oak jsr:@tajpouria/cors
接下来，更新 api/main.ts 以导入所需的模块，并创建一个新的 Router 实例来定义一些路由。
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 中的名称返回特定的恐龙。
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。
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 文件。
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> 组件。
<template>
<RouterView />
</template>;
组件 跳转到标题
Vue.js 将前端 UI 拆分为组件。每个组件都是可重用的代码段。我们将创建三个组件：一个用于主页，一个用于恐龙列表，一个用于单个恐龙。
每个组件文件都被分成三个部分：<script>、<template> 和 <style>。<script> 标签包含组件的 JavaScript 逻辑，<template> 标签包含 HTML，而 <style> 标签包含 CSS。
在 /src/components 目录中，创建三个新文件：HomePage.vue、Dinosaurs.vue 和 Dinosaur.vue。
恐龙组件 跳转到标题
Dinosaurs 组件将从我们之前设置的 API 中获取恐龙列表，并使用Vue Router 的 RouterLink 组件 将它们渲染为链接。（因为我们正在创建一个 TypeScript 项目，不要忘记在 script 标签上指定 lang="ts" 属性。）将以下代码添加到 Dinosaurs.vue 文件中
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
async setup() {
const res = await fetch("https://127.0.0.1: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 属性用于唯一标识每个恐龙。
主页组件 跳转到标题
主页将包含一个标题，然后它将渲染 Dinosaurs 组件。将以下代码添加到 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 组件将显示特定恐龙的名称和描述，以及返回完整列表的链接。
首先，我们将为要获取的数据设置一些类型。在 src 目录中创建一个 types.ts 文件，并添加以下代码
type Dinosaur = {
name: string;
description: string;
};
type ComponentData = {
dinosaurDetails: null | Dinosaur;
};
然后更新 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://127.0.0.1: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，它将被传递给组件。mounted 生命周期钩子用于根据 dinosaur prop 获取恐龙的详细信息，并将它们存储在 dinosaurDetails 数据属性中。然后，这些数据将在模板中渲染。
运行应用程序 跳转到标题
现在我们已经设置好了前端和后端，可以运行应用程序了。在终端中，运行以下命令
deno task dev
在浏览器中访问输出的 localhost 链接以查看应用程序。点击一只恐龙查看更多详细信息！
🦕 现在您可以在 Deno 中使用 Vite 运行 Vue 应用程序了，您可以构建真实的应用程序！如果您想扩展此演示，您可以考虑构建一个后端服务器，以便在构建后提供静态应用程序，然后您就可以将您的恐龙应用程序部署到云端。