Ionic Vue 快速入門

什麼是 Ionic Framework？

首先，如果您是新手，歡迎！Ionic Framework 是一個免費且開源的元件庫，用於建置可在 iOS、Android、Electron 和 Web 上執行的應用程式。使用熟悉的技術 (HTML、CSS、JavaScript) 撰寫一次您的應用程式，並部署到任何平台。

除了 UI 元件外，Ionic Framework 還提供一個命令列工具，用於建立新的應用程式，以及部署到我們支援的各種平台。

在本指南中，我們將介紹 Vue 和 Ionic Framework 的基礎知識，包括任何 Ionic Framework 特有的功能。如果您熟悉 Vue，請享受本指南並學習一些關於 Ionic Framework 的新知識。如果您不熟悉這兩者，別擔心！本指南將涵蓋基礎知識，並提供足夠的資訊來啟動並執行應用程式。

使用 Ionic CLI 建立專案

首先，讓我們安裝最新版本的 Ionic CLI。

npm install -g @ionic/cli@latest

從這裡，全域命令 ionic 將允許使用 Ionic Framework 和任何其他相依性建立 Vue 專案。若要建立新專案，請執行下列命令

ionic start myApp blank --type vue
cd myApp

從這裡，我們執行 ionic serve，讓我們的專案在瀏覽器中執行。

使用 TypeScript 或 JavaScript 建置您的程式碼

我們在 Ionic 非常喜歡 TypeScript，並且一直認為它是建置可擴充應用程式的絕佳工具。也就是說，我們知道 Vue 社群有多重視簡單性 – 在他們的工具、語言等等方面。事實上，這很可能是您最初選擇 Vue 的原因。從簡單開始 – 然後根據需要擴充。

因此，如果您偏好使用 JavaScript 而非 TypeScript，您可以這麼做。在產生 Ionic Vue 應用程式之後，請依照下列步驟操作

1. 移除 TypeScript 相依性

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

2. 將所有 .ts 檔案變更為 .js。在空白的 Ionic Vue 應用程式中，這應該只有 src/router/index.ts 和 src/main.ts。如果您正在使用測試，也請變更 tests 目錄中檔案的副檔名。

3. 在 index.html 中，將匯入的 <script> 檔案從 /src/main.ts 變更為 /src/main.js。

4. 從 .eslintrc.js 移除 @vue/typescript/recommended 和 @typescript-eslint/no-explicit-any: ‘off’,。

5. 從 src/router/index.js 移除 Array<RouteRecordRaw> 和 RouteRecordRaw 的匯入。

6. 如果存在，請刪除 src/vite-env.d.ts 檔案。

7. 從任何具有它們的 Vue 元件中的 script 標籤移除 lang="ts"。在空白的 Ionic Vue 應用程式中，這應該只有 src/App.vue 和 src/views/HomePage.vue。

8. 刪除 tsconfig.json 檔案。

9. 在 package.json 中，將建置指令碼從 "build": "vue-tsc && vite build" 變更為 "build": "vite build"

10. 安裝 terser npm i -D terser。

檢視 Vue 元件

我們應用程式的基礎將位於 src 目錄中，而主要進入點將是我們的 main.ts 檔案。如果我們在程式碼編輯器中開啟專案並開啟 main.ts，我們應該會看到以下內容

import { createApp } from 'vue';
import { IonicVue } from '@ionic/vue';

import App from './App.vue';
import router from './router';

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

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

這裡發生什麼事？前四行正在提取一些相依性。createApp 函式讓我們初始化我們的 Vue 應用程式，而 IonicVue 是一個外掛程式，允許我們在 Vue 環境中使用 Ionic Framework。

第三個匯入是我們應用程式的根元件，簡單地命名為 App。這是我們的第一個 Vue 元件，將用於我們 Vue 應用程式的啟動過程中。

第四個匯入取得我們的路由設定。我們稍後將更深入地探討這一點。

