ionic은 cordova 위에서 돌아가는 프레임워크중 하나이다.
하이브리드를 쓴다면 꽤 괜찮은 프레임워크라고 생각이 든다.
문제는 ionic이 angular베이스라는 것이다.
angular에 대해서 많은 논의가 있지만 대략 합의점은 애매하다는 것이다.
그럼 vue로 ionic을 할 수는 없을까?
다행이도 vue로도 ionic을 할 수 있다. 사실 원리를 생각해보면 당연한 것이다.
그래서 이번에는 vue로 ionic을 사용하는 방법에 대해서 알려 드리도록 하겠다.
(sudo) vue init webpack <프로젝트 명>
먼저 웹팩 프로젝트를 만들어 준다.
사실 이 작업은 굳이 할 필요는 없긴한데 제대로 동작하는지 한번 확인해 보도록 하자.
제대로 동작하는걸 확인할 수 있다.
프로젝트는 전형적인 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의 예제 소스이다.
실행을 한번 시켜보도록 하자.
웹에서는 아무 문제없이 잘 돌아간다.
이제 모바일에서 테스트 해보도록 합시다.
<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>
3개의 메타태그와 하나의 스크립트 태그를 추가해준다.
메타태그는 사실 뭐 없어도 그만이지만 스크립트태그는 반드시 필요하다. 코르도바를 추가해주는 거니깐.
이제 이제 코르도바 프로젝트를 만들어보도록 하자.
내부에 코르도바 프로젝트가 생겼다.
그러나 코르도바 프로젝트는 빈프로젝트나 다름 없다.
이제 코르도바 프로젝트와 vue 아이오닉 프로젝트를 연결시켜준다.
먼저 config폴더의 index.js의 부분을 수정해서 최종 결과물이 www파일에 나오도록 한다.
물론 그대로 dist를 둬도 머 상관은 없지만...
그 다음 빌드를 실행한다. 그러면 결과물이 www폴더에 나올것이다.
이 www폴더를 복사한다.
그 다음 코르도바 프로젝트 아래의 www에 덮어쓴다.
이제 준비는 끝났다.
cd ionic-vue-cordova
cordova platform add android --save
위의 명령어를 입력하면 빌드가 완료된다.
이제 실행해보자.
안드로이드 스튜디오를 실행한다.
해당 프로젝트를 선택한다.
가상 디바이스를 선택한다.
실행을 하면 동작하는걸 확인할 수 있다.
cordova platform add ios --save
ios용으로 빌드한다.
Xcode에서 경로를 찾아가서 프로젝트를 연다.
실행한다.
동작하는 것을 확인한다.
