Ionic Framework에서 Vue.js 사용하기 예제

 

https://ionicframework.com/
https://github.com/ionic-team/ionic - 39.7k
- v5.0 , 2019/12
- Android, iOS, Windows, Desktop (with Electron), or modern browsers, PWA
- JavaScript
- UI 선택 가능(Front)) :  Anguler, React, Vue(베타 v0.0.4)
- 디바이스 운용 : Cordova 나 Capacitor 사용

@ionic/vue (beta) - v0.0.4 (2019.12.10)

https://github.com/ionic-team/ionic/tree/master/vue
https://github.com/ionic-team/ionic/blob/master/vue/README.md
https://www.npmjs.com/package/@ionic/vue

 

//-----------------------
- 매뉴얼 
https://ionicframework.com/docs/installation/cli

 

 

//----------------------

* 사용법 예제

npm install -g ionic

npm install -g @vue/cli

 

    - vue 프로젝트 생성

vue create vue1

 

    - 라우터 추가

cd vue1
vue add router
views/About.vue , Home.vue 추가됨

 

    - ionic 패키지 설치
npm install @ionic/core @ionic/vue

 

    - 에러 해결용
npm install ionicons@4.5.9-1 --save-dev
        - "export 'ICON_PATHS' was not found in 'ionicons/icons' 에러 메시지 해결
        - chunk-2a882949.js?1dbb:13 Uncaught TypeError: Cannot convert undefined or null to object


//-------------------------
* main.js 파일 수정

//추가
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);


//-------------------------
* Home.vue 파일 수정

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

 

 

//실행

npm run serve

 

//확인

http://localhost:8080

 

 

//-----------------
//참고
https://ionicframework.com/blog/announcing-the-ionic-vue-beta/

https://dev.to/paulhalliday/ionic-4-angular-vue-js-and-react-1o14

 

https://www.techiediaries.com/ionic-vue/