如果我們開啟 App.vue，我們應該會看到以下內容

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

<script setup lang="ts">
  import { IonApp, IonRouterOutlet } from '@ionic/vue';
</script>

讓我們分解它，從匯入開始。

<script setup lang="ts">
  import { IonApp, IonRouterOutlet } from '@ionic/vue';
</script>

若要在 Vue 中使用元件，您必須先匯入它。因此，對於 Ionic Framework，這表示每當我們想要使用按鈕或卡片時，都必須將其新增到我們的匯入中。以我們的 App 元件為例，我們正在使用 IonApp 和 IonRouterOutlet。Vue 的 script setup 語法讓範本可以將這些元件存取為 <ion-app> 和 <ion-router-outlet>。

如果您發現自己重複匯入相同的元件，也可以全域註冊元件。這會帶來效能方面的取捨，我們將在 最佳化您的建置中介紹。

接下來，讓我們看看範本。

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

所有 Vue 元件都必須具有 <template>。在其中，我們放置我們的 IonApp 和 IonRouterOutlet 元件。

初始化路由器

Ionic Vue 使用 vue-router 相依性，因此如果您已經熟悉 Vue Router，您將能夠將您所知道的應用於 Ionic Vue 中的導覽。讓我們看看我們之前提到的路由器設定。在 router/index.ts 中，您應該會看到類似以下內容

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

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

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

export default router;

注意

此範例正在使用 Ionic Vue Blank 入門應用程式，因此您的實際路由可能看起來有點不同。

此處的設定與您直接使用 vue-router 時相同，但您需要從 @ionic/vue-router 套件匯入 createRouter 和 createWebHistory 等相依性。

在匯入我們的相依性之後，我們可以在 routes 陣列中宣告我們的路由。從那裡，我們可以建立路由器執行個體，並為其提供我們的路由以及我們要使用的歷程類型。

使用 Ionic Vue，延遲載入可立即使用。除了匯入我們的 Home 元件之外，我們也可以執行

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

現在，您可能想知道：為什麼我們在描述元件的路徑時使用 @？@ 符號是我們可以用來描述相對於 src 目錄的路徑的捷徑。如果我們試圖在位於多個資料夾深處的檔案中參考元件，這會很有用。與其執行 '../../../views/HomePage.vue'，我們不如簡單地執行 '@/views/HomePage.vue'。

具有樣式的元件

現在 App 元件實際上沒有太多需要修改的地方。這是一個容器元件的基本範例。設定路由邏輯後，它唯一負責的是轉譯符合給定 URL 路由的元件。既然我們已經有一個元件/路由器設定，讓我們繼續修改我們的 Home 元件。

目前，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://ionic.dev.org.tw/docs/components"
            >UI Components</a
          >
        </p>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</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>

就像我們開始使用的 App 元件一樣，我們有一些特定 Ionic Framework 元件的匯入、來自 Vue 的匯入、Vue 元件以及與我們的元件一起使用的樣式。

對於我們的樣式，請注意我們已指定我們的樣式為 scoped。這表示我們在此處撰寫的樣式將僅適用於此元件。這對於防止樣式從元件洩漏並影響您應用程式的其他部分很有用。我們強烈建議對 Ionic Vue 應用程式使用 scoped 樣式。

IonPage 是所有頁面（具有路由/URL 的元件）的基本元件，並包含全螢幕元件的一些常見建構區塊，例如標頭、標題和內容元件。

注意

在建立您自己的頁面時，請不要忘記讓 IonPage 成為它們的根元件。讓 IonPage 成為根元件很重要，因為它有助於確保轉場順利運作，並提供 Ionic Framework 元件所依賴的基本 CSS。

IonHeader 是一個設計放在頁面頂部的元件。它本身的功能不多，除了處理一些基於 flexbox 的佈局外，主要是用來放置其他元件，例如 IonToolbar 或 IonSearchbar。

