Logo

菜单

发布于 2026-01-06 5 阅读
0

构建你的第一个 Ionic Vue 应用

构建你的第一个 Ionic Vue 应用

构建你的第一个 Ionic Vue 应用

请参阅 Ionic Framework Vue JS 电子书和视频课程

概述

本文档旨在复现 Ionic Framework 文档中描述的示例应用程序（React 部分），但本例中使用的是Vue.js。您可以参考“构建您的第一个 Ionic React 应用 - 概述文档”来了解 Ionic Web 组件的具体细节，该文档提供了本文档未涵盖的更详细的信息。

@ionic/vue将 Ionic 的核心体验与专为 Vue 开发者量身定制的工具和 API 相结合。目前处于 beta 测试阶段。

使用 Ionic CLI 创建项目

由于目前您无法使用 ionic-cli 创建应用程序，我们将使用 ionic-cli vue-cli，然后添加运行项目所需的其他 ionic 库和依赖项。

让我们来获取最新的 Ionic 版本。

npm install -g ionic@latest
Enter fullscreen mode Exit fullscreen mode

my-app使用以下方式调用基础应用程序vue-cli；选择默认设置

vue create my-app
Enter fullscreen mode Exit fullscreen mode

现在添加所有特定的 Ionic 库，请注意版本的具体用法。

yarn add @ionic/vue@0.0.9
yarn add @ionic/core
yarn add vue-router
Enter fullscreen mode Exit fullscreen mode

Vue应用程序结构概览

首先main.js

打开后main.js你会看到以下内容。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
Enter fullscreen mode Exit fullscreen mode

我们需要在这里添加一些 Ionic 代码。

import Vue from 'vue'
import App from './App.vue'

import Ionic from "@ionic/vue"
import "@ionic/core/css/core.css"
import "@ionic/core/css/ionic.bundle.css"


Vue.config.productionTip = false;
Vue.use(Ionic);

new Vue({
  render: h => h(App),
}).$mount('#app')
Enter fullscreen mode Exit fullscreen mode

我们需要添加 Ionic 组件提供的额外样式。

让我们开始配置路由吧！

有关 vue-router 的更多信息，请参阅Vue Router 文档。

接下来，让我们移步App.vue并清理它，使其包含支持 ionic-router 所需的基本代码。

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>

<style>
</style>
Enter fullscreen mode Exit fullscreen mode

现在我们需要返回main.js并添加指向该HomePage.vue组件的默认路由。

让我们添加导入语句以支持自定义的 ionic-vue-router。

// router
import { IonicVueRouter } from "@ionic/vue";
Vue.use(IonicVueRouter);
Enter fullscreen mode Exit fullscreen mode

现在让我们添加指向我们主页的基本路由；请注意使用了 Ionic 的自定义 Vue Router。

const router = new IonicVueRouter({
  routes: [
    { path: "/", redirect: "/home" },
    {
      path: "/home",
      name: "home",
      component: () =>
        import(/* webpackChunkName: "home" */ "@/components/HomePage"),
    }
  ]
});
Enter fullscreen mode Exit fullscreen mode

首先，我们声明默认路由应重定向到主页路由。

    { path: "/", redirect: "/home" },
Enter fullscreen mode Exit fullscreen mode

然后我们指定主页路由并延迟加载HomePage组件。

请参阅vuejs.org文档中的“vuejs 中的延迟加载路由”。

    {
      path: "/home",
      name: "home",
      component: () =>
        import(/* webpackChunkName: "home" */ "@/components/HomePage"),
    }
Enter fullscreen mode Exit fullscreen mode

现在对象已经router初始化完毕，我们需要让它对应用程序中的所有 Vue 组件都可用。为此，我们需要在初始化时将路由作为属性传递给 Vue 对象。

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
Enter fullscreen mode Exit fullscreen mode

我们的第一个 Ionic 页面

此页面HomePage.vue组件是Ionic 文档vue中所述页面的版本。

请注意，vue我们不使用驼峰式命名法，而是使用连字符。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <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-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button >
          <ion-icon name="add" />
        </ion-fab-button>
      </ion-fab>
    </ion-content>
  </ion-page>
</template>

<script>
import { add } from "ionicons/icons";
import { addIcons } from "ionicons";
addIcons({
  "ios-add": add.ios,
  "md-add": add.md
});
export default {
  name: "HomePage",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Enter fullscreen mode Exit fullscreen mode

添加图标

你会注意到这里的代码处理图标的方式与 reactjs 版本中的处理方式略有不同。

1) 从 . 单独导入您想要使用的图标ionicons。2
) 使用 . 加载它们addIcons。

在下面的示例中，我们使用“添加”图标在组件中渲染ion-fab-button。

import { add } from "ionicons/icons";
import { addIcons } from "ionicons";
addIcons({
  "ios-add": add.ios,
  "md-add": add.md
});
Enter fullscreen mode Exit fullscreen mode

使用路由器

如果您注意到页面上有一个按钮，我们希望用户点击该按钮时页面能够跳转到下一页。我们可以使用vue-router来响应按钮的点击事件，从而实现这一目标。

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button @click="$router.push({ name: 'new-item' })">
    <ion-icon name="add" />
  </ion-fab-button>
</ion-fab>
Enter fullscreen mode Exit fullscreen mode

Vue由于我们在实例中添加了路由器，因此main.js我们可以在组件中使用 `.` 访问它$router。当用户点击按钮时，我们告诉路由器路由到新路径，该路径的名称new-item我们将在 `.` 中定义为命名路由main.js。
让我们回到`.`main.js并添加该路由。

