ionic vue

本文轉載自查看原文 2020-10-23 16:08 1239 中文/ vue/ ionic

ionic 現在已經正式支持vue了（而且是3）

全局安裝或升級ionic-cli:

npm install -g @ionic/cli@latest

然后就可以創建項目了，跟之前用ionic創建angular項目差不多，以項目名myApp為例：

ionic start myApp blank --type vue

注，如果直接執行ionic start 會以交互的方法創建項目，可以指定項目名，項目模板類型（tabs, sidemenu, blank, list），框架類型 angular、react、vue。

創建好項目后進入項目目錄：

cd myApp

啟動項目（啟動開發服務器，並自動打開默認瀏覽器打開項目首頁）：

ionic serve

項目的源碼都在src，入口文件是main.ts，（實際生成的main.ts內容比下面多）

import { createApp } from 'vue'; //createApp函數使我們可以初始化Vue應用程序
import { IonicVue } from '@ionic/vue'; //IonicVue是一個插件，允許我們在Vue環境中使用Ionic Framework

import App from './App.vue'; //是導入我們應用程序的根組件，將會用做啟動組件
import router from './router';  // 導入獲取我們的路由配置，./router/index.ts

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

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

打開，App.vue我們將看到以下內容：

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue'; 導入兩個ionic-vue組件，就是上面template中的ion-app和ion-router-outlet
import { defineComponent } from 'vue';

//defineComponent 是vue3提供的新的函數，用於創建組件
export default defineComponent{
  name: 'App',   //當前組件的名稱
  components: {  //當前組件模板中用到的組件
    IonApp,         
    IonRouterOutlet
  }
  //這里還可以寫methods、setup等參數，參考Composition API文檔。
};
</script>

Ionic Vue使用vue-router路由，因此，如果您已經熟悉Vue Router，則可以將您所了解的知識應用於Ionic Vue中的導航。

路由器配置在中router/index.ts，您應該看到類似於以下內容，這里是以啟動項目模板blank為例：

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

這里的設置與直接使用vue-router時相同，但是您需要從@ionic/vue-router導入依賴項，例如createRouter和createWebHistory 。routes就是定義的路由表，router = createRouter就是創建路由器實例，其實參數routes就是我們上面創建的路由表，history是路由方式。

Ionic Vue中路由懶加載是開箱及用的，將上面導入Home組件改為懶加載的方式：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  }
]

@符號是我們可以用來描述相對於src目錄的路徑的快捷方式。如果要引用的組件路徑層級很深，如：'../../../views/Home.vue'，就可以寫為'@/views/Home.vue'。

Home組件看起來這樣：

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <strong>Ready to create an app?</strong>
        <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
      </div>
    </ion-content>
  </ion-page>
</template>

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

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

<style scoped>
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}
</style>

style標簽上的scoped，表示當前的style標簽內的樣式只影響當前組件，這對於防止樣式泄漏到組件之外並影響應用程序的其他部分很有用。我們強烈建議為Ionic Vue應用程序的樣式使用scoped。

IonPage 是所有頁面的基本組件（具有路由/ URL的組件），並且包括全屏組件的一些常見構造塊，例如title，header和content組件。

創建自己的頁面時，不要忘記IonPage做為頁面的根組件。IonPage是根組件很重要，因為它有助於確保過濾(transition)正常工作，並提供ionic組件依賴的基礎基礎CSS。

IonHeader是旨在存在於頁面頂部的組件。除了處理一些基於flexbox的布局外，它本身並沒有做太多事情。它旨在容納諸如IonToolbar或的組件IonSearchbar。

IonContent顧名思義，它是頁面的主要內容區域。它負責提供用戶將與之交互的可滾動內容，以及可在應用程序中使用的任何滾動事件。

進行一些修改：

<template>
  <ion-page>
    ...
    <ion-content>
      <ion-list>
        <ion-item>
          <ion-checkbox slot="start"></ion-checkbox>
          <ion-label>
            <h1>Create Idea</h1>
            <ion-note>Run Idea By Brandy</ion-note>
          </ion-label>
          <ion-badge color="success" slot="end">
            5 Days
          </ion-badge>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

這里的<ion-checkbox slot="start">中的slot在渲染ion-item時會將ion-checkbox渲染在ion-item的開始位置，這不是vue的API，這是WEB標准API，這與vue2的插槽API不同。

讓我們看看Ionic Framework的另一個組件FAB(浮動動作按鈕 Float Action Button)。對於FAB，我們將需要三個組件：FAB，FAB Button和 Icon。

<template>
<ion-content>
  ...
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon :icon="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
</template>

<script>
import { add } from 'ionicons/icons';

...

export default defineComponent({
  name: 'Home',
  ...,
  setup() {
    return {
      add
    }
  }
})
</script>

在ion-fab標簽上，我們用vertical，horizontal分別設置水平和垂直位置，slot="fixed"是設置fab為固定定位，不隨頁面滾動，（這個slot是ion-content的插槽，見ion-content的文檔說明），

現在，我們給FAB按鈕添加點擊處理程序。單擊FAB按鈕時，我們要導航到一個新頁面（稍后創建）。為此，我們需要Vue Router的導航API。這可以通過從vue-router包中導入useRouter來完成。

<ion-fab-button @click="() => router.push('/new')"> ... </ion-fab-button>

import { useRouter } from 'vue-router';

export default defineComponent({ name: 'Home', components: {  ... }, setup() { return { router: useRouter(), ... } } });

我們引入了 useRouter 函數，當調用時，這個函數會注入路由依賴到當前組件。通過Vue Router我們能夠訪問歷史API，從而我們可以將新路由壓入導航堆棧。對於當前的IonFabButton，我們可以添加一個點擊處理程序，只需調用router.push並傳遞新的路由即可。這里我們將導航到 /new。

