Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dlodeprojuicer/ionic-vue-mobile-template-04
Hybrid app template built with vue, ionic and capacitor.
https://github.com/dlodeprojuicer/ionic-vue-mobile-template-04
boilerplate-template capacitor cordova ionic ionic-vue template vue3
Last synced: 7 days ago
JSON representation
Hybrid app template built with vue, ionic and capacitor.
- Host: GitHub
- URL: https://github.com/dlodeprojuicer/ionic-vue-mobile-template-04
- Owner: dlodeprojuicer
- License: mit
- Created: 2020-09-24T20:22:39.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-21T17:56:14.000Z (over 1 year ago)
- Last Synced: 2023-08-02T02:59:39.550Z (over 1 year ago)
- Topics: boilerplate-template, capacitor, cordova, ionic, ionic-vue, template, vue3
- Language: Vue
- Homepage: https://ionic-vue-mobile-template-04.netlify.app
- Size: 5.48 MB
- Stars: 39
- Watchers: 1
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: readme-ja.md
- License: License.txt
Awesome Lists containing this project
README
## Ionic Vue Mobile Template 04
vue-ionic ([最新版](https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/)) と ネイティブアプリにビルドするための Capacitor フレームワーク を使ったハイブリッドアプリのテンプレートです。 - これらのテンプレートは Instagram や Dribble のアプリデザインのインスピレーションページにあったものを実装しました。
このテンプレートはCaptec 銀行のアプリをもとに実装しました。Captec 銀行は 南アフリカ最大級の銀行です。国内に 1000 以上の支店を持ち、個人向け銀行サービスを提供しています。このテンプレートでは、一般的な外観に焦点を当てています。
[デモページ](https://ionic-vue-mobile-template-04.netlify.app)
## 環境を構築する
```
npm install
```
### 開発環境でブラウザ上で起動する
```
npm run serve
```
## デザイン
## ネイティブアプリについて
ネイティブアプリをビルドするために [Capacitor](https://capacitorjs.com/docs/getting-started) を使用しました。
### ネイティブアプリにビルドするための準備
## iOS でのテスト、ディストリビューション
1. 最新版の Xcode をダウンロードしてください。
2. `npm run build`
3. `npx cap add ios`
3. `npx cap copy`
4. `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`
3. `npx cap copy`
4. `npx cap open android` Android Studio がファイルのインデックスの作成に数分かかります。画面下部の進捗状況に注目してください。
5. Testing -インデックス作成完了後、緑の実行ボタンを探してください。そのボタンをクリックすると、エミュレーター上、あるいは、もし USB 接続されているなら、スマホでアプリが起動します。([エミュレーターのセットアップはこちら](https://developer.android.com/studio/run/managing-avds))
## 公式ドキュメント
- [ブログ](https://ionicframework.com/blog/announcing-ionic-vue/)
- [Getting started](https://ionicframework.com/docs/vue/quickstart)
- [Changelog](https://github.com/ionic-team/ionic-framework/blob/master/CHANGELOG.md)
## お問い合わせ
- [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter