В предыдущей статье мы рассмотрели добавление React в проект Astro 1.0.
Сегодня мы рассмотрим, как мы можем запускать несколько фреймворков одновременно в Astro.

Это настоящая суперсила, поскольку мы можем свободно смешивать и сочетать фреймворки.

Возьмем предыдущую статью за отправную точку.
Получить ветку с GitHub

Технически вы можете выбрать любой фреймворк. Я буду использовать Vue для этого случая.


Добавление второго фреймворка в Astro

Первое, что нам нужно сделать, это установить новый фреймворк.
Для Vue мы можем запустить следующую команду.

npm run astro add vue
Войти в полноэкранный режим

Выйти из полноэкранного режима

После этого вы должны увидеть настройки React и Vue в своем astro.config.mjs файл.

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';

export default defineConfig({
  integrations: [react(), vue()],
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь мы можем добавить новый компонент Vue в наш src/components каталог.
я назову этот файл Vue.vue (супер оригинал).

<script>
export default {
  data() {
    return {
      count: 0,
      name: 'Vue',
    };
  },
};
</script>

<template>
  <button @click="count--">-</button>
  <pre>{{ count }}</pre>
  <button @click="count++">+</button>
  <p>I'm a {{ name }} component</p>
</template>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это базовый счетчик, который мы сделали для компонента React. И затем мы отвечаем, на каком языке находится этот конкретный компонент.

Теперь мы можем попробовать добавить этот компонент в наш index.astro страница.

---
import React from '../components/React.jsx';
import Vue from '../components/Vue.vue';
---
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <React client:load />
        <hr />
        <Vue client:load />
    </body>
</html>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Как видите, мы решили увлажнить это на client:load так счетчик будет работать.
Подробнее об увлажнении (Прокрутите немного вниз).

Если мы сейчас запустим наше приложение, мы должны увидеть оба компонента активными и работающими.

Компонент React и Vue внутри Astro

Вы также можете найти сегодняшний код в этом репозиторий GitHub.


Спасибо за чтение, и давайте общаться!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер