소개

Ionic 라는 Web과 ios , Android , Electron 등의 네이티브 앱을 같은 코드로 만들 수 있는 프레임워크의 Vue.jsIonic 을 사용한 적이 없기 때문에 자세한 것은 모릅니다만, React 로 말하는 곳의 React Navive
지금까지는 angular 에만 대응하고 있었는데, Vue.js 에 대응했다고 하는 것으로 화제에 오르고 있는 것 같습니다.

참고

Ionic, Vue.js 통합의 알파 릴리스 발표

해보자

우선은 vue-cli 로 프로젝트를 만들어 갑니다.

vue create my-ionic-project

> Please pick a preset
default

프로젝트로 이동하여 ionic 의 npm 모듈을 설치합니다.

cd my-ionic-project
npm install @ionic/vue

프로젝트의 불필요한 파일을 지우십시오.

rm src/assets/logo.png src/components/HelloWorld.vue

main.js 에 ionic 의 모듈을 로드하는 설정을 추가합니다.

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

Vue.config.productionTip = false

import { Ionic } from '@ionic/vue';
Vue.use(Ionic);

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

이제 ionic 의 기능을 Vue 에서 사용할 수 있게 되었을 것입니다.

우선 버튼을 클릭하면 모달이 나오도록 합시다.App.vue 를 다음과 같이 다시 씁니다.

<template>
  <ion-button shape="round" color="primary" fill="outline" @click="showModal">Show Modal</ion-button>
</template>

<script>
export default {
  name: 'app',
  methods: {
    async showModal() {
      // ボタンがクリックされたらionicのモーダルを表示
      const loading = await this.$ionic.loadingController.create({
        spinner: 'hide',
        duration: 5000,
        message: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class custom-loading'
      });
      loading.present();
    }
  }
}
</script>

<style>
</style>

작동하는지 살펴 보겠습니다. npm run serve 를 사용하여 http://localhost:8080 로 이동합니다.



우선 PC 브라우저상에서의 버튼의 표시·동작을 확인할 수 있었습니다.
하지만 로딩 모달의 아이콘이 표시되지 않습니다. CSS 설정이 별도로 필요합니까?
우선 문서도 아직 없고, 분위기만 잡았으므로 앞으로 나아갑니다.

이어서 이것을 electron 로 네이티브 앱화해 보겠습니다. 빌드에는 ionic 의 cli 를 사용할 필요가 있는 것 같기 때문에,

npm install -g ionic
ionic init

로 보았습니다만, Project type 의 선택지에 vue 가 없습니다!
조금 조사해 보면 공식 Github 이슈 의 TODO에 Create Project Type 등이 올랐습니다.

이 기사 의 Whats Next
While it may still be a bit early for @ionic/vue and there’s a lot more to test before we recommend it for production, we’re happy to roll this out to the community and open it up for your help.

왜 쓰여지고 있고, 냉정하게 생각하면 아직 알파판으로 버전도 0.0.1 그래서 우선 컴퍼넌트를 움직일 수 있게 되었다고 하는 단계인 것 같네요.

끝에

Vue.js 로 네이티브 앱을 구축한다면 weex 아니면 vue-native 뭔가가 후보로 올 수 있었지만, 앞으로는 ionic 에도 기대하고 싶네요.