Создайте приложение Vue.js

Vue.js — это прогрессивный фреймворк JavaScript для фронтенда. Он предоставляет инструменты и возможности для создания динамичных и интерактивных пользовательских интерфейсов.

В этом руководстве мы создадим простое приложение Vue.js с использованием Vite и Deno. Приложение будет отображать список динозавров. При нажатии на одного динозавра вы перейдете на страницу динозавра с дополнительными сведениями. Вы можете увидеть готовое приложение на GitHub.

Создайте приложение Vue.js с Vite и Deno

Мы будем использовать Vite для создания базового приложения Vue.js. В терминале выполните следующую команду для создания нового приложения .js с Vite:

deno run -A npm:create-vite

При запросе присвойте вашему приложению имя и выберите Vue из предложенных фреймворков и TypeScript в качестве варианта.

После создания, cd в ваш новый проект и выполните следующую команду для установки зависимостей:

deno install

Затем выполните следующую команду для запуска вашего нового приложения Vue.js:

deno task dev

Deno запустит dev задачу из файла package.json, которая запустит сервер Vite. Щелкните ссылку вывода на localhost, чтобы увидеть ваше приложение в браузере.

Добавить бэкенд

Следующий шаг — добавление бэкенд-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 экземпляра для определения некоторых маршрутов:

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 });

Вы можете запустить сервер API с помощью deno run --allow-env --allow-net api/main.ts. Мы создадим задачу для выполнения этой команды и обновим задачу разработчика для выполнения как приложения 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");

Добавьте модуль Vue Router в проект с помощью deno add:

deno add npm:vue-router

Далее создайте каталог router в каталоге src. В нем создайте файл 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 разбивает пользовательский интерфейс фронтенда на компоненты. Каждый компонент — это повторно используемый фрагмент кода. Мы создадим три компонента: один для домашней страницы, один для списка динозавров и один для отдельного динозавра.

Каждый файл компонента разделен на три части: <script>, <template>, и <style>. Тег <script> содержит логику JavaScript для компонента, тег <template> содержит HTML, а тег <style> содержит CSS.

В каталоге /src/components создайте три новых файла: HomePage.vue, Dinosaurs.vue, и Dinosaur.vue.

Компонент Dinosaurs

Компонент Dinosaurs получит список динозавров из ранее созданного API и отобразит их в виде ссылок с использованием RouterLink компонента из Vue Router. (Так как мы создаем проект TypeScript, не забудьте указать атрибут lang="ts" в теге script.) Добавьте следующий код в файл Dinosaurs.vue:

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

export default defineComponent({
    async setup() {
        const res = await fetch("http://localhost: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. Атрибут :to компонента RouterLink определяет маршрут для перехода при щелчке по ссылке, а атрибут :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

Компонент Dinosaur отобразит имя и описание конкретного динозавра, а также ссылку для возвращения к полному списку.

Сначала мы настроим некоторые типы данных для извлекаемых данных. Создайте файл types.ts в каталоге src и добавьте следующий код:

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(`http://localhost: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, которое будет передано в компонент. Хук жизненного цикла mounted используется для извлечения подробностей о динозавре на основе свойства dinosaur и хранения их в свойстве данных dinosaurDetails. Эти данные затем отображаются в шаблоне.

Запустить приложение

После настройки фронтенда и бэкенда мы можем запустить приложение. В терминале выполните следующую команду:

deno task dev

Перейдите по ссылке localhost в браузере, чтобы увидеть приложение. Нажмите на динозавра, чтобы увидеть подробности!

🦕 Теперь, когда вы можете запустить приложение Vue в Deno с Vite, вы готовы создавать реальные приложения! Если вы хотите расширить эту демонстрацию, вы можете рассмотреть создание бэкенд-сервера для предоставления статического приложения после его сборки, тогда вы сможете развернуть ваше приложение динозавров в облаке.