Astro에서 여러 프레임워크 실행
오늘은 Astro에서 여러 프레임워크를 동시에 실행할 수 있는 방법을 살펴보겠습니다.
프레임워크를 자유롭게 혼합하고 일치시킬 수 있기 때문에 이것은 진정한 초강력입니다.
이전 기사를 시작점으로 삼겠습니다.
Get the branch from GitHub
기술적으로 모든 프레임워크를 선택할 수 있습니다. 이 경우 Vue를 사용하겠습니다.
Astro에 두 번째 프레임워크 추가
가장 먼저 해야 할 일은 새 프레임워크를 설치하는 것입니다.
Vue의 경우 다음 명령을 실행할 수 있습니다.
npm run astro add vue
완료되면
astro.config.mjs 파일에 React 및 Vue 설정이 표시되어야 합니다.import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
export default defineConfig({
integrations: [react(), vue()],
});
이제
src/components 디렉토리에 새로운 Vue 구성 요소를 추가할 수 있습니다.이 파일
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에 수화하기로 결정했습니다.Read more about hydration (조금 아래로 스크롤).
이제 응용 프로그램을 실행하면 구성 요소가 모두 활성화되고 작동하는 것을 볼 수 있습니다.
여기에서 오늘의 코드를 찾을 수도 있습니다GitHub repo.
읽어주셔서 감사합니다. 연결해 봅시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(Astro에서 여러 프레임워크 실행), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/running-multiple-frameworks-in-astro-5io텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
