Ionic/Vue로 iOS 어플리케이션 만들기
이것은 의존 라이브러리와 관련이 있으며, 설치
@ionic/vue@next(beta0.0.9)는 몇 가지 문제를 해결할 수 있다.(그러나 IonIcons가 제대로 작동하지 않는 경우 YakShaving이 필요합니다.)
Ionic 팀
@ionic/vue에 따르면 Vue v3입니다.x가 정식으로 발표되기를 기다리는 주류 v1.x를 만들기 시작해야 하기 때문에 기다리는 사람은 기다리는 것이 가장 좋다.Shaving Yak도 도전하고 싶은 사람 이쪽으로 오세요.
'지금'Ionic Vue로 Todo 응용 프로그램 만들기/Now로 Ionic Vue-Speaker Deck을 사용하여 Todo 응용 프로그램 만들기
https://speakerdeck.com/fruitriin/now-create-todo-app-using-ionic-vue
Vue에서 로컬 응용 프로그램에 대해 말하자면 Weex는 공식적으로 소개한 것이다
어쨌든 채용 사례는 들어보지 못했습니다.
이런 상황에서 아이오닉도 Vue에 대응했기 때문에 도전해 봤습니다.
Ionic meetup에서 무대에 오른 자료가 여기 있습니다.
https://speakerdeck.com/fruitriin/how-about-ionic-vue-with-capatitor
나는 이 자료가 실제로 수중에 있는 것은 매우 불편하다고 생각한다
나는 보도로 다시 정리하고 싶다.
아이오닉이 뭐예요?
Ionic v4는 Web Component 기술을 활용하여 로컬 스타일 UI를 제공하는 UI 프레임워크와
Capacitor와 Cordva라는 지층을 교차하는 플러그인을 조합하여 제작합니다
플랫폼을 뛰어넘는 로컬 응용 프로그램이 프레임워크를 만듭니다.
(항상 WebView에 로컬 스타일 UI 표시)
v3는 이전에 Angular의 UI 구성 요소로 만들어졌습니다.
v4에서 Web Component로 변경된 후 프레임워크를 선택하지 않음
Ionic/Vue도 제공되기 시작했고 Vue도 Ionic의 응용 프로그램을 만들 수 있습니다.
Announcing the Ionic Vue Beta | The Ionic Blog
https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Ionic/Vue는 2019/06/09 현재 v0.0.1입니다.β버전의 포지셔닝입니다.
Ionic Vue로 웹 애플리케이션 제작
웹 응용 프로그램을 만들려면 다음 단계를 참조하십시오.
Ionic x Vue로 모바일 웹 어플리케이션을 위한 빠른 개발을 시작하겠습니다.DevelopersIO
https://dev.classmethod.jp/client-side/ionic-vue-getting-started/
iOS 응용 프로그램을 만들 때 주의점으로 yarnではなくnpm 를 선택하는 것이 좋습니다.(이유는 뒤에 서술될 것이다.)
또한 Vue CLI3로 제작된 프로젝트라면
대체 yarn add @ionic/vue(npm install @ionic/vue)vue add vue-cli-plugin-ionic 모든 Ionic의 초기 가져오기를 대체할 수 있습니다.
(ion-vue-router 주변은 스스로 진행해야 한다)
또한 아래의 슬라이드는 매우 참고 가치가 있다.
@ionic/vue로 웹 응용 프로그램 만들기 - Speaker Deck
https://speakerdeck.com/mikakane/vue-de-web-apuriwozuo-tutemiru
Ionic으로 iOS 앱 만들기
ionic init를 진행합니다.
ionic init.ionic.config.json.
으로 표시됨 command not found: ionic 에서 전역적으로 ionic CLI가 설치되지 않았기 때문에npm install -D ionic에서 로컬 설치를 하고 npx ionic init에서 실행하면 됩니다.
ionic capacitor copy
npx ionic capacitor copy.
(상술한 ionic init를 진행하지 않으면 환영을 받을 것입니다.)
이럴 때 yarn 프로젝트도 주세요npm install @ionic/coreyarn의 프로젝트라면 node_혼합 모듈.따라서 처음부터 npm 프로젝트로 삼는 것을 권장합니다.[error] Capacitor could not find the web assets directory (中略)/www은 이끼를 나타낸다.capacitor.config.json, 따라서 webDir 항목을 편집합니다.
capacitor.config.json{
"appId": "io.ionic.starter",
"appName": "vue-ionic-example",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "dist"
}
또한 Vue 프로젝트를 사전에 wwwからdistへ 생산 구축하십시오.
여기에 도착하면 다시 npm run build 하십시오.
cap add ios 진행
npx ionic capacitor copy.
프로젝트에서 iOS 디렉터리가 차단되어 iOS를 위한 xcode 프로젝트를 만듭니다.
cap open ios를 진행합니다.
npx cap add ios.
Xcode가 시작됩니다.
Xcode로 구축
'구축'단추를 누르면 아날로그를 구축하고 시작합니다.
CocoaPods 관련 오류로 시작할 수 없는 경우
iOS 라이브러리 관리 도구 CocoaPods 사용 방법 - Qiitahttps://qiita.com/satoken0417/items/479bcdf91cff2634ffb1
이 글은 CocoaPods 설치/업데이트를 참조하십시오.
시동 걸었어!
와
Let's Ionic/Vue!
향후 개발에 관하여
기본npx cap open ios 웹 버전 보기 화면 개발npm run serve 및 npm run build 이후에 XCode로 재구성하십시오.
상태 표시줄 관통에 관한 문제
이렇게 하면 상태 표시줄이 머리글을 관통합니다.
이 문제에 관해서는 npx cap copy의viewport를 다음과 같이 바꾸십시오.
public/index.html<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-ionic-example</title>
</head>
<body>
（以下省略）
제목: 로컬 API 및 UI 구성 요소
UI 구성 요소에 대한 자세한 내용은 Ionic 설명서를 참조하십시오.
Ionic Framework - Ionic Documentation
https://ionicframework.com/docs
한편, 로컬 API를 사용하려면 Capacitor 문서를 참조해야 합니다. 위치가 다르므로 주의하십시오.
Capacitor - A Cross-platform App Runtime - Capacitor
https://capacitor.ionicframework.com/docs/
페이지 구성 요소 및 응용 프로그램에 대한 사과와 수정
처음에 소개한 자신의 슬라이드에서
"페이지 구성 요소도 없으면public/index.html 표시되지 않을 것 같아요?"쓰여 있지만
다시 시도할 때 드러났다.
만약 당신이 순조롭지 못한 코드를 본다면, 그것은 ion-tabs와 ion-vue-router가 조합한 것임을 발견할 수 있을 것이다
원인은 이온탭의 높이가 잘 나오지 않았기 때문인 것 같다.
이 방면을 더욱 좋아지게 할 수 있다면, ion-app을 많이 쓸 필요가 없다.
Reference
이 문제에 관하여(Ionic/Vue로 iOS 어플리케이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fruitriin/items/8fe0865fc4ea548e5952
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
ionic init를 진행합니다.
ionic init.ionic.config.json.으로 표시됨
command not found: ionic 에서 전역적으로 ionic CLI가 설치되지 않았기 때문에npm install -D ionic에서 로컬 설치를 하고 npx ionic init에서 실행하면 됩니다.ionic capacitor copy
npx ionic capacitor copy.(상술한 ionic init를 진행하지 않으면 환영을 받을 것입니다.)
이럴 때 yarn 프로젝트도 주세요
npm install @ionic/coreyarn의 프로젝트라면 node_혼합 모듈.따라서 처음부터 npm 프로젝트로 삼는 것을 권장합니다.[error] Capacitor could not find the web assets directory (中略)/www은 이끼를 나타낸다.capacitor.config.json, 따라서 webDir 항목을 편집합니다.capacitor.config.json
{
"appId": "io.ionic.starter",
"appName": "vue-ionic-example",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "dist"
}
wwwからdistへ 생산 구축하십시오.여기에 도착하면 다시
npm run build 하십시오.cap add ios 진행
npx ionic capacitor copy.프로젝트에서 iOS 디렉터리가 차단되어 iOS를 위한 xcode 프로젝트를 만듭니다.
cap open ios를 진행합니다.
npx cap add ios.Xcode가 시작됩니다.
Xcode로 구축
'구축'단추를 누르면 아날로그를 구축하고 시작합니다.
CocoaPods 관련 오류로 시작할 수 없는 경우
iOS 라이브러리 관리 도구 CocoaPods 사용 방법 - Qiitahttps://qiita.com/satoken0417/items/479bcdf91cff2634ffb1
이 글은 CocoaPods 설치/업데이트를 참조하십시오.
시동 걸었어!
와
Let's Ionic/Vue!
향후 개발에 관하여
기본npx cap open ios 웹 버전 보기 화면 개발npm run serve 및 npm run build 이후에 XCode로 재구성하십시오.
상태 표시줄 관통에 관한 문제
이렇게 하면 상태 표시줄이 머리글을 관통합니다.
이 문제에 관해서는 npx cap copy의viewport를 다음과 같이 바꾸십시오.
public/index.html<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-ionic-example</title>
</head>
<body>
（以下省略）
제목: 로컬 API 및 UI 구성 요소
UI 구성 요소에 대한 자세한 내용은 Ionic 설명서를 참조하십시오.
Ionic Framework - Ionic Documentation
https://ionicframework.com/docs
한편, 로컬 API를 사용하려면 Capacitor 문서를 참조해야 합니다. 위치가 다르므로 주의하십시오.
Capacitor - A Cross-platform App Runtime - Capacitor
https://capacitor.ionicframework.com/docs/
페이지 구성 요소 및 응용 프로그램에 대한 사과와 수정
처음에 소개한 자신의 슬라이드에서
"페이지 구성 요소도 없으면public/index.html 표시되지 않을 것 같아요?"쓰여 있지만
다시 시도할 때 드러났다.
만약 당신이 순조롭지 못한 코드를 본다면, 그것은 ion-tabs와 ion-vue-router가 조합한 것임을 발견할 수 있을 것이다
원인은 이온탭의 높이가 잘 나오지 않았기 때문인 것 같다.
이 방면을 더욱 좋아지게 할 수 있다면, ion-app을 많이 쓸 필요가 없다.
Reference
이 문제에 관하여(Ionic/Vue로 iOS 어플리케이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fruitriin/items/8fe0865fc4ea548e5952
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-ionic-example</title>
</head>
<body>
（以下省略）
Reference
이 문제에 관하여(Ionic/Vue로 iOS 어플리케이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fruitriin/items/8fe0865fc4ea548e5952텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
