에오니아 Vue 테스트 버전 발표

혹시 아시는 분 계신가요?마치 얼마 전 우리가 Vue 2로 구축한 에오니아 Vue 테스트 버전을 내놓은 것 같다.Vue 3의 출시가 임박했음을 감안하여 Ionic Vue 출시를 준비하는 완벽한 시기가 될 것이라고 생각합니다.오늘 저는 Vue 3으로 구축된 새로운 버전과 개선된 Ionic Vue 테스트 버전을 매우 감격스럽게 발표합니다!

무엇이 이온 골격입니까?🤔
Ionic Framework는 플랫폼 간 고품질의 어플리케이션을 구축하는 데 사용되는 UI 구성 요소입니다.이 프로그램들은 iOS와 안드로이드 장치에 본체로 배치할 수도 있고 점진적 웹 응용 프로그램(PWA)으로 웹에 배치할 수도 있다.이 구성 요소들은 모두 HTML, CSS, 자바스크립트로 작성된 것이기 때문에 현대적이고 고품질의 사용자 인터페이스를 구축하기 쉬우며 어느 곳에서든 훌륭하게 표현할 수 있다.
우리는 Vue 개발자가 에오니아 프레임워크 커뮤니티에 가입하여 에오니아 Vue 테스트 버전을 출시하는 것을 기쁘게 환영합니다!

잠깐만, 너 작년에 테스트 했잖아.🤚
우리는 확실히 해냈어!우리가 오래된 Ionic Vue beta를 발표했을 때, 우리는 Ionic Vue와 Ionic React를 동시에 개발했다.우리는 곧 Ionic Vue와 Ionic React의 프레임워크 통합에는 많은 공통점이 있다는 것을 깨달았다.우리는 비슷한 기능을 실현하고 버그를 여러 차례 복구한 것을 발견했다.
또한 Vue 팀은 Vue 3의 개발을 가속화하기 시작했습니다. Ionic Framework가 이 버전을 지원하기를 바랍니다.
잠시 후 Ionic Vue에서 일시 정지 버튼을 눌러 Ionic React에 주목하기로 했습니다.그때부터 우리는 Ionic React에서 배운 모든 것을 Ionic Vue에 융합시켰고 그 결과에 대해 매우 기뻤다.

개시하다🏃‍♂️
우리는 Vue 3뿐만 아니라 새로운 Vue 라우터를 지원하는 에오니아 Vue를 업데이트했습니다.Vue 및 Ionic은 개발 버전의 Ionic CLI를 설치하여 간편하게 시작할 수 있습니다.

npm install -g @ionic/cli@testing

ionic start my-app tabs --type vue --tag vue-beta

--tag을 사용하면 최신 버전의 Ionic Vue starter를 다운로드할 수 있습니다.응용 프로그램을 설치한 후 다음 명령을 실행하여 개발 서버를 시작할 수 있습니다.

ionic serve

Only version 0.3.1 and newer of the Ionic Vue beta are compatible with Vue 3. To continue using the Ionic Vue beta with Vue 2, version 0.0.9 should be used.

여기서 우리는 에오니아 프레임워크의 모든 구성 요소를 방문할 수 있습니다.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Hello Vue</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Vue</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, } from '@ionic/vue';
export default {
  name: 'HomePage',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },
};
</script>

이러한 구성 요소를 사용하려면 @ionic/vue 패키지에서 가져와 Vue 구성 요소에 제공해야 합니다.

Vue 라우터 기반 구축🧭
기존 Ionic Vue beta 버전에서 누락된 중요한 부분 중 하나는 스택 기반 탐색 기능입니다.이 새 버전의 Ionic Vue는 다른 버전의 Ionic Framework와 같은 건장한 스택 관리를 가져왔습니다.Angular와 React 버전의 Ionic Framework와 마찬가지로 Vue에서 제공하는 공식 공유기 vue-router을 사용합니다.Ionic Framework 애니메이션을 처리하기 위해 ion-router-outlet 구성 요소를 통해 라우터의 API를 확장했습니다.이 구성 요소는 Vue 애플리케이션에서 사용되는 일반적인 keep-alive, router-view 및 transition 구성 요소를 대체하는 데 사용됩니다.
이러한 개선된 공유기를 사용하는 것은 기본적으로 일반적인 vue-router과 같지만 약간의 다른 도입이 있을 뿐이다.게으름 피우고 적재해도 상자를 열어 바로 사용할 수 있습니다!

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: ‘/lazy’,
      component: () => import(‘@/views/Lazy.vue’)
    }
  ]
})