IonContent，顧名思義，是我們頁面的主要內容區域。它負責提供使用者會互動的可滾動內容，以及應用程式中可能用到的滾動事件。

我們目前的內容相對簡單，不包含任何可以在真實應用程式中使用的東西，所以讓我們來改變一下。

注意

為了簡潔起見，我們將排除元件中重複的部分，例如函式宣告或從其他元件導入的語句。

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

<script setup lang="ts">
  import {
    IonBadge,
    IonCheckbox,
    IonContent,
    IonHeader,
    IonItem,
    IonList,
    IonNote,
    IonPage,
    IonTitle,
    IonToolbar,
  } from '@ionic/vue';
</script>

在我們的 IonContent 中，我們正在新增一個 IonList 和一個更複雜的 IonItem 元件。讓我們看看 IonItem，因為它是這裡的核心。

<ion-item>
  <ion-checkbox label-placement="end" justify="start">
    <h1>Create Idea</h1>
    <ion-note>Run Idea By Brandy</ion-note>
  </ion-checkbox>
  <ion-badge color="success" slot="end">5 Days</ion-badge>
</ion-item>

看看我們的程式碼，我們有一個稱為 slot 的特殊屬性。這對於讓 IonItem 知道在渲染時將 IonBadge 放置在哪裡至關重要。這不是 Vue API，而是一個 Web 標準 API，它在許多 Ionic Framework 元件中都有使用。此外，這與您可能從 Vue 2 回憶起的 slots API 不同。（有關 slots 的更多資訊，請參閱此處的 MDN 文件。）

讓我們看看 Ionic Framework 的另一個元件，FAB。浮動操作按鈕是一種提供從應用程式其餘部分突出顯示的主要操作的好方法。對於這個 FAB，我們需要三個元件：一個 FAB、一個 FAB 按鈕和一個圖示。

<template>
  <ion-page>
    <ion-content>
      <ion-list> ... </ion-list>

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

<script setup>
  import {
    IonBadge,
    IonCheckbox,
    IonContent,
    IonFab,
    IonFabButton,
    IonHeader,
    IonIcon,
    IonItem,
    IonList,
    IonNote,
    IonPage,
    IonTitle,
    IonToolbar,
  } from '@ionic/vue';
  import { add } from 'ionicons/icons';
</script>

在我們主要的 IonFab 上，我們使用垂直和水平屬性設定其位置。我們還使用 slot 屬性將渲染位置設定為「fixed」。這會告訴 IonFab 在 IonContent 中可滾動內容的外部渲染。

現在讓我們為此設定一個點擊處理程式。當點擊 FAB 按鈕時，我們想要導覽到一個新頁面（我們稍後會建立它）。要做到這一點，我們需要存取 Vue Router 的導覽 API。這可以透過從 vue-router 套件導入 useRouter 來完成。

<template>
  <ion-page>
    <ion-content>
      <ion-list> ... </ion-list>

      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button @click="() => router.push('/new')">
          <ion-icon :icon="add"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>
  </ion-page>
</template>

<script setup>
  import { add } from 'ionicons/icons';
  import { useRouter } from 'vue-router';
  const router = useRouter();
</script>

在我們的元件檔案中，我們正在導入 useRouter 函式。當呼叫此函式時，它會將路由器依賴注入到元件中。它讓我們可以存取 Vue Router 的歷史 API，讓我們能夠將新路由推送到導覽堆疊上。在我們的 IonFabButton 上，我們可以新增一個點擊處理程式，然後只需呼叫 router.push 並傳入新路由。在此情況下，我們將導覽至 new。

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

建立新路由

