Vue.js를 사용하여 마이크로 프런트엔드 만들기

13253 단어 javascriptbeginnersvuemicrofrontend

부인 성명



이 기사는 ModSquad 커뮤니티의 도움으로 작성되었습니다. 관련 라이브 세션은 여기에서 볼 수 있습니다.



소개



안녕하세요, 동료 개발자 여러분!

Angular 및 React로 마이크로 프런트엔드를 만드는 방법을 배운 후 Vue.js를 사용하여 다른 세계로 뛰어들고 있습니다. Angular, React 및 Vue.js와 같은 각 프레임워크에 대한 웹 구성 요소 사양을 사용하여 마이크로 프런트엔드를 만들려고 합니다.

Vue는 마이크로 프런트엔드 소셜 카드를 만들 때 최고의 개발자 경험을 제공합니까? 해 봅시다!

Vue.js 앱 만들기



먼저 npm(Yarn을 대신 사용할 수 있음) 및 Vue CLI와 함께 Node를 설치했는지 확인합니다.

npm install -g @vue/cli


그런 다음 대상 폴더에서 다음 명령을 실행하여 애플리케이션을 만들 수 있습니다. 기본 옵션Default ([Vue 3] babel, eslint)을 사용하는 것이 좋습니다.

vue create vue-social-card


그러면 새 Vue.js 프로젝트가 포함된 vue-social-card라는 폴더가 생성됩니다.



기본적으로 응용 프로그램은 앱을 시작하는 npm 스크립트 및 코딩을 돕는 eslint와 같은 특정 기능을 포함하도록 구성되어 있습니다.

귀하의 애플리케이션을 발견하십시오



변경을 수행하고 마이크로 프런트엔드를 생성하기 전에 npm run serve 명령을 사용하여 애플리케이션을 로컬에서 실행해 보겠습니다. 그러면 다음 URL에서 애플리케이션을 사용할 수 있습니다. http://localhost:8080/ .



소셜 카드 구성 요소 만들기



Vue.js는 구성 요소로 코드를 구성하는 데 도움이 됩니다. 즉, 모든 카드 코드를 포함할 파일을 만들어야 합니다. HelloWorld.vue라는 기본 파일을 삭제할 수 있습니다.

구성 요소 폴더에 SocialCard.vue라는 새 파일을 만든 후 다음 코드를 여기에 복사합니다.

<script>
export default {
  props: {
    card: {
      type: Object,
      required: true
    }
  },
};
</script>

<template>
 <div class="card">
  <h2>{{ card.name }}</h2>
     <span>{{ card.description }}</span>
  <img :src="card.image" :alt="card.image_alt"/>
 </div>
</template>

<style>
.card {
width: 320px;
height: auto;
min-height: 450px;
background: rgb(60, 62, 68);
border-radius: 20px;
overflow: hidden;
padding: 10px 15px;
margin-bottom: 24px;
margin-right: 10px;
transition: all 0.2s linear;
cursor: pointer;
color: white;
}
img {
margin-top: 5%;
 max-width: 100%;
 height: auto;
}
.card:hover {
transform: scale(1.01);
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2),
 0 1px 15px 0 rgba(0, 0, 0, 0.19);
}
.card > .title {
margin: 0;
}
</style>


우리의 구성 요소는 card라는 항목 개체가 필요하고 name , description , image 및 image_alt 속성을 정의하는 간단한 HTML/CSS 코드 조각입니다.

현재로서는 app.vue 파일의 오류로 인해 응용 프로그램이 손상될 수 있습니다. 업데이트할 시간입니다.

App.vue 업데이트



앱이 작동하지 않는 이유는 기본 구성 요소에 여전히 기본 구성 요소가 포함되어 있기 때문입니다. 이를 수정하려면 파일 내용을 다음 코드로 바꿉니다.

<script>
import SocialCard from "@/components/SocialCard";

export default {
  components: {
    SocialCard
  },
  data() {
    return {
      shiba_card: {
        id: 1,
        name: 'Shiba Inu',
        description: 'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n' +
            '      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n' +
            '      bred for hunting.',
        image: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
        image_alt: 'The Shiba Inu image'
      },
    }
  }
};
</script>

<template>
  <SocialCard :card=shiba_card></SocialCard>
</template>


그러면 소셜 카드 구성 요소를 가져오고 shiba_card 함수에서 카드 개체data()를 정의하여 다양한 속성을 저장한 다음 카드 개체를 template 섹션의 소셜 카드 구성 요소에 전달합니다.

애플리케이션이 다시 작동하고 기본 Vue 랜딩 페이지가 Shiba Inu 소셜 카드로 대체됩니다.



그러나 우리는 고전적인 단일 페이지 애플리케이션만 구축했으며 이를 마이크로 프런트엔드로 마이그레이션해야 합니다.

맞춤 요소 정의



이 앱을 웹 구성 요소로 재사용하려면 사용자 지정 요소를 정의해야 합니다. 이는 Angular 및 React를 사용할 때 발견한 일반적인 단계입니다.

main.js 파일의 내용을 다음으로 바꿉니다.

import App from './App.vue'

import { defineCustomElement } from 'vue'

const SocialCardElement = defineCustomElement(App)

customElements.define('social-card-element', SocialCardElement)


이 코드는 social-card-element 사용자 정의 요소를 정의하고 Vue 앱을 래핑합니다. 이전에 본 것처럼 이 앱은 이제 예상대로 카드를 렌더링하고 있습니다.

다음으로 <div id="app"></div> 파일의 public/index.html를 사용자 정의 요소로 바꿉니다.

<body>
 <noscript>
   <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <social-card-element></social-card-element>
 <!-- built files will be auto injected -->
</body>


축하합니다! 사용자 정의 요소를 사용하여 Vue.js 마이크로 프런트엔드를 구축했습니다.

이 기사를 작성하는 동안 여기에서 자세히 설명하는 스타일 및 사용자 정의 요소에 대한 문제가 있다는 점에 유의하십시오. https://github.com/vuejs/core/issues/4662 . 언제 수정될지 또는 현재 해결 방법을 알아보려면 이 티켓을 따르십시오.

자원



위의 코드는 GitHub에서 사용할 수 있습니다. https://github.com/avdev4j/vue-social-card

카드 예제에 대한 이 저장소 덕분에: https://github.com/AlanPenaRuiz/vue-rick-and-morty

이미 Entando를 사용 중이고 Vue.js 구성 요소를 찾고 있습니까? 이 샘플을 살펴보십시오. https://github.com/entando-samples/ent-project-template-vue

YouTube 채널에서 마이크로 프런트엔드 동영상을 시청하세요.

Discord에 가입하여 구성 가능한 앱에 대해 공유하고 알아보세요: https://discord.gg/SdMCvyzzHm
React Router v6.3을 사용하는 동적 페이지
내 인생의 멤피스에서 뜨겁든 아니든 (python,sqlite)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage