Install the Ionic CLI

Before proceeding, make sure your computer has Node.js installed. See these instructions to set up an environment for Ionic

npm install -g @ionic/cli

If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name.

npm uninstall -g ionic
npm install -g @ionic/cli

Start with Vue

Run the following in the command line terminal to install the Ionic CLI (ionic), native-run, used to run native binaries on devices and simulators/emulators, and cordova-res, used to generate native app icons and splash screens:

//if failed , it's ok ,may be no effect to your project

npm install -g @ionic/cli@latest native-run cordova-res

Create an App

1、create an Ionic Vue app that uses the "Tabs" starter template and adds Capacitor for native functionality
2、change into the app folder:
3、Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work
4、Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic PWA Elements library.It's a separate dependency, so install it next

ionic start photo-gallery tabs --type vue --capacitor
cd photo-gallery
npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
npm install @ionic/pwa-elements 

Build your way with TypeScript or JavaScript

We love TypeScript at Ionic, and have believed for quite some time now that it’s a great tool for building scalable apps. That said, we know how much the Vue community values simplicity – in their tooling, languages, and more. In fact, it’s likely what drew you to Vue in the first place. Start simple – then scale up as needed.

So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app, follow these steps:

1.Remove TypeScript dependencies:
2.Change all .ts files to .js. In a blank Ionic Vue app, this should only be router/index.ts and main.ts.
3.Remove Array<RouteRecordRaw> from router/index.js.
4.Delete the shims-vue.d.ts file.
5.Remove lang="ts" from the script tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be App.vue and views/Home.vue.

npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript

Deploying to iOS and Android

Capacitor Setup

Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences here.

If you’re still running ionic serve in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports:

ionic build

Next, create the iOS and Android projects:
choose you need to create type

Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).

Every time you perform a build (e.g. ionic build) that updates your web directory (default: build), you'll need to copy those changes into your native projects:

$ ionic cap add ios
ionic cap add android
ionic cap copy

Note: After making updates to the native portion of the code (such as adding a new plugin), use the sync command:

$ ionic cap sync

Android

Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete.

First, run the Capacitor open command, which opens the native Android project in Android Studio:

$ ionic cap open android

Scroll to the Permissions section and ensure these entries are included:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Appflow

Connect Your Repo

echo "# ionicgate" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:yuyue5945/ionicgate.git
git push -u origin main

…or push an existing repository from the command line

git remote add origin git@github.com:yuyue5945/ionicgate.git
git branch -M main
git push -u origin main

…or import code from another repository
You can initialize this repository with code from a Subversion, Mercurial, or TFS project.