現在我們已經有了在應用程式中導覽的組件，我們需要建立一個新元件並將新路由新增到我們的路由器宣告中。讓我們打開我們的 router/index.ts 檔案並新增新路由。

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Home',
    component: HomePage,
  },
  {
    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 setup lang="ts">
  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>

注意

每個視圖都必須包含一個 IonPage 元件。如果沒有它，頁面轉換將無法正常運作。有關更多資訊，請參閱IonPage 文件。

此處的內容應與 Home 元件類似。這裡不同的是 IonBackButton 元件。它用於導覽回上一條路由。看起來很簡單，對吧？好的，但是如果我們重新載入頁面呢？

在這種情況下，記憶體中的歷史記錄會遺失，因此返回按鈕會消失。為了解決這個問題，我們可以將 default-href 屬性值設定為如果沒有歷史記錄時我們要導覽到的 URL。

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

現在，如果沒有應用程式歷史記錄，我們將能夠導覽回我們的首頁路由。

呼叫元件上的方法

為了呼叫任何 Ionic Vue 元件上的方法，您首先需要取得元件實例的引用。接下來，您需要使用 $el 存取底層的 Web 元件並呼叫該方法。

在其他框架整合中，例如 Ionic React，這是不需要的，因為您提供的任何 ref 都會自動轉發到底層的 Web 元件實例。由於 Vue 管理 refs 的方式限制，我們無法在此處執行相同的操作。

<template>
  <ion-content ref="content">
    <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>

    ...
  </ion-content>
</template>

<script setup lang="ts">
  import { IonButton, IonContent } from '@ionic/vue';
  import { ref } from 'vue';

  const content = ref();
  const scrollToBottom = () => {
    content.value.$el.scrollToBottom(300);
  };
</script>

新增圖示

Ionic Vue 預先安裝了 Ionicons。開發人員有幾種選擇可以在其應用程式中使用它們。

每個元件導入

每個元件導入是使用 Ionicons 的建議方法。這涉及從 ionicons 套件中導入您選擇的圖示，並將其傳遞到您的範本中

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

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

讓我們分解一下我們在這裡做什麼。首先，我們正在從 ionicons/icons 中導入 heart 圖示。這將載入我們圖示的適當 SVG 資料。

然後，我們透過 icon 屬性將圖示資料傳遞到 ion-icon 元件中。

開發人員也可以選擇根據模式設定不同的圖示

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

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

請注意，任何以連字符號分隔的圖示名稱在導入時都應以駝峰式大小寫撰寫。

全域導入

另一個選擇是全域導入特定圖示。通常不建議這樣做，因為它會強制在您的應用程式每次啟動時載入圖示，並且可能會增加您的應用程式的初始區塊大小。

話雖如此，在某些情況下，全域載入特定圖示是有意義的

main.ts

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

addIcons({
  heart: heart,
});

HomePage.vue

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

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

在 main.ts 中，addIcons 函式允許我們全域註冊圖示，並給它一個字串作為鍵。然後，我們在 Home 元件中透過該鍵參考圖示。

最佳化您的建置

Vue 為您提供了幾個微調應用程式的工具。本節將涵蓋與 Ionic Framework 最相關的選項。

本機元件註冊（建議）

預設情況下，Ionic Framework 元件會在本機註冊。透過本機註冊，這些元件會被導入並提供給您想要使用它們的每個 Vue 元件。這是建議的方法，因為它允許惰性載入和 tree-shaking 正常使用 Ionic Framework 元件。

這種方法的一個缺點是，多次重新導入您的 Ionic Framework 元件可能會很繁瑣。但是，我們認為您獲得的效能優勢是值得的。

另請注意，本機註冊的元件在子元件中不可用。您需要在子元件中重新導入您想要使用的 Ionic Framework 元件。

讓我們看看本機元件註冊是如何運作的

<template>
  <ion-page>
    <ion-content>
      <SubComponent></SubComponent>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
  import { IonContent, IonPage } from '@ionic/vue';
  import SubComponent from '@/components/SubComponent.vue';
</script>

在上面的範例中，我們正在使用 IonPage 和 IonContent 元件。若要使用它們，我們從 @ionic/vue 導入它們。從那裡，我們可以在範本中使用這些元件。

請注意，由於我們在本機註冊這些元件，除非我們也在那裡註冊它們，否則 IonPage 和 IonContent 都無法在 SubComponent 中使用。

有關更多資訊，請參閱本機註冊 Vue 文件。

全域元件註冊

註冊元件的另一個選項是使用全域註冊。全域註冊涉及在 main.ts 中導入您想要使用的元件，並在您的 Vue 應用程式實例上呼叫 component 方法。

雖然這使得將 Ionic Framework 元件新增到您的 Vue 應用程式更容易，但全域註冊通常不是理想的選擇。引述 Vue 文件：「如果您正在使用像 Webpack 這樣的建置系統，全域註冊所有元件意味著即使您停止使用某個元件，它仍然可能包含在您的最終建置中。這會不必要地增加使用者必須下載的 JavaScript 數量」。

讓我們看看全域元件註冊是如何運作的

main.ts

import { IonContent, IonicVue, IonPage } from '@ionic/vue';

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

app.component('ion-content', IonContent);
app.component('ion-page', IonPage);

MyComponent.vue

<template>
  <ion-page>
    <ion-content>
      <SubComponent></SubComponent>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
  import SubComponent from '@/components/SubComponent.vue';
</script>

在上面的範例中，我們正在使用 IonPage 和 IonContent 元件。若要使用它們，我們首先從 main.ts 中的 @ionic/vue 導入它們。從那裡，我們在應用程式實例上呼叫 component 方法，並將標籤名稱以及元件定義傳遞給它。在我們這樣做之後，我們可以在應用程式的其餘部分中使用這些元件，而無需將它們導入到每個 Vue 元件中。

有關更多資訊，請參閱全域註冊 Vue 文件。

預先擷取應用程式 JavaScript

預設情況下，Vue CLI 會自動為您應用程式中的 JavaScript 產生預先擷取提示。預先擷取會利用瀏覽器閒置時間來下載使用者可能在不久的將來訪問的文件。當使用者訪問需要預先擷取文件的頁面時，可以從瀏覽器的快取快速提供。

預先載入會消耗頻寬，所以如果你的應用程式很大，你可能會想停用它。你可以透過修改或建立你的 vue.config.js 檔案來做到這一點。

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch');
  },
};

