イオンとVue JSの上で私の近づく本を見てください

Update from original post Jan 2019 which was based on Vue.js version 2

概要

Vueバージョンスリー この動画について

カバーされるwhats ...

created project using latest cli from Ionic using ionic start --tag vue-beta

<script lang="ts">
// import components from ionic
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";

// import capacitor plugins
import { Plugins, CameraSource, CameraResultType } from "@capacitor/core";
const { Camera } = Plugins;

// import from vue
import { defineComponent, ref } from "vue";

// import to get access to the router
import { useRouter } from "vue-router";

// define the component
export default defineComponent({

  // provide the name
  name: "Home",

  // provide the list of components being used in the
  // template
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },

  // setup function, It is called after props resolution, when 
  // instance of the component is created.
  setup() {
    const imageUrl = ref<string | null>();

    // get access to router
    const router = useRouter();

    // functions
    const nextPage = () => { };
    const takePicture = async () => { };

    // return the props and functions to component
    // so they are accessible in the template
    return {
      takePicture,
      imageUrl,
      nextPage,
    };
  },
});
</script>

// old way
this.$router.push("/next-page");

// new way
const router = useRouter();
router.push("/next-page");

<!-- in template -->
<div class="ion-padding">
   <img :src="imageUrl ? imageUrl : null" />
</div>

// in function
console.log(imageUrl.value);

コンデンサプラグインサポート

// import
import { Plugins, CameraSource, CameraResultType } from "@capacitor/core";
const { Camera } = Plugins;

// code inside of `setup()`
const takePicture = async () => {
  try {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Prompt,
    });
    console.log("image", image);
    // image.base64_data will contain the base64 encoded 
    // result as a JPEG, with the data-uri prefix added
    // unwrap to set the `value`
    imageUrl.value = image.dataUrl;

    // can be set to the src of an image now
    console.log(image);
  } catch (e) {
    console.log("error", e);
  }
};

カメラプラグイン キャパシタPWAサポート

//main.ts
import { defineCustomElements } from '@ionic/pwa-elements/loader';


const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');

  defineCustomElements(window);
});

CLI統合

ソースコード

/ アーロンフンダース

コンデンサVuejsバージョン3とイオンV 5ベータコンポーネントを使用して

VEEJSイオンキャパシタのサンプルアプリケーション

9月3日更新

• Features: Tabs, Capacitor Plugins Camera, GeoLocation

• SEE BLOG POST - https://buff.ly/2GFhhO3

• PART TWO, Firebase Integration
• PART THREE, Firebase Integration, Authentication

Ionic:

   Ionic CLI       : 6.11.8-testing.0 (/Users/aaronksaunders/.nvm/versions/node/v13.9.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.0-dev.202009032307.949031e

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res (update available: 0.15.1) : 0.11.0
   native-run                             : 1.0.0

System:

   NodeJS : v13.9.0 (/Users/aaronksaunders/.nvm/versions/node/v13.9.0/bin/node)
   npm    : 6.13.7
   OS     : macOS Catalina

PWA /ウェブサイトで働いているカメラ

コアコンデンサプラグインを使用した位置情報

タイプスクリプトの使用

コンポーネントの構成パターンの使用

Githubを見る