[Cordova][Ionic][Vue][JavaScript]vue로 ionic사용하기

ionic은 cordova 위에서 돌아가는 프레임워크중 하나이다.

하이브리드를 쓴다면 꽤 괜찮은 프레임워크라고 생각이 든다.

문제는 ionic이 angular베이스라는 것이다.

angular에 대해서 많은 논의가 있지만 대략 합의점은 애매하다는 것이다.

그럼 vue로 ionic을 할 수는 없을까?

다행이도 vue로도 ionic을 할 수 있다. 사실 원리를 생각해보면 당연한 것이다.

그래서 이번에는 vue로 ionic을 사용하는 방법에 대해서 알려 드리도록 하겠다.

(sudo) vue init webpack <프로젝트 명>

먼저 웹팩 프로젝트를 만들어 준다.

cd <프로젝트 명>

npm run dev

사실 이 작업은 굳이 할 필요는 없긴한데 제대로 동작하는지 한번 확인해 보도록 하자.

제대로 동작하는걸 확인할 수 있다.

프로젝트는 전형적인 vue프로젝트로 생성된다. 뭐 당연하다.

<script src='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></script>

index.html에 ionic을 추가해주도록 한다.

<template>
  <ion-app>
    <ion-page class="show-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic 4 + Vue Application</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="content" padding>
        <ion-list>
          <ion-item v-for="item of items" v-bind:key="item.id">
            <ion-label full>{{item.name}}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-page>
  </ion-app>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      items: [{id: 0, name: 'Ahmed'}, {id: 1, name: 'Naima'}]
    }
  }
}
</script>

App.vue의 예제 소스이다.

npm run dev

실행을 한번 시켜보도록 하자.

웹에서는 아무 문제없이 잘 돌아간다.

이제 모바일에서 테스트 해보도록 합시다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script type="text/javascript" src="cordova.js"></script>