Ionic Vue 발표

오늘 저는 Ionic Vue가 발표되었습니다. 이것은 Ionic Framework의 본기 Vue 버전입니다. iOS, Android, 웹을 위해 쉽게 응용 프로그램을 구축하여 진보된 웹 응용 프로그램으로 만들 수 있습니다.Ionic Vue는 최근 출시된 Vue 3의 모든 새로운 기능을 활용하기 위해 제작되었습니다.
에오니아 Vue는 에오니아 프레임워크 개발의 중대한 이정표를 대표하여 2020년 초에 우리의 React integration을 발표하였다.이번 발표는 2019년 초 Ionic Framework v4의 발표에 따라 시작된 우리의'Ionic for Everyone'추송의 하이라이트입니다.그래서 나는 우리가 어떻게 이곳에 왔는지, 그리고 다음에 어디로 가야 하는지 등 배경 지식을 공유하고 싶다.
Click here Ionic Vue를 사용해서 구축하고 싶을 뿐이라면 화내지 않겠습니다.😊

이온 뼈대 정보💁‍♀️

만약 네가 아이오니아를 처음 들었다면, 안녕!👋
Ionic Framework는 소스 UI 도구 패키지로 iOS, 안드로이드, 웹을 위한 고품질의 모바일 응용 프로그램 구축에 전념합니다!처음부터 HTML, CSS, 자바스크립트로 구축되었기 때문에 웹 개발자들은 집에서 우리의 구성 요소를 사용한다고 느껴야 한다.우리의 구성 요소는 개발자가 웹 기술을 사용하는 동시에 로컬 체험을 구축할 수 있도록 허용한다.오늘, 에오니아 동력 > 15% of all apps.

약사📖

너는 우리가 2019년 초에 발표한 Ionic Vue 테스트 버전을 기억하고 있을 것이다.이 버전은 Vue 2를 위한 것으로 적절한 v-model 지원 기능이 없습니다.Ionic Vue와 Ionic React를 개발하면서 공통점이 많다는 것을 금방 깨달았습니다.사실 우리는 비슷한 기능을 실현했고 같은 오류를 여러 차례 복구했다.
마찬가지로 그 동안 Vue팀은 Vue3의 개발을 가속화하기 시작했고 우리는 Ionic Framework가 이 버전을 지원하는 것이 의미가 있다고 생각한다.우리는 이온 Vue의 개발을 잠시 멈추고 이온 반응으로 중점을 옮겼다.그것의 완성에 따라 우리는 Ionic Vue 개발에 필요한 모든 관건적인 지식을 습득했다는 것을 알게 되었다. 우리는 결과에 대해 매우 기쁘다. 만약 우리가 이렇게 말할 수 있다면.

중대한 이정표🏆

2019년 1월 출시된 이래로 우리는 Ionic Framework v4가 모든 웹 개발자의 응용 프로그램 프레임워크가 되기를 희망한다.어느 정도 우리는 친절하게 Ionic Framework v4를'모든 사람이 Ionic를 사용할 수 있다'라고 부른다이 버전에서는 웹 구성 요소를 사용하여 처음부터 Ionic 프레임워크를 재구성합니다.비록 이 변화는 시간이 필요하지만, 최종적으로 Ionic 프레임워크를 재편성할 필요가 없이 모든 프레임워크를 지원할 수 있게 한다.
오늘은 Angular뿐만 아니라 React와 Vue에도 주력합니다.어떤 의미에서 말하자면, 이온 진공 전자 설비의 방출은 우리의 노력이 보답을 얻었다는 것을 나타낸다.React와 Vue 통합은 Ionic Framework에 대한 중대한 재작성이 필요하지 않으며, Ionic API는 전체 프레임워크 통합에서 여전히 매우 비슷하다.
Ionic Vue의 발표에 따르면 모든 웹 개발자는 그들이 선택한 프레임워크를 사용하고 Ionic 프레임워크를 이용하여 고성능, 크로스플랫폼 응용 프로그램을 구축할 수 있다.

