[Vue3] Ionic 프로젝트 생성 및 실행

 이번 포스팅에서는 모바일 하이브리드 F/W인 Ionic에서 Vue.js 환경의 프로젝트를 구성하고 실행하는 방법에 대해서 알아봅니다.

 설치 및 실행은 VS Code 터미널에서 진행하였습니다.

1. Ionic CLI 설치

[명령어] : npm install @ionic/cli

2. Vue CLI 설치

 간혹 Ionic만 설치된 상태에서 프로젝트 생성 시 Vue와 연관된 오류가 발생하는 경우가 있는 데, 아래와 같이 vue 관련 내용도 설치하면 해결됩니다.

[명령어] : npm install @ionic/vue

3. 프로젝트 생성

[명령어] : npx ionic start {프로젝트명} blank --type vue --capacitor

4. 프로젝트 실행

 생성된 프로젝트 경로로 이동한 후, 아래 명령어를 수행한다

[명령어] : npx ionic serve

[실행결과]

5. 프로젝트 구성

 생성된 프로젝트의 경우 Vue-Router, TS, vite 등이 기본적으로 설치됨을 확인할 수 있습니다.