vue && cordova

웹앱 + 코르도바(플러그인)

01. Vue cli 설치 (전역)

$ npm install -g @vue/cli

02. Vue 프로젝트 생성

$ vue create my-app

03. Cordova 설치 (전역)

$ npm install -g cordova

04. 생성한 Vue 프로젝트 경로에서 cordova 추가

경로 : my-app

$ cd my-app
$ vue add cordova

05. 생성된 cordova 프로젝트 경로에서 필요한 플러그인 설치 (예시 : 연락처)

경로 : my-app/src-cordova

$ cd src-cordova
$ cordova plugin add cordova-plugin-contacts

06. Vue로 작성된 코드를 코르도바 프로젝트로 업데이트 (준비)

경로 : my-app/src

$ cd src
$ npm run cordova-prepare 

07. cordova 프로젝트 빌드 (브라우저, 안드로이드, 아이폰...)

경로 : my-app/src-cordova/

$ cd src-cordova
$ cordova run browser //브라우저에서 실행
$ cordova run android //실제 디바이스
$ cordova emulate android // 에뮬레이터에서 실행

08. cordova 프로젝트 apk파일 생성

$ cordova build android --release 

경로는
프로젝트명/src-cordova/platforms/android/app/build/outputs/apk
에 생성된다

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=sekterra&logNo=221414677608

$ npm i vue-cordova

//main.js
import VueCordova from 'vue-cordova';
Vue.use(VueCordva);


//myComponent.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <select>
      <option value="">선택</option>
      <option v-for="item in phoneList" :key="item.id">
        이름 : {{item.name}}
        전화번호 : {{item.phoneNumber.number}}
        일반번호 : {{item.phoneNumber.normalizedNumber}}
        전화형식 : {{item.phoneNumber.type}}
      </option>
    </select>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Vue from 'vue';
export default {
  name: 'App',
  data(){
    return{
      cordova : Vue.cordova,
      phoneList : [],
    }
  },
  components: {
    HelloWorld
  },
  methods:{
    onDeviceReady : ()=>{
      return new Promise((resolve, reject) => {
        navigator.contactsPhoneNumbers.list((contacts) =>{
            resolve(contacts);
        }, (error) =>{
            console.error(error);
            reject(error);
        });
      })
      
    }
  },
  created(){
    var self = this;
    this.cordova.on('deviceready',()=>{
      self.onDeviceReady()
      .then((contacts)=>{
          for(var i = 0; i < contacts.length; i++) {
              console.log(contacts[i].id + " - " + contacts[i].displayName);
              for(var j = 0; j < contacts[i].phoneNumbers.length; j++) {
                  var phone = contacts[i].phoneNumbers[j];
                  console.log("===> " + phone.type + "  " + phone.number + " (" + phone.normalizedNumber+ ")");
                  //alert(phone.number)
                  this.phoneList.push({
                    id: contacts[i].id,
                    name:contacts[i].displayName,
                    phoneNumber : phone,
                  });
              }
            }
      })
      .catch((error)=>{
        console.log(error);
      })
    });
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


  

https://www.npmjs.com/package/cordova-plugin-contacts-phonenumbers

뷰에서
플러그인 사용법 + 디버깅 확인하기

시스템변수
ANDROID_HOME
%LOCALAPPDATA%\Android\Sdk
ANDROID_SDK_ROOT
C:\Users\djdrk\AppData\Local\Android\Sdk