입문🏃‍♂️

Note: The first official version of Ionic Vue is v5.4.0

아이오니아 뷰는 사용하기 쉽습니다.먼저 최신 버전의 Ionic CLI를 설치했는지 확인합니다.

npm install -g @ionic/cli@latest

If you used the Ionic Vue beta, be sure to update your CLI as you likely were using a pre-release version.

여기서 Ionic CLI를 사용하여 Ionic Vue starter 애플리케이션을 만들 수 있습니다.

ionic start my-vue-app --type vue

CLI는 먼저 몇 가지 질문을 통해 설치 프로세스를 안내합니다.응용 프로그램을 설치한 후 다음 명령을 실행하여 개발 서버를 시작할 수 있습니다.

ionic serve

백그라운드에서 ionic serve 명령은 Vue CLI를 사용하여 응용 프로그램을 컴파일하고 개발 서버를 시작하며 새 브라우저 창에서 응용 프로그램을 엽니다.
여기서 Ionic Framework의 모든 구성 요소에 액세스할 수 있습니다.

<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 { defineComponent } from 'vue';
  import {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
  });
</script>

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

Vue 라우터 기반 구축🧭

Angular 및 React 버전의 Ionic Framework와 마찬가지로 Vue에서 제공하는 공식 라우터 vue-router을 사용합니다.Ionic Framework 애니메이션을 처리하기 위해 ion-router-outlet 구성 요소를 통해 라우터의 API를 확장했습니다.이 구성 요소는 Vue 응용 프로그램에서 사용되는 일반적인 router-view 구성 요소를 대체하는 데 사용됩니다.
이러한 개선된 공유기를 사용하는 것은 기본적으로 일반적인 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 { defineComponent } from 'vue';
  import { IonPage } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonPage },
  });
</script>

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

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

Vue로 일을 해요.🛠

@ionic/vue은 가상 스크롤을 제외한 모든 Ionic Framework 구성 요소에 대한 지원을 포함합니다.Vue 응용 프로그램에서 가상 스크롤된 커뮤니티 드라이버 솔루션을 사용하고 있으며 이 솔루션을 어떻게 사용하는지에 대한 더 많은 정보를 곧 제공할 것입니다!Ionic Vue에서 구성 요소를 사용하는 것은 익숙하지만 Vue의 템플릿 구문은 사용됩니다.

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

<script>
  import { defineComponent, ref } from 'vue';
  import { IonInput } from '@ionic/vue';
  export default defineComponent({
    name: 'MyComponent',
    components: { IonInput },
    methods: {
      onChange: (ev: CustomEvent) => {
        ...
      }
    },
    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 { defineComponent } from 'vue';
  import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonButton, IonContent, IonPage },
    setup() {
      const openModal = async () => {
        const modal = await modalController.create({
          component: ModalExample,
        });
        await modal.present();
      };

      return { openModal };
    },
  });
</script>

어셈블리 덮어쓰기는 어셈블리의 템플릿에서 직접 사용할 수도 있습니다.

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setModal(true)">Open Modal</ion-button>
      <ion-modal :is-open="isOpen" @onDidDismiss="setModal(false)">
        <ModalExample></ModalExample>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { IonButton, IonContent, IonModal, IonPage } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { ModalExample, IonButton, IonContent, IonModal, IonPage },
    setup() {
      const isOpen = ref(false);
      const setModal = (state: boolean) => (isOpen.value = state);

      return { isOpen, setModal };
    },
  });
</script>

TypeScript 또는 JavaScript를 사용하여 구축 방법✌️

우리는 에오니아의 TypeScript를 좋아한다. 오랫동안 우리는 그것을 확장 가능한 응용 프로그램을 구축하는 절호의 도구로 여겨왔다.즉, 우리는 Vue 커뮤니티가 도구, 언어 등 분야에서 얼마나 단순성을 중시하는지 안다.사실 이것은 당신을 Vue에 가입하게 한 원인일 가능성이 높다.간단하게 시작해서 필요에 따라 규모를 확대한다.
따라서 TypeScript 대신 JavaScript를 사용하는 것을 선호한다면 가능합니다.Ionic Vue 응용 프로그램을 생성합니다(위 참조).

