@ionic/vue + Capacitor로 크로스 플랫폼의 미래를 들여다 봅니다.

요 전날 열린 Frontend Conference Fukuoka 2018에서 웹 개발자를 위한 크로스 플랫폼 앱 개발이라는 내용으로 발표했습니다.

그 중에서도 주목하고 있는 Ionic입니다만, Vue에서도 사용할 수 있게 된다고 하는 것으로, 간단합니다만 움직여 봅니다.

게다가 그것을 Capacitor에서 iOS 앱으로 움직이려고합니다.

환경

node 8.12.0

vue ^2.5.17 (vue cli)

프로젝트 만들기

$ vue create ionic-vue-app  
$ cd ionic-vue-app
$ vue serve
# またはGUIからビルド
$ vue ui

이제 초기 화면이 브라우저에서 표시되면 준비 OK입니다.

@ionic/vue 추가

$ npm install @ionic/vue

Ionic UI 구성 요소를 사용해 봅니다.

사용할 수 있는 컴퍼넌트는 이하로부터 참조할 수 있습니다만, @ionic/vue는 아직 alpha판이라고 하는 일도 있어 잘 움직이지 않는 것도 많습니다.

// main.js
import Vue from 'vue'
import App from './App.vue'
import Ionic from '@ionic/vue';

Vue.use(Ionic);

Vue.config.productionTip = false

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

// App.vue
<template>
  <div id="app">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-button>Ionic Button</ion-button>
        </ion-col>
        <ion-col>
          <ion-toggle></ion-toggle>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {}
}
</script>

이런 식으로 버튼을 표시해 보았습니다.

Capacitor 도입

$ npm install @capacitor/core @capacitor/cli
$ npx cap init [appName] [appId]

Vue 앱 빌드

$ npm run build

iOS 앱 만들기

$ mv dist www
$ npx cap add ios
$ npx cap sync

Capacitor는 www를 기반으로 iOS 앱을 만듭니다.
그러면 ios 디렉토리가 생겨 Xcode를 열고 빌드할 수 있습니다.

$ npx cap open ios

그러자 Xcode가 일어나서 움직일 수 있었지만 대단히 무너졌습니다.



Android도 비슷한 흐름으로 만들 수 있습니다.

요약

아직 사용할 수 있는 기능은 적지만,

Ionic + Vue + Capacitor의 조합으로 크로스 플랫폼 앱의 가능성을 조금 볼 수있었습니다.

Capcaitor에서는 Electron 앱도 만들 수 있으므로, 빨리 정식 릴리스 해 주었으면 합니다!