現在需要創建一個新組件並將新路由添加到路由器聲明中。打開router / index.ts文件並添加新路由(規則)。

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue'
import NewItem from '@/views/NewItem.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }, { path: '/new',
    name: 'NewItem', component: NewItem }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

現在我們的路由器具有/ new路由的條目，我們將創建所需的組件NewItem。這將存在於views/NewItem.vue中。

現在讓我們用一些占位符內容填充NewItem.vue文件。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>New Item</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content></ion-content>
  </ion-page>
</template>

<script>
import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'NewItem',
  components: {
    IonBackButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

這里的內容類似於Home組件。區別是IonBackButton組件。它用於導航回到上一頁。但是如果我們重新加載頁面怎么辦？

在這種情況下，內存中的歷史記錄將丟失，因此后退按鈕會消失。為了解決這個問題，我們可以將default-href屬性值設置為沒有歷史記錄時要導航到的URL。

<ion-back-button default-href="/home"></ion-back-button>

現在，應用程序如果沒有歷史記錄，我們將導航回我們的Home頁。

Ionic Vue預先安裝了Ionicons。在應用程序中使用時有幾個方式。

方式一“動態導入”來使用Ionicons。這涉及從ionicons包中導入您選擇的圖標，並將其傳遞給模板：

<template>
  <ion-page>
    <ion-content>
      <ion-icon :icon="heart"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import { heart } from 'ionicons/icons';
import {
  IonContent,
  IonPage,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Icon',
  components: {
    IonContent,
    IonPage,
  },
  setup() {
    return { heart }
  }
});
</script>

首先，我們從ionicons/icons導入heart圖標。這將為我們加載圖標的SVG數據。接下來，我們在setup方法中將heart數據傳遞到模板。最后，我們通過icon屬性將圖標數據傳遞到ion-icon組件中。

開發人員還可以選擇根據模式設置不同的圖標：

<template>
  <ion-page>
    <ion-content>
      <ion-icon :ios="logoApple" :md="logoAndroid"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import { logoAndroid, logoApple } from 'ionicons/icons';
import {
  IonContent,
  IonPage,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Icon',
  components: {
    IonContent,
    IonPage,
  },
  setup() {
    return { logoAndroid, logoApple }
  }
});
</script>

請注意，在導入時，所有帶連字符的圖標名稱都應以駝峰形式書寫。如logo-apple要寫logoApple。

方式二全局導入特定圖標。通常不建議這樣做，因為它將在每次啟動應用程序時強制加載圖標，並且會增加應用程序的初始塊大小。但在某些情況下可能需要全局加載特定圖標：

main.ts

import { addIcons } from 'ionicons';
import { heart } from 'ionicons/icons';

addIcons({
  'heart': heart 
});

Home.vue

<template>
  <ion-page>
    <ion-content>
      <ion-icon icon="heart"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonContent,
  IonPage,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonPage,
  }
});
</script>

在main.ts中，addIcons函數使我們可以在全局范圍內注冊圖標，並為它提供一個字符串作為鍵。然后，我們在Home組件中通過該鍵引用該圖標。

構建原生App

現在，我們掌握了Ionic Vue應用程序的基礎知識，包括一些UI組件和導航。 Ionic Framework組件的優點在於它們可以在任何地方使用，包括iOS，Android和PWA。為了部署到移動設備，台式機以及其他設備，我們使用Ionic的跨平台應用程序運行時 Capacitor。它提供了一套以針對web的一致的API，使應用程序可以盡可能地以符合web標准的方式訪問所有被支持的平台上的豐富的本地設備功能。

添加本機功能很容易。首先，將Capacitor添加到您的項目中：

ionic integrations enable capacitor

接下來，構建項目，然后添加您選擇的平台：

ionic build
ionic cap add ios
ionic cap add android

我們使用標准的原生IDE（Xcode和Android Studio）來打開，構建和運行iOS和Android項目：

ionic cap open ios
ionic cap open android

可以在這里找到更多詳細信息。

接下來，檢查所有可用的API。有一些很棒的功能，包括Camera API。我們只需幾行代碼即可實現照片捕獲功能：

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <img :src="photo" />
      <ion-button @click="takePhoto()">Take Photo</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonButton,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { Plugins, CameraResultType } from '@capacitor/core';
const { Camera } = Plugins;

export default defineComponent({
  name: 'Home',
  components: {
    IonButton,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle
  },
  setup() {
    const imageSrc = ref('');
 const takePhoto = async () => {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Uri
      });

      imageSrc.value = image.webPath;
    }

    return {
 photo: imageSrc, takePhoto
    }
  }
})
</script>

本指南介紹了創建Ionic Vue應用程序，添加一些基本導航以及介紹Capacitor作為構建原生應用程序的方法的基礎知識。要深入研究使用Vue和Capacitor構建完整的Ionic Framework應用程序，請遵循我們的“第一個應用程序”指南。要詳細了解Ionic Framework的組件，請查看組件API。有關Vue的更多詳細信息，請查看Vue文檔。要繼續構建原生功能，請參閱Capacitor文檔。
祝構建應用程式愉快！ 🎉

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue引用ionic4 如何把一個vue組件改為ionic/angular組件 vue 常見操作及 ionic 實戰回顧 VUE+Ionic，項目搭建&打包成APK 構建Vue+Ionic+Cordova項目，開發全平台APP系列教程在Vue.js應用程序中使用Ionic 4組件 ionic之$ionicHistory ionic service Ionic -- css ionic 2 起航(一)