上面的設定將會阻止所有檔案被預先載入，取而代之的是，它們會在需要時才被載入。你也可以選擇特定的區塊來預先載入。請參考 Vue CLI 關於預先載入的文件 以取得更多範例。

建立原生應用程式

我們現在已經掌握了 Ionic Vue 應用程式的基本知識，包括一些 UI 元件和導覽。Ionic Framework 元件的優點是它們可以在任何地方運作，包括 iOS、Android 和 PWA。為了部署到行動裝置及其他平台，我們使用 Ionic 的跨平台應用程式執行環境 Capacitor。它提供了一組一致且以網頁為中心的 API，使應用程式能夠盡可能地接近網頁標準，同時在支援它們的平台上存取豐富的原生裝置功能。

新增原生功能很容易。首先，將 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。有一些很棒的功能，包括相機 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="imageSrc" />
      <ion-button @click="takePhoto()">Take Photo</ion-button>
    </ion-content>
  </ion-page>
</template>

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

  const imageSrc = ref('');
  const takePhoto = async () => {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri,
    });

    imageSrc.value = image.webPath;
  };
</script>

接下來的方向

本指南涵蓋了建立 Ionic Vue 應用程式、新增一些基本導覽，以及介紹 Capacitor 作為建立原生應用程式的方式的基本知識。要深入了解如何使用 Vue 和 Capacitor 建構完整的 Ionic Framework 應用程式，請參考我們的第一個應用程式指南。

若要更詳細地了解 Ionic Framework 的元件，請參考元件 API 頁面。若要了解更多關於 Vue 的詳細資訊，請檢閱Vue 文件。若要繼續建置原生功能，請參閱Capacitor 文件。

祝你應用程式建置愉快！🎉