1. 설치 - MrKwon/Vue-Native GitHub Wiki

설치

이 페이지는 당신이 설치하고 Vue Native 를 이용하여 첫번째 네이티브 앱을 빌드하는데 도움을 줄 것이다.

시스템 요구사항

  • node >= 6.0 전역 설치
  • npm >= 4.0 전역 설치
  • React Native CLI 전역 설치, 이는 프로젝트를 생성하고 초기화하는 것을 쉽게 해준다.
  • Expo CLI 전역 설치

Vue Native Cli 로 설정

Vue Native Cli 는 Vue Native 를 이용하여 어플리케이션을 빌드하기 시작하는 가장 쉬운 방법이다.

expo-cli 가 전역으로 설치 되어 있다고 가정한다.

1단계 앱을 생성실행한다.

npm install -g vue-native-cli
vue-native init <projectName> // Initializes crna project
vue-native init <projectName> --no-crna // Initializes react-native project
cd <project-name>

2단계 앱을 실행한다.

npm start

상호작용하는 프롬포트와 함께 개발자 모드에서 당신의 앱이 실행된다. 프롬포트 없이 실행하려면 -no-interactive 플래그를 사용하면 된다.
당신의 폰에서 앱을 보기 위해 Expo app 안에서 앱을 연다. 이는 당신이 파일을 수정하여 저장한다면 앱이 재가동 될 것이고 터미널에서 빌드 에러와 빌드 로그들을 볼 수 있을 것이다.

npm run ios

npm start 와 같지만, 이것은 당신이 (이 명령을) iOS 시뮬레이터가 설치 된 맥에서 실행한다면 iOS 시뮬레이터에서 당신의 앱 실행을 시도할 것이다.

npm run android

npm start 와 같지만, 이것은 연결된 안드로이드 디바이스 혹은 에뮬레이터에서 당신의 앱 실행을 시도할 것이다. 안드로이드 빌드 툴의 설치를 요구한다. (자세한 설치는 React Native docs를 보라.)

React Native 로 설정

알림: RN > 0.55.4 에서, The rn-cli.config.js 와 vueTransformerPlugin.js 는 rn-cli-config.js 와 vueTransformerPlugin.js와 유사하다.

1단계 React Native 프로젝트를 생성

react-native init <projectName> --version <version> /* Version should be <= 0.55.4
cd <projectName>

2단계 Vue Native 설치

npm install vue-native-core vue-native-helper --save
npm install vue-native-scripts --save-dev

3단계 React Native Packager 환경설정

vueTransformerPlugin.js 파일을 프로젝트의 root에 생성하고 익스텐션(vue) 지원을 명시한다.

// For React Native version 0.52 or later
var upstreamTransformer = require("metro/src/transformer");

// For React Native version 0.47-0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");

// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");

var vueNativeScripts = require("vue-native-scripts");
var vueExtensions = ["vue"];

module.exports.transform = function({ src, filename, options }) {
  if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
    return vueNativeScripts.transform({ src, filename, options });
  }
  return upstreamTransformer.transform({ src, filename, options });
};

다음을 rn-cli.config.js에 추가하라. (프로젝트의 root에 없으면 하나 만든다.)

module.exports = {
  getTransformModulePath() {
    return require.resolve("./vueTransformerPlugin.js");
  },
  getSourceExts() {
    return ["vue"];
  }
};

이제 성공적으로 React Native 앱과 함께 Vue Native를 설정했다. 이제 iOS와 안드로이드 디바이스에서 실행할 준비가 된 네이티브 앱을 빌드하면 된다.

⚠️ **GitHub.com Fallback** ⚠️