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/cliIf 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 projectnpm 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 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:
## 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 [email protected]:yuyue5945/ionicgate.git
git push -u origin main
…or push an existing repository from the command line
git remote add origin [email protected]:yuyue5945/ionicgate.git
git branch -M main
git push -u origin main
…or import code from another repository