[Vue Ionic] ionic + vue 프로젝트 생성 및 XCode 실행

2019-12 에 작성된 글입니다.

1. 프로젝트 생성

먼저 뷰 프로젝트를 생성해야 합니다. 터미널에 아래를 입력하여 뷰 프로젝트를 생성해 주세요.

$ vue create [프로젝트 이름]

혹시 vue/cli가 설치되어있지 않은 상태라면, vue/cli를 먼저 설치해 주세요.

$ npm install -g @vue/cli

이를 제외한 나머지는 기본 셋팅으로 만들었습니다.

 

cd [프로젝트 이름] 을 입력하여 만든 프로젝트로 이동한 후 npm run serve로 프로젝트를 실행시켜 브라우저에 정상적으로 나오는지 확인해 주세요.

 

정상적으로 표출된다면, 현재 만든 뷰 프로젝트에 아이오닉 패키지를 설치해 주세요.

$ npm install @ionic/vue

그 후, src/main.js 파일에 다음과 같은 내용들을 추가해 주겠습니다.

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import IonicVue from '@ionic/vue'; // 추가
import '@ionic/core/css/core.css'; // 추가
import '@ionic/core/css/ionic.bundle.css'; // 추가

Vue.config.productionTip = false

Vue.use(IonicVue); // 추가

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

1. IonicVue를 추가

2. ionic/core의 스타일 추가

 

이제 뷰 컴포넌트에서 아이오닉의 컴포넌트들을 쓸 수 있게 되었습니다. vue-router를 ionic-vue 에서 제공해 주는 router로 변경하겠습니다. router/index.js를 다음과 같이 변경해 주세요.

import Vue from 'vue'
import Home from '../views/Home.vue'
import { IonicVueRouter } from '@ionic/vue'; 

Vue.use(IonicVueRouter);

export default new IonicVueRouter({ 
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () =>
        import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
});

ionic-vue는 기존 vue router의 많은 기능을 사용할 수 있다고 합니다.

이제 App.vue로 가서 router-view를 변경해 주겠습니다.

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

2. 프로젝트 실행

그럼 이제 Xcode의 시뮬레이터로 현재 만든 뷰 프로젝트를 실행시켜 볼까요?

먼저, 현재 만들어진 프로젝트를 빌드해 줍시다.

$ npm run build

그 다음으로는 ionic 프로젝트를 만들어 줘야 합니다. 아래를 입력해 주세요.

$ ionic init

생성이 됐다면 아래를 입력하여 capacitor를 실행해 주세요.

$ ionic capacitor add

ios를 선택해 주시고, 모두 완료되었다면, npx cap open ios를 입력하여 xCode를 실행해 주세요.

완성입니다!

ionic/vue 베타 버전이 잘 만들어져있어서 생각보다 플로우가 간단한 것 같습니다. (물론 이 플로우를 찾기까지는 여러 삽질이 있었습니다...) vue router 역시 그대로 쓸 수 있어서 컴포넌트화 하는 것에도 문제가 없을 것 같습니다.

아래 링크에 가시면 더 많은 정보를 얻을 수 있습니다.

ionic-team/ionic
Ionic Vue.js specific building blocks on top of @ionic/core components. To get started simply install @ionic/vue and…github.com

그럼, 저는 그 다음 삽질로 만나뵙겠습니다. 좋아요는 저에게 많은 도움이 됩니다!

+

혹시 실행 시에 “export ‘ICON_PATHS’ was not found in ‘ionicons/icons’ 에러가 생기신다면, 터미널에 아래를 입력해 주세요. 아이콘이 누락된 버그인 것 같습니다.

npm install ionicons@4.5.9-1 --save-dev

++

코딩을 수정하였다면, 아래 내용을 터미널에 입력하여 capacitor 내용을 업데이트 할 수 있습니다.

npm run build
npx cap sync ios