createRouter에서 createWebHistory과 vue-router을 가져오는 것이 아니라 @ionic/vue-router에서 가져와야 합니다.이 가져오기는 같은 이름의 vue-router 함수를 봉인하고 Ionic Framework가 Vue 환경에서 잘 작동하도록 추가 세부 사항을 제공합니다.
Vue Router에서 제공하는 도구에 의존하는 것이 좋습니다. 그러나 이 도구를 사용할 수 있는 구성 요소에는 router-link 속성에 대한 지원이 추가되었습니다.

<ion-item router-link="/child-page">
  <ion-label>Click Me to Navigate</ion-label>
</ion-item>

router-direction을 사용하여 방향을 지정하고 router-animation을 사용하여 사용자 정의 애니메이션을 지정할 수도 있습니다.
전환 및 라이프 사이클 이벤트가 올바르게 작동하려면 각 Ionic 페이지를 ion-page 구성 요소로 포장해야 합니다.

<template>
  <ion-page> ... </ion-page>
</template>

<script>
import { IonPage } from '@ionic/vue';
export default { 
  name: 'HomePage', 
  components: { IonPage } 
};
</script>

적절한 이벤트를 제공하여 라이프 사이클 이벤트에 액세스할 수 있습니다.

export default {
  name: 'HomePage',
  components: {
    IonPage
  },
  methods: {
    ionViewDidEnter: () => {
      ...
    },
    ionViewDidLeave: () => {
      ...
    },
    ionViewWillEnter: () => {
      ...
    },
    ionViewWillLeave: () => {
      ...
    }
  }
 }

Vue로 일을 해요.🛠@ionic/vue에는 거의 모든 이온 프레임 구성 요소에 대한 지원이 포함되어 있습니다.이러한 구성 요소를 사용하는 것은 익숙하지만 Vue의 템플릿 구문은 사용됩니다.

<template>
  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"></ion-input>
  Value: { inputValueRef }
</template>

<script>
setup() {
  const inputValueRef = ref(‘’);
  return { inputValueRef };
}
</script>

덮어쓰기 구성 요소(예: ion-modal)는 @ionic/vue에서 적절한 디렉터를 임포트하여 동적으로 생성됩니다.

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import ModalExample from '@/components/Modal.vue';
export default {
  name: 'HomePage',
  components: { IonButton, IonContent, IonPage },
  setup() {
    const openModal = async () => {
      const modal = await modalController.create({
        component: ModalExample
      });
      await modal.present();
    }

    return { openModal }
  }
}
</script>

다음은요?🚢
우리는 다음과 같은 측면에서 피드백을 찾고 있다.

라우터 통합

탭용례

성능

@ionic/vue은 상당히 안정적이지만 여전히 테스트 단계에 있다.따라서 현재 우리는 아직 생산 환경에서 그것을 사용하는 것을 건의하지 않는다.
오류가 발생하면 누락된 기능을 요청하거나 Ionic Vue의 향상을 제안하려면 언제든지 create a new issue on GitHub으로 전화하십시오.반드시 책 제목에 당신이 새로운 에오니아 Vue 테스트 버전을 사용하고 있음을 명기해 주십시오!
또한 전체 revamped documentation 버전의 Ionic Vue를 발표했습니다.이 문서에는 일부 Ionic Vue 개념이 자세히 설명되어 있으므로 이러한 개념을 살펴보는 것이 좋습니다.이 문서들도 현재 진행 중인 작업이기 때문에 언제든지 발견한 문제나 보고 싶은 개선 사항을 보고하십시오.
우리는 @ionic/vue의 결과를 좋아합니다. 당신들도 좋아하길 바랍니다.지금은 Ionic 프레임워크로 응용 프로그램을 구축하기에 좋은 시기입니다. 우리는 당신이 무엇을 창조했는지 기다릴 수 없습니다.🚀

감사를 드리다
우리는 Modus Create의 친구들에게 진심으로 감사를 표하고 싶습니다.그들은 줄곧 아이오니아 베우가 오늘의 수준에 도달하도록 도와주고 있다.더욱 구체적으로 말하자면, 우리는 Michael Tintiuc에 감사를 드립니다. 그는 우리의 공사팀과 밀접하게 협력하여 에오니아 프레임워크가 Vue 응용 프로그램에서 순조롭게 작동하도록 해야 합니다.