ionic 3.0+프로젝트 운영 환경 구축 튜 토리 얼

본 고 는 ionic 3.4.0 을 바탕 으로 하 는 프로젝트 구축 을 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
이 글 을 쓸 때,ionic 버 전 은 이미 3.4.0 으로 업데이트 되 었 다.수중 에 많은 ionic 1.x 버 전의 프로젝트 가 있 고 이 를 바탕 으로 많은 제3자 플러그 인 을 개발 했다.교체 재 구성 이라는 생각 을 억 누 르 지 못 하고 드디어 3.x 의 업그레이드 가 시작 되 었 다.글 의 내용 은 모두 실천 과정 에서 작 성 된 것 이 니 서둘러 버 전 을 업그레이드 하지 않도록 주의 하 세 요.
환경 이동
업그레이드 후 최신 환경 출력 정 보 를 먼저 보 세 요.

전역 적 으로 코르도바 와 아이 오 닉 버 전이 각각 7.0.1 과 3.4.0 으로 업그레이드 됐다.ionic info 를 출력 하여 최신 환경 설정 정 보 를 출력 합 니 다.여기 서 특별히 지적 해 야 할 것 은 Ionic CLI 다.Ionic 과 Ionic CLI 는 다른 것 입 니 다.Ionic CLI 는 nodeJS 의 도구 비 계 를 기반 으로 Ionic 응용 프로그램 을 개발 하 는 과정 에서 사용 되 는 주요 도구 입 니 다.최신 Ionic 버 전 을 업데이트 한 후 이 도 구 는 이에 따라 업그레이드 되 었 다.패키지 항목 을 Ionic CLI 에서 제공 하 는 명령 으로 실행 할 때 그림 과 같이 표 시 됩 니 다.

왜 위의 그림 과 같은 상황 이 발생 했 습 니까?관 보 관련 자료 에는 아이 오 닉 팀 이 성능 과 사용자 경험 을 높이 기 위해 CLI 를 다시 썼 다 는 설명 이 있다.업 데 이 트 된 후의 변 화 는 코르도바 CLI 와 상호작용 하 는 모든 명령 입 니 다.cordova 를 명령 의 일부분 으로 해 야 합 니 다.예전 에 우 리 는 다음 과 같은 명령 을 수행 했다.

ionic platform add android 
ionic run/build android 

v3 CLI 명령 은

ionic cordova platform add android 
ionic cordova run/build android

프로젝트 에서 이 명령 을 처음 실행 하면 다음 과 같은 알림 이 나타 납 니 다.Ionic CLI 의 Cordova 기능 이 하나의 플러그 인 에 이식 되 었 기 때 문 입 니 다.이 플러그 인 이 없 는 것 을 감지 하면 설 치 를 알려 줍 니 다.

cli-plugin-cordova 설치 전후 명령 비교 보기


이제 ionic cordova run/build android 를 실행 하면 디 버 깅 패 키 지 를 진행 할 수 있 습 니 다.ionic 1.x 프로젝트 의 디 버 깅 패키지 문제 로 돌아 갑 니 다.신 구 프로젝트 와 상 관 없 이 첫 번 째 명령 을 실행 하 는 것 도 해당 플러그 인 에 따라 v3 와 약간 다 릅 니 다.

게다가 cordova 는 사실 상기 명령 도 모두 Cordova CLI 를 바탕 으로 한다.그러면 Cordova CLI 가 제공 한 명령 으로 포장 하면 실행 할 수 있 지 않 을 까?물론 입 니 다.새로운 도구 가 더 많은 명령 을 제 공 했 을 뿐 입 니 다.예 를 들 어 ionic generate(약자:ionic g)는 더욱 효율 적 인 프로젝트 를 구축 할 수 있 습 니 다.관 보가 제공 한 예 를 들 어 말 해 봐.

$ ionic g tabs
? What should the name be? myTab
? How many tabs? 4
? Name of this tab: home
? Name of this tab: maps
? Name of this tab: contacts
? Name of this tab: more
[OK] Generated a tabs named myTab!

예 를 들 어 ionic g page my Page,ionic g provider MyData 는 우 리 를 위해 모듈 화 되 고 구조 화 된 디 렉 터 리 를 신속하게 구축 할 수 있 습 니 다.도구 의 역할 은 우리 의 개발 효율 을 향상 시 키 고 구체 적 으로 어떻게 사용 하 는 지 에 따라 지혜 를 보 는 것 이다.습관 이 되면 cordova 를 사용 할 수 있 지만 뒤쪽 버 전 으로 접근 하기 위해 업그레이드 도 크게 나 무 랄 것 이 없다.
버 전 강등
환경 이전 을 말 하고 버 전의 반환 문 제 를 말 하 다.3.4.0 으로 업그레이드 하기 전 까지 는 2.x 로 업그레이드 한 경험 이 있어 1.x 프로젝트 도 패키지 가 제대로 작 동 하지 않 아 버 전 을 되 돌 렸 다.3.3 으로 업그레이드 되 었 을 때 반나절 을 고생 했 지만 명령 이 ionic cordova 를 구성 하 는 것 을 발견 하지 못 했다.그래서 Ionic CLI 를 2.x 로 강등 시 켰 습 니 다.이때 ionic start 는 모두 1.x 버 전 입 니 다.그리고 ionic start xxx Cv2 방법 으로 ionic 프레임 워 크 를 github 의 최신 demo 에 다운로드 합 니 다.이때 다운로드 한 것 은 최신 3.x 버 전 입 니 다.2.x->3.x 는 버 전 번호 의 교체 일 뿐 이 므 로 Cv2 를 실행 하면 최신 demo 소스 코드 를 다운로드 합 니 다.

npm uninstall -g ionic
npm cache clean
npm install -g ionic@2 
ionic start myProject blank

이때 나의 환경 은 이렇다.

Ionic CLI 의 버 전 은 2.x 이 고 프로젝트 다운 로드 는 최신 3.x 의 소스 코드 입 니 다.Ionic CLI 2.x 버 전 을 기반 으로 하 는 명령 을 실행 하면 모든 항목 을 정상적으로 포장 할 수 있 습 니 다.이런 방법 을 통 해 1.x 에서 3.x 로 불 러 오 는 프로젝트 를 동시에 실행 할 수 있 습 니 다.어떤 방법 을 사용 하 는 지 각자 필요 한 것 을 취하 세 요.
공식 데모 사용 배우 기
공식 적 으로 1.x 에 서 는 Blank/side menu/tabs 세 가지 demo 템 플 릿 을 제공 하 였 으 며,개발 시 서로 다른 수요 에 따라 템 플 릿 을 배우 거나 사용 할 수 있 습 니 다.3.x 이후 슈퍼 와 tutorial 두 가지 템 플 릿 이 추가 되 었 습 니 다.
tabs : a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project

ionic start MyIonicProject tutorial

템 플 릿 다운로드 명령 은 변 하지 않 습 니 다.지정 한 템 플 릿 이 없 으 면 기본 값 은 tabs 입 니 다.여기 서 저 는 슈퍼 템 플 릿 을 사용 하 는 것 을 추천 합 니 다.기초 문법 을 빨리 파악 하고 기초 프로젝트 구 조 를 이해 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.