[Vue] Webpack 기반 Vue 샘플 프로젝트 생성 및 실행해보기

2023. 9. 11. 12:23IT/Vue

반응형

사전 준비 

1. 자바 SDK 설치(11 버전 추천)

2. 안드로이드 스튜디오 설치

3. 시스템 PATH 설정

4. 노드JS 설치

5. Native Script 설치

6. 프로젝트 생성

7. 샘플 프로젝트 실행 확인

8. 즐거운 코딩

 

차근차근  해보자.

1. 자바 SDK 설치

  - Java Archive Downloads - Java SE 11 | Oracle 대한민국 에 방문해서 각 OS에 맞는 버전 설치, 오라클 계정이 없다면 생성하고 다운로드 한다.

 

Java Archive Downloads - Java SE 11 | Oracle 대한민국

WARNING: These older versions of the JRE and JDK are provided to help developers debug issues in older systems. They are not updated with the latest security patches and are not recommended for use in production. For production use Oracle recommends downlo

www.oracle.com

 

2. 안드로이드 스튜디오 설치

  - 

 

3. 시스템 PATH 설정

  - 설정 -> 정보 -> 고급 시스템 설정 -> 환경 변수 -> 시스템 변수 ->

       새로 만들기 -> 변수 이름 "JAVA_HOME", 변수 값 "C:\Program Files\Java\jdk-11" (예시)

       새로 만들기 -> 변수 이름 "ANDROID_HOME", 변수 값 "C:\Users\User\AppData\Local\Android\Sdk" (예시)

  - 시스템 변수 중 Path 더블 클릭, 위에서 만든 홈으로 PATH 설정 아래 화면 예시   

 

4. 노드 JS 설치

  - Node.js (nodejs.org) 에서 LTS 버전을 설치해준다.

 

5. Native Script 설치

  - 파워쉘같은 콘솔에서 npm install -g nativescript 명령을 실행한다.

 

6. 샘플 프로젝트를 생성한다.

  - ns create myCoolApp --vue 명령어 실행한다. 다만 이슈가 발생한다면 아래 글을 참고하자.

    NativeScript 로 Vue 샘플 프로젝트 생성 오류 해결 (ns create app PSSecurityException , powershell) (tistory.com)

 

NativeScript 로 Vue 샘플 프로젝트 생성 오류 해결 (ns create app PSSecurityException , powershell)

NPM 으로 NativeScript 설치 후 Vue 기반 샘플 프로젝트 생성 시 오류가 발생하였다. npn install -g nativescript 설치 까지는 잘 되었다. 문제는 그 다음.. ns create myCoolApp을 하는데 자꾸 아래 같은 에러가 발

suncastlefafa.tistory.com

 

7. 샘플 프로젝트 생성 후 실행까지 되는지 확인한다.

  - 컴퓨터에 스마트폰 케이블 연결 및 USB 디버깅 옵션 활성화 필요

  - myCoolApp 폴더에 가서 ns run android 실행

  - 스마트폰 화면에 Vue 샘플 프로젝트 잘 뜨는지 확인

 

8. 이제 즐겁게 코딩.

반응형