Search docs/

你的第一个 Ionic 应用:Vue

Ionic的伟大之处在于,只需一个代码库,您就可以仅使用HTML,CSS和JavaScript为任何平台进行构建。 通过逐步创建逼真的应用程序,跟随我们学习Ionic应用程序开发的基础知识。

这是在所有3个平台上运行的成品应用程序:

我们将建立什么?

我们将创建一个圖庫应用程序,该应用程序可以使用设备的相机拍摄照片,将照片显示在网格中并永久存储在设备上。

Highlights include:

  • One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework UI components.
  • Deployed as a native iOS and Android mobile app using Capacitor, Ionic's official native app runtime.
  • Photo Gallery functionality powered by the Capacitor Camera, Filesystem, and Storage APIs.

It’s easy to get started.

Find the complete app code referenced in this guide on GitHub.

Download Required Tools

Download and install these right away to ensure an optimal Ionic development experience:

  • Node.js for interacting with the Ionic ecosystem. Download the LTS version here.
  • A code editor for... writing code! We are fans of Visual Studio Code.
  • Command-line interface/terminal (CLI):
    • Windows users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
    • Mac/Linux users, virtually any terminal will work.

Install Ionic Tooling

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:

To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.

$ npm install -g @ionic/cli@latest native-run cordova-res

The -g option means install globally. When packages are installed globally, EACCES permission errors can occur.

Consider setting up npm to operate globally without elevated permissions. See Resolving Permission Errors for more information.

Create an App

Next, create an Ionic Vue app that uses the "Tabs" starter template and adds Capacitor for native functionality:

$ ionic start photo-gallery tabs --type vue --capacitor

This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!

Next, change into the app folder:

$ cd photo-gallery

PWA Elements

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:

$ npm install @ionic/pwa-elements

After installation, open up the project in your code editor of choice.

Next, import @ionic/pwa-elements by editing src/main.ts.

// Above the createApp() line
import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
CopyCopied

That’s it! Now for the fun part - let’s see the app in action.

Run the App

Run this command in your shell:

$ ionic serve

And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.

There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!

Before and after going through this tutorial

Open /src/views/Tab2.vue. We see:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 2</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 2</ion-title>
        </ion-toolbar>
      </ion-header>

      <ExploreContainer name="Tab 2 page" />
    </ion-content>
  </ion-page>
</template>
CopyCopied

ion-header represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:

<ion-title>Photo Gallery</ion-title>
CopyCopied

We put the visual aspects of our app into <ion-content>. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. But first, remove the ExploreContainer component, beginning with the import statement:

import ExploreContainer from '@/components/ExploreContainer.vue';
CopyCopied

Next, remove the component name (ExploreContainer) from the components list in the Default Export and the HTML:

<ExploreContainer name="Tab 2 page" />
CopyCopied

We'll replace it with a floating action button (FAB). First, update the imports within the <script> tag to include the Camera icon as well as some of the Ionic components we'll use shortly:

import { camera, trash, close } from 'ionicons/icons';
import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, 
         IonToolbar, IonTitle, IonContent, IonGrid, IonRow, 
         IonCol, IonImg } from '@ionic/vue';
CopyCopied

Next, add the new Ionic components we'll be using to the default export as well as returning the Ionicons in the setup() method (part of the Composition API):

export default  {
  name: 'Tab2',
  components: { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, 
         IonToolbar, IonTitle, IonContent, IonGrid, IonRow, 
         IonCol, IonImg },
  setup() {
    return {
      camera, trash, close
    }
  }
}
CopyCopied

Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the takePhoto() function when this button is clicked (to be implemented soon):

<ion-content :fullscreen="true">
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button @click="takePhoto()">
      <ion-icon :icon="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
CopyCopied

We’ll be creating the takePhoto method and the logic to use the Camera and other native features in a moment.

Next, open src/views/Tabs.vue then import the images icon:

import { images, square, triangle } from 'ionicons/icons';
CopyCopied

Within the tab bar (<ion-tab-bar>), change the label to "Photos" and the icon to images for the middle tab button:

<ion-tab-button tab="tab2" href="/tabs/tab2">
  <ion-icon :icon="images" />
  <ion-label>Photos</ion-label>
</ion-tab-button>
CopyCopied

That’s just the start of all the cool things we can do with Ionic. Up next, implementing camera taking functionality on the web, then building for iOS and Android.

Previous
概述
Next
Taking Photos