TypeScript 종속성 삭제:

npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript

모든 .ts 파일을 .js으로 변경합니다.이 값은 비어 있는 Ionic Vue 응용 프로그램에서 router/index.ts 및 main.ts에 불과해야 합니다.

은 @vue/typescript/recommended에서 @typescript-eslint/no-explicit-any 및 .eslintrc.js을 삭제합니다: "닫기".

은 Array<RouteRecordRaw>에서 router/index.js을 제거합니다.

Vue의 진정한 현지 경험📱

Vue 자체는 모바일 응용 프로그램 개발을 지원하지 않지만, 다행히도 Ionic Vue와 Capacitor을 조합할 수 있습니다.아이오니아의 공식 크로스플랫폼 본기를 사용할 때, 당신의 응용 프로그램을 점진적인 네트워크 응용 프로그램과 iOS/Android 응용 프로그램으로 배치할 수 있습니다. 모든 응용 프로그램은 같은 코드 라이브러리에서 옵니다.
다음은 두 개의 콘덴서 API를 사용하는 예시로 Camera과 Filesystem이다.모바일 장치에서 카메라를 켜면 새 사진을 찍은 다음 장치 메모리에 저장할 수 있습니다.

const takePhoto = async () => {
  const cameraPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100,
  });

  const base64Data = convertPhotoToBase64(cameraPhoto);

  const savedFile = await Filesystem.writeFile({
    path: 'myphoto.jpg',
    data: base64Data,
    directory: FilesystemDirectory.Data,
  });
};

코드에 "웹", "iOS"또는 "Android"는 언급되지 않았습니다.이것은 Capactor가 응용 프로그램이 실행되는 플랫폼을 자동으로 검사하고 적당한 기본 층 코드를 호출하기 때문이다.이러한 핵심 API와 네이티브 SDK에 대한 완전한 액세스를 통해 Capactor는 진정한 네이티브 모바일 애플리케이션을 구축할 수 있습니다.

다음은 뭐예요?🛣

에오니아 Vue를 더욱 깊이 있게 이해하기 위해서, 우리는 우리의 Quickstart Guide을 보는 것을 건의합니다.더 많은 실천 경험을 얻으려면 우리의 Build Your First App Guide을 보십시오.
Ionic Vue의 발표는 Ionic Framework의 중요한 이정표이지만, 항상 더 많은 일을 해야 한다.앞으로 Ionic Vue에 대한 전체 서버 쪽 렌더링(SSR) 지원을 발표할 예정입니다.어떻게 시작하는지에 관한 블로그 게시물을 유의하세요!
일반적인 이온 프레임워크 개발에 있어서 우리는 사람을 흥분시키는 많은 일을 계획했기 때문에 계속 관심을 가져 주십시오.그리고 에오니아 프레임워크의 다음 단계가 어디로 향하고 있는지 알려주세요!

정말 감사합니다.💙

저는 아이오니아 Vue 테스트 버전을 테스트하고 피드백을 제공해 주신 모든 지역 사회 구성원들에게 진심으로 감사를 드립니다.너의 지지가 없으면 이 프로젝트는 불가능하다.특히 Modus Create에 전화해 주신 여러분, 특히 Michael Tintiuc의 여러분께 감사드립니다. 그들은 우리가 에오니아 Vue를 오늘의 위치로 데려올 수 있도록 도와주었습니다.
우리는 에오니아 블루에 대해 흥분을 느꼈고, 모든 에오니아 개발자들이 에오니아 커뮤니티에 가입하는 것을 환영합니다.우리는 네가 여기에 있어서 매우 기쁘다. 지체하지 않고 네가 무엇을 짓고 있는지 보고 싶다.