Ionic4.x+Vue+Capacitor Develop APP framework

At present, there have been many articles about this technology stack building APP framework on the Internet, so this article mainly records the process of building an APP framework based on ionic4. x+Vue+Capacitor. The first time to write an article, clumsy writing style, please forgive me, wrong place, please help to point out.

Note: here I use vscode development tools for development

I. Construction of project framework

** Create a Vue project using the Vue Cli (default) :

npm install -g @vue/cli
vue create demo-app
cd demo-app
Copy the code

2. Start the project and check whether it is created successfully:

npm run serve
Copy the code

3. Now that you have successfully created a VUE project, add the Vue Router and Ionic framework to the project

vue add router
npm install @ionic/vue
Copy the code

Installing the Vue Router will let you choose whether to use history mode to create route recommendation No

Note: Hash mode is different from history mode

The most obvious difference is that hash has an ugly # in the URL and history has no #.

Once installed, it needs to be incorporated into our project so Ionic components can be used.

4. Open SRC /main.js and add the following three lines of code

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
Copy the code

SRC /router.js

import Vue from 'vue'
import Home from './views/Home.vue'
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})
Copy the code

Problems encountered during service startup:

Perform:

NPM [email protected] - I DCopy the code

7. Ionic components are now available. Modify the home.vue code as follows. Using ion-action-sheet as an example, go directly to the official website and copy the sample code:

<template>
  <IonVuePage :title="'Action Sheet'">
    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
  </IonVuePage>
</template>

<script>
export default {
  methods: {
    presentActionSheet() {
      return this.$ionic.actionSheetController
        .create({
          header: 'Albums',
          buttons: [
            {
              text: 'Delete',
              role: 'destructive',
              icon: 'trash',
              handler: () => {
                console.log('Delete clicked')
              },
            },
            {
              text: 'Share',
              icon: 'share',
              handler: () => {
                console.log('Share clicked')
              },
            },
            {
              text: 'Play (open modal)',
              icon: 'arrow-dropright-circle',
              handler: () => {
                console.log('Play clicked')
              },
            },
            {
              text: 'Favorite',
              icon: 'heart',
              handler: () => {
                console.log('Favorite clicked')
              },
            },
            {
              text: 'Cancel',
              icon: 'close',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked')
              },
            },
          ],
        })
        .then(a => a.present())
    },
  },
}
</script>
Copy the code

Service restart console if experiencing this problem:

Note: Since Ionic4.x is built using Web Component, we need to tell Vue that Ionic components are not Vue components. In main.js, add the following configuration objects that ignore all Ionic elements

Vue.config.ignoredElements = [/^Ion/, /^ion-/];
Copy the code

Check whether the project can run normally and whether there is abnormal information on the console; Ionic + Vue architecture is complete if all goes well

Ii. Project test release

Ionic is developed with capacitor, which provides a native interface similar to Cordova and is compatible with many existing cordova plug-ins

1. Start with an Ionic project

Perform:

ionic init
Copy the code

2. Install the capacitor in the project

npm install --save @capacitor/core @capacitor/cli
Copy the code

Initial capacitor, App name and App Package ID should be filled according to your own project

npx cap init
Copy the code

4. After initialization, the webDir in capacitor. Config. json was changed to dist, because the vue project was built as dist, so that we could save copying code to WWW directory (and we did not create WWW directory).

5. Build projects

npm run build
Copy the code

6. We use Capacitor to add support for the Android platform, and copy the built code to the Android project library

npx cap add android
npx cap copy android
Copy the code

npx cap open android
Copy the code