readme-ja.md

Ionic Vue Mobile Template 04

vue-ionic (最新版) と ネイティブアプリにビルドするための Capacitor フレームワーク を使ったハイブリッドアプリのテンプレートです。 - これらのテンプレートは Instagram や Dribble のアプリデザインのインスピレーションページにあったものを実装しました。

このテンプレートはCaptec 銀行のアプリをもとに実装しました。Captec 銀行は 南アフリカ最大級の銀行です。国内に 1000 以上の支店を持ち、個人向け銀行サービスを提供しています。このテンプレートでは、一般的な外観に焦点を当てています。

デモページ

環境を構築する

npm install

開発環境でブラウザ上で起動する

npm run serve

デザイン

ネイティブアプリについて

ネイティブアプリをビルドするために Capacitor を使用しました。

ネイティブアプリにビルドするための準備

iOS でのテスト、ディストリビューション

1. 最新版の Xcode をダウンロードしてください。
2. npm run build
3. npx cap add ios
4. npx cap copy
5. npx cap open ios Xcode がファイルのインデックスを作成するのに数分かかります。XCode の画面上部の進捗状況に注目してください。

[任意] 正常に動作するかを確認するために、画面上部の左側にある 実行ボタンをクリックしてください。もしシミュレーター上でアプリが起動します。 もし何も問題なければ、ログインしてクリックできるようになるはずです。そうでなければ、issue を作成してください🤷。確認します。

アイコンとスプラッシュ画面 - Xcode (v11.5) では、config.xml 上のアイコンをマッピングできまないので、手動で行う必要があります😞。 ルートディレクトリ上で、Resources を探し、Images.xcassets を選択します。パネルが表示され、アイコンを追加する場合はアプリアイコンを、スプラッシュ画面を追加したい場合にLaunchImages を選択できます。

Android でのテスト、ディストリビューション

1. 最新版の Android Studio をダウンロードします。

2. npm run build

3. npx cap add android

4. npx cap copy

5. npx cap open android Android Studio がファイルのインデックスの作成に数分かかります。画面下部の進捗状況に注目してください。

6. Testing -インデックス作成完了後、緑の実行ボタンを探してください。そのボタンをクリックすると、エミュレーター上、あるいは、もし USB 接続されているなら、スマホでアプリが起動します。(エミュレーターのセットアップはこちら)

公式ドキュメント

• ブログ
• Getting started
• Changelog

お問い合わせ

• @dlodeprojuicer on Twitter