添加新路线

将路由添加到路由器对象

{
  path: "/new-item",
  name: "new-item",
  component: () =>
    import(/* webpackChunkName: "new-item" */ "@/components/NewItemPage"),
}
Enter fullscreen mode Exit fullscreen mode

添加与路由关联的页面

新页面将沿用其他页面的标题、工具栏内容结构，但我们需要处理后退按钮功能。

让我们创建一个名为 `<component_name>` 的新组件NewItemPage.vue，并将其添加到components路径中。
将以下代码添加到文件中。

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

<script>
export default {
  name: "NewItemPage",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Enter fullscreen mode Exit fullscreen mode

根据我们目前所见，这个页面非常简单明了，只是还需要添加一个返回按钮，好在 Ionic 提供了相应的解决方案。

<ion-buttons slot="start">
  <ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
Enter fullscreen mode Exit fullscreen mode

这段代码会将按钮放置在页眉中，并处理相应的导航，无需任何额外的代码。

构建原生应用

以下概述摘自 Ionic 官方文档：请参阅文档

现在我们已经掌握了 Ionic React 应用的基础知识，包括一些 UI 组件和导航。Ionic 组件的优势在于它们可以在任何平台上运行，包括 iOS、Android 和 PWA。为了部署到移动设备、桌面设备以及其他平台，我们使用 Ionic 的跨平台应用运行时 Capacitor。它提供了一套一致的、面向 Web 的 API，使应用能够尽可能地遵循 Web 标准，同时在支持的平台上访问丰富的原生设备功能。

安装电容器

如需了解更多详细信息，请按照此处提供的说明进行操作。

npm install --save @capacitor/core @capacitor/cli
Enter fullscreen mode Exit fullscreen mode

build使用 VueJS 时，您可以在初始化应用程序时设置Web 资源目录。

npx cap init --web-dir=dist
Enter fullscreen mode Exit fullscreen mode

否则，请更新文件中的 Web 资源目录capacitor.config.json，使其包含以下内容。"webDir": "dist"

接下来，系统会提示您回答一些关于您应用的问题；例如：

npx cap init --web-dir=build
? App name myAppCap
? App Package ID (in Java package format, no dashes) com.aks.mycapapp
✔ Initializing Capacitor project in /Users/aaronksaunders/dev/projects/vuejs/my-app in 23.41ms


🎉   Your Capacitor project is ready to go!  🎉

Add platforms using "npx cap add":

  npx cap add android
  npx cap add ios
  npx cap add electron

Follow the Developer Workflow guide to get building:
https://capacitor.ionicframework.com/docs/basics/workflow
Enter fullscreen mode Exit fullscreen mode

现在你需要构建生产环境的应用程序，以便将其打包部署。

yarn run build
Enter fullscreen mode Exit fullscreen mode

此时我遇到了版本问题，需要运行以下命令来更新core-js库。npm install --save core-js

然后运行相应的命令添加您的平台

  • 现在你可以运行npx cap add ios添加 iOS 了
  • 现在你可以运行npx cap add android添加安卓应用了。

然后启动应用程序

  • 现在你可以运行程序npx cap open ios启动 Xcode 了。
  • 现在你可以运行程序npx cap open android启动 Android Studio 了

为解决新款 iPhone 的安全区域/刘海屏问题，请按以下步骤修改项目目录index.html中的文件：public

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no , viewport-fit=cover"
/>
Enter fullscreen mode Exit fullscreen mode

App.vue最后，文件中还需要一些 CSS 代码。

<style>
    ion-navbar.toolbar.toolbar-ios.statusbar-padding,
    ion-navbar.toolbar-ios ion-title.title-ios,
    ion-toolbar.toolbar.toolbar-ios.statusbar-padding,
    ion-toolbar.toolbar-ios ion-title.title-ios {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
    }
</style>
Enter fullscreen mode Exit fullscreen mode

要推送应用更新，您可以运行以下命令。

  • yarn run build; npx cap sync

项目源代码

GitHub 标志 aaronksaunders /我的第一个ionic应用vue

你的第一个 Ionic 应用：Vue - 尝试用 Vue 模仿 Ionic 网站上的 React JS 文档

在 GitHub 上查看

关于 Vue 和 Vue Composition API 的视频播放列表

关于清晰创新

Clearly Innovative是一家专注于开发数字产品的解决方案提供商。我们将创意转化为可行的产品，并将客户需求转化为更先进的技术解决方案。作为前沿技术早期采用和实施的领导者，Clearly Innovative 提供专注于产品战略、用户体验、设计和开发的服务。首席执行官 Aaron Saunders 表示：“我们不仅是设计师和开发人员，更是端到端的数字解决方案提供商。” Clearly Innovative 创建了技术教育项目 Clearly Innovative Education，其使命是创造一个让来自弱势背景的人们也能作为创造者、创新者和企业家参与数字世界的世界。

#未来由代码书写

作为包容性创新孵化器的一部分，“未来由代码书写”系列课程提供入门和高级编程课程，以及专注于商业和创业的编码课程。精选课程包括：编码、用户界面/用户体验设计、编码与商业、编码与创业、商业拓展、创业：将您的想法转化为应用程序等等。请联系info@in3dc.com了解更多信息！

文章来源：https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj
如何使用 React 构建营销仪表...
前端 API 连接的最佳方式 DE...