Vue.js 2.0 과 Cordova 개발 webApp 환경 구축 방법
환경 매개 변수
1.기술 언어:HTML,CSS,ES6,Node.js 등;
2.프레임 워 크:Vue.js 2.x,Cordova;
3.개발 시스템:mac,windows 등;
4.환경 설정:node 6+npm 3+(Node.js 공식 최신 버 전 을 다운로드 하 는 것 이 좋 습 니 다),jdk 1.8,SDK(Androidstudio 소프트웨어 공식 최신 버 전 을 직접 다운로드 하 십시오.Androidsdk 가 통합 되 었 습 니 다.기본 경로 로 설치 하 는 것 을 권장 합 니 다).
2.시스템 환경 변수 설정(window 7 을 예 로 들 면)
1.Android SDK 설정
A)다음 그림 과 같이 사용자 변수 설정 을 추가 합 니 다.
변수 이름:ANDROIDHOME
변수 값:설 치 된 경 로 를 위주 로 하고 기본 경 로 는 C:\Users\\사용자 이름\AppData\\Local\\Android\sdk 입 니 다.
B)다음 그림 과 같이 사용자 변수 PATH 에 추가 합 니 다.
;%ANDROID_HOME%\platform-tools;
C)시스템 변수 PATH 에 다음 그림 과 같이 추가
기본 경 로 는 C:\\Users\\사용자 이름\AppData\\Local\\Android\\sdk\\tools 입 니 다.
D)설명:cmd 환경 에서'android'명령 을 실행 합 니 다.다음 그림 에서 보 듯 이 환경 변수 설정 이 성공 적 임 을 나타 냅 니 다.
2、JDK 설정
A)다음 그림 과 같이 시스템 변 수 를 추가 합 니 다.
변수 이름:JAVAHOME
변수 값:JDK 디 렉 터 리 설치
B)시스템 변수 PATH 에 다음 그림 과 같이 추가 합 니 다.
;% JAVA_HOME%\ bin;
C)다음 그림 과 같이 시스템 변 수 를 추가 합 니 다.
변수 이름:CLASSPATH
변수 값:;;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
D)설명:cmd 환경 에서'javac'명령 을 실행 합 니 다.아래 그림 에서 보 듯 이 환경 변수 설정 이 성공 적 임 을 나타 냅 니 다.
3.Cordova+VUE 프로젝트 환경 구축
1、Cordova
A)설치:npm install Cg cordova
B)상용 명령:
l 프로젝트 만 들 기:cordova 프로젝트 이름 만 들 기;다음 그림 에서 보 듯 이 성공 적 으로 만 들 었 습 니 다.
l 플랫폼 추가:먼저 cmd 가 만 든 프로젝트 에 들 어간 다음 에 cordova platform add android Csave 또는 cordovaplatform add ios Csave 를 실행 합 니 다.다음 그림 에서 보 듯 이 성공 적 으로 만 들 었 습 니 다.
l 플랫폼 설정 상황 검사:cordovaplatforms,다음 그림 에서 보 듯 이 성공 적 으로 만 들 었 습 니 다.
l.APP:cordova build android 또는 cordova build ios 를 만 듭 니 다.다음 그림 에서 보 듯 이 성공 적 으로 만 듭 니 다.
l 테스트 APP:cordova emulate android,다음 그림 에서 보 듯 이 성공 적 으로 만 들 었 습 니 다.
2.통합 VUE
A)vue 설치 도구:npm install--g vue-cli
B)프로젝트 생 성:먼저 cmd 가 cordova 에서 만 든 프로젝트 에 들 어간 다음 vue init webpack 을 실행 합 니 다.다음 그림 에서 보 듯 이 성공 합 니 다.
C)npm install 설치 vue 프로젝트 개발 의존 패키지,다음 그림 과 같이 성공.
3.프로젝트 관련 설명
A)최종 항목 디 렉 터 리:
B)수정 사항:
l ww 폴 더 안의 파일 비우 기
l config 폴 더 를 찾 아 index 를 수정 합 니 다.Js
기본 값:
수정 후:
l 프로젝트 를 개발 한 후 npm run build 명령 을 실행 하고 cordova build android 를 실행 합 니 다.마지막 으로 cordovaemulate android 를 실행 하면 프로젝트 를 미리 볼 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
