소개

정말 @ chan_kaku입니다
이번은 ionic/vue가 β판이 되었다고 하는 것으로 실제로 사용해 본 감상 등 여러분에게 전해 가면 좋을까라고 생각하고 있습니다.
이번 내용은 Kyoto.js16에서 발표한 내용입니다.
슬라이드는 여기에 있으므로, 원하시면 참조하십시오.

Ionic이란?

이전, ionic/vue가 α판이었을 때에 한 번이 기사에 기재했으므로 꼭 봐 주세요!

환경

Mac OS mojave 10.14.4

Node.js 8.11.3

할 수 있게 된 것

Vue Router를 사용할 수있게되었습니다

α판에서는 사용할 수 없었던 Ionic의 컴퍼넌트를 사용할 수 있게 되었다

아직 할 수 없는 일

양방향 데이터 바인딩 지시어 인 v-model을 사용할 수 없음

Stack Navigation을 아직 사용할 수 없으며 예의 개발 중

네이티브 API를 아직 사용할 수 없음

이쪽은 이번 ionic/vue를 해 보려고 했던 1개의 이유였으므로 개인적으로는 유감이었습니다

시작하는 방법

전제로 vue-cli로 프로젝트를 만들고 있는 곳부터 시작합니다.
모르는 분은 이전 기사을 참조하십시오.

Vue Router 이용하기

$ vue add router

여기에서 사용할 수 있습니다.

Vue 프로젝트에서 Ionic 사용

main.js와 router.js를 수정합니다.

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' 

//----------------この間を追加する---------------
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
//--------------------------------------------
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.js

import Vue from 'vue'
import Home from './views/Home.vue'
//-------------------ここの間を追加する------------
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

//---------------------------------------------
export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

router.js에 대해서입니다만, 원래는 Vue Router가 사용되고 있었습니다만, Ionic에도 RouterAPI가 제공되고 있어 IonicVueRouter는 VueRouter로 Ionic의 RouterAPI를 이용하기 위한 것 같습니다. 따라서 여기를 사용합시다.

capacitor를 이용하여 iOS용으로 빌드하면 다음과 같이 움직입니다!

Ionic의 Component를 이용해 본다

Ionic의 컴퍼넌트도 여러가지 사용할 수 있게 되었으므로, 만져 보았습니다

ion-fab

이곳은 트위터 등에서 자주 보는 플로트 버튼입니다.
멋진 플로트 버튼도 쉽게 구현할 수 있습니다.

About.vue

<template>
      <ion-fab-button>Share</ion-fab-button> 
      <ion-fab-list side="top"> 
        <ion-fab-button>
          <ion-icon name="logo-facebook"></ion-icon>
        </ion-fab-button> 
        <ion-fab-button>
          <ion-icon name="logo-twitter"></ion-icon>
        </ion-fab-button> 
        <ion-fab-button>
          <ion-icon name="logo-youtube"></ion-icon>
        </ion-fab-button> 
      </ion-fab-list> 
        <ion-fab-list side="start"> 
          <ion-fab-button>
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button> 
        </ion-fab-list> 
    </ion-fab>
</template>

이것만으로 멋진 플로트 버튼을 구현할 수 있습니다.
어떻습니까?

ion-card

이것은 여러 css-framework 등이기도 하지만, 카드형의 컴퍼넌트를 간단하게 구현할 수 있습니다

About.vue

<template>
     <ion-card>
         <img src="path/to/your/img">
         <ion-card-header>
             <ion-card-subtitle>name</ion-card-subtitle>
             <ion-card-title>chankaku</ion-card-title>
         </ion-card-header>
         <ion-card-content>
         I love beer.🍻🍻🍻
         </ion-card-content>
     </ion-card>
</template>

다음은 그 외형입니다.



이런 식으로 멋진 카드 구성 요소를 구현할 수있었습니다.

감상

Angular에서는 Ionic, React에서는 React Native처럼 네이티브 애플리케이션을 만드는 스테디셀러 것이 있지만, Vue에는 이런 것이 아직 없는 인상입니다.
지금이라면 PWA로 Google PlayStore에서 전달할 수 있으며 TWA와 같은 외부는 네이티브이지만 내용은 Chrome을 시작하는 기술도 있으므로 현재 현재 Vue에서는 PWA, TWA로 좋다. 없는가 하는 바람에 느꼈습니다.
vue/ionic에서도 네이티브의 API를 사용할 수 있게 되면 또 바뀌어 올지도 모르기 때문에, 공식적인 릴리스 버젼이 나오는 것이 즐거울지도 모르겠네요!