搜索文档 /

betway东盟体育app离子Vue快速入门

内容

什么是离子型框架betway东盟体育app?

首先,如果你是新来的,欢迎!betway东盟体育appIonic Framework是一个免费的开源组件库,用于构建运行在iOS、Android、Electron和Web上的应用程序。使用熟悉的技术(HTML、CSS、JavaScript)编写应用,然后部署到任何平台上。必威betway官方

除了UI组件,Ionic Framework还提供了一个命令betway东盟体育app行工具,用于创建新的应用程序,以及部署到我们支持的各种平台上。

在本指南中,我们将介绍Vue和Ionic框架的基础知识,包括任何Ionic框架的特定特性。betway东盟体育app如果您熟悉Vue,请欣赏本指南并了解一些关于Ionic Framework的新知识。betway东盟体育app如果你对这两个都不熟悉,不用担心!本指南将涵盖基础知识,并提供足够的信息来启动和运行一个应用程序。

使用Ionic CLI创建一个项目betway东盟体育app

首先,让我们安装最新版本的Ionic CLI。betway东盟体育app


              npm
             
              安装
             - g betway东盟体育app@ionic / cli@latest

从这里,全局指挥 betway东盟体育app 将允许创建一个带有Ionic Framework和任何其他依赖项的Vue项目。betway东盟体育app运行以下命令创建一个新项目:


             betway东盟体育app离子型启动myApp空白——输入vue
              cd
             myApp

从这里,我们跑 betway东盟体育app离子服务 让我们的项目在浏览器中运行。

用TypeScript或JavaScript构建自己的方式

我们爱TypeScript在Ionic,并相betway东盟体育app信它是一个伟大的工具,用于构建可扩展的应用程序。也就是说,我们知道Vue社区非常重视简单性—在他们的工具、语言等方面。事实上,这很可能是最初吸引你来到Vue的原因。从简单开始,然后根据需要扩大规模。

所以,如果你更喜欢使用JavaScript而不是TypeScript,你可以。在生成一个Ionic Vue应用程序后,betway东盟体育app遵循以下步骤:

  1. 删除打印稿依赖性:

              npm
             卸载——保存typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
  1. 改变所有 .ts 文件 . js .在空白的爱奥尼亚Vuebetway东盟体育app应用程序中,这应该只 路由器/ index.ts 而且 main.ts

  2. 删除 @vue /打印稿/建议 而且 @typescript-eslint / no-explicit-any:“关闭”, .eslintrc.js

  3. 删除 数组< RouteRecordRaw > 路由器/ index.js

  4. 删除 shims-vue.d.ts 文件。

  5. 删除 lang = " t " 脚本 标记在任何具有它们的Vue组件中。在空白的爱奥尼亚Vuebetway东盟体育app应用程序中,这应该只 App.vue 而且 视图/ Home.vue

Vue组件的外观

我们的应用程序的基础将在 src 目录,主要入口点是我们的 main.ts 文件。如果我们在代码编辑器中打开项目并打开 main.ts ,我们应该看到以下内容:


              进口
             
              
             createApp
              
             
              
             
              “vue”
              
             
              进口
             
              
             betway东盟体育appIonicVue
              
             
              
             
              “@betway东盟体育appionic / vue”
              
             
              进口
             应用程序
              
             
              ”。/ App.vue '
             
              进口
             路由器
              
             
              ”。/路由器的
              
             
              常量
             应用程序
              
             
              createApp
              
             应用程序
              
             
              
              使用
              
             betway东盟体育appIonicVue
              
             
              
              使用
              
             路由器
              
              
             路由器
              
              isReady
              
              
              
              然后
              
              
              
             
              = >
             
              
             应用程序
              
              
              
              “#应用”
              
              
             
              
              
              

那么这是怎么回事呢?前四行引入了一些依赖项。的 createApp 函数让我们初始化Vue应用程序,而 betway东盟体育appIonicVue 是一个插件,允许我们在Vue环境中使用Ionic Frameworkbetway东盟体育app。

第三个导入是应用程序的根组件,名称很简单 应用程序 .这是我们的第一个Vue组件,将在Vue应用程序的引导过程中使用。

第四个导入得到我们的路由配置。我们将在后面更深入地讨论这个问题。

如果我们开放 App.vue 我们应该看到以下几点:


                <
               模板
               >
             
                <
               ion-app
               >
             
                <
               ion-router-outlet
              
               />
             
                
               ion-app
               >
             
                
               模板
               >
             
                <
               脚本
              
               
                
                
               ts
                
               >
               
                进口
               
                
               IonApp
                
               IonRouterOutlet
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “应用程序”
                
               组件
                
               
                
               IonApp
                
               IonRouterOutlet
                
               
                
                
                
               
                
               脚本
               >

让我们分析一下,从第一组导入开始。


              进口
             
              
             IonApp
              
             IonRouterOutlet
              
             
              
             
              “@betway东盟体育appionic / vue”
              

要在Vue中使用组件,必须首先导入它。所以对于Ionbetway东盟体育appic Framework,这意味着无论何时我们想要使用一个按钮或卡片,它都必须添加到我们的导入。在我们的例子中 应用程序 组件,我们正在使用 IonApp 而且 IonRouterOutlet .如果发现重复导入相同的组件,还可以全局注册组件。这涉及到性能上的权衡<一个href="#optimizing-your-app" c-id="168.537.5.7"> 优化你的应用

从这里开始,让我们看看模板。


                <
               模板
               >
             
                <
               ion-app
               >
             
                <
               ion-router-outlet
              
               />
             
                
               ion-app
               >
             
                
               模板
               >

所有Vue组件必须具有 <模板> .在里面,我们放 IonApp 而且 IonRouterOutlet 组件。

最后,让我们看看组件的定义:


              进口
             
              
             IonApp
              
             IonRouterOutlet
              
             
              
             
              “@betway东盟体育appionic / vue”
              
             
              进口
             
              
             defineComponent
              
             
              
             
              “vue”
              
             
              出口
             
              默认的
             
              defineComponent
              
              
             的名字
              
             
              “应用程序”
              
             组件
              
             
              
             IonApp
              
             IonRouterOutlet
              
             
              
              
              

Vue 3提供了一种新的 defineComponent 函数来创建组件以改进工具支持,我们将在这里使用它。我们首先定义组件的名称,然后提供将在模板中使用的组件。

这里有几个你可以提供的论点,比如 方法 设置 和更多。这是Vue的一部分<一个href="https://v3.vuejs.org/guide/composition-api-introduction.html" c-id="168.701.5.5"> 构成API文档

路由器初始化

betway东盟体育app爱奥尼亚Vue使用<一个href="https://router.vuejs.org/" c-id="168.713.5.1"> vue-router因此,如果您已经熟悉Vue路由器,您将能够将您所知道的应用到ionvue导航。betway东盟体育app让我们看看之前提到的路由器配置。在 路由器/ index.ts ,你应该会看到类似以下内容:


              进口
             
              
             createRouter
              
             createWebHistory
              
             
              
             
              “@betway东盟体育appionic / vue-router”
              
             
              进口
             
              
             RouteRecordRaw
              
             
              
             
              “vue-router”
              
             
              进口
             首页
              
             
              “@ /视图/ Home.vue”
             
              常量
             路线
              
             
              数组
              <
             RouteRecordRaw
              >
             
              
             
              
             
              
             路径
              
             
              ' / '
              
             重定向
              
             
              “/ home”
             
              
              
             
              
             路径
              
             
              “/ home”
              
             的名字
              
             
              “回家”
              
             组件
              
             首页
              
             
              
             
              常量
             路由器
              
             
              createRouter
              
              
             历史
              
             
              createWebHistory
              
             过程
              
             env
              
              BASE_URL
              
              
             路线
              
              
             
              出口
             
              默认的
             路由器

本例使用的是Ionic Vue Blank启动程序,betway东盟体育app因此您的实际路线可能看起来有点不同。

这里的设置和你用的是一样的 vue-router 直接,但是您需要导入依赖项,例如 createRouter 而且 createWebHistory @betway东盟体育appionic / vue-router 包中。

导入依赖项之后,我们可以在 路线 数组中。从那里,我们可以创建一个路由器实例,并向它提供我们的路由和我们想要使用的历史类型。

在爱奥尼亚betway东盟体育appVue上,惰性加载可以开箱即用。而不是导入我们的 首页 组件,我们还可以这样做:


              常量
             路线
              
             
              数组
              <
             RouteRecordRaw
              >
             
              
             
              
             
              
             路径
              
             
              ' / '
              
             重定向
              
             
              “/ home”
             
              
              
             
              
             路径
              
             
              “/ home”
              
             的名字
              
             
              “回家”
              
             
              组件
              
             
              
              
             
              = >
             
              进口
              
              “@ /视图/ Home.vue”
              
             
              
             
              

现在,你可能想知道:为什么我们用 @ 当描述到组件的路径时?的 @ 符号是一种快捷方式,我们可以用它来描述相对于 src 目录中。如果我们试图引用一个组件,而在一个文件中有好几个文件夹深,这是很有用的。而不是做 '../../../ 视图/ Home.vue ' ,我们可以简单地做 “@ /视图/ Home.vue”

具有样式的组件

现在, 应用程序 组件在这里实际上没有太多需要修改的地方。它是容器组件的一个基本示例。在设置了路由器逻辑之后,它所负责的就是呈现一个与给定URL路由匹配的组件。因为我们已经设置了一个组件/路由器,让我们继续修改我们的 首页 组件。

目前, 首页 组件看起来像这样:

Vue家里组件"c-id=


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               ion-header
              
               :半透明的
                
                
               真正的
                
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-title
               >
             空白
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               ion-header
               >
             
                <
               离子含量
              
               :全屏
                
                
               真正的
                
               >
             
                <
               ion-header
              
               崩溃
                
                
               浓缩
                
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-title
              
               大小
                
                
               
                
               >
             空白
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               ion-header
               >
             
                <
               div
              
               id
                
                
               容器
                
               >
             
                <
               强大的
               >
             准备好创建一个应用程序了吗?
                
               强大的
               >
             
                <
               p
               >
             从离子betway东盟体育app
                <
               一个
              
               目标
                
                
               平等自愿
                
              
               rel
                
                
               noopener noreferrer
                
              
               href
                
                
               https://betway东盟体育appwww.jesscamp.com/docs/components
                
               >
             UI组件
                
               一个
               >
                
               p
               >
             
                
               div
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
              
               
                
                
               ts
                
               >
               
                进口
               
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “回家”
                
               组件
                
               
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               
                
                
                
               
                
               脚本
               >
             
                <
               风格
              
               作用域
               >
               
                #容器
               
                
               
                text-align
                
               中心
                
               
                位置
                
               绝对
                
               
                
                
               0
                
               
                正确的
                
               0
                
               
                
                
               50%
                
               
                变换
                
               
                translateY
                
               -50%
                
                
               
                
               
                #容器强
               
                
               
                字体大小
                
               20 px
                
               
                行高
                
               26像素
                
               
                
               
                #容器p
               
                
               
                字体大小
                
               16 px
                
               
                行高
                
               22 px
                
               
                颜色
                
               # 8 c8c8c
                
               
                保证金
                
               0
                
               
                
               
                #容器
               
                
               
                文字修饰
                
               没有一个
                
               
                
               
                
               风格
               >

就像 应用程序 组件,我们有一些针对特定Ionic Framework组件的导入,一个来自Vue的导入,Vue组件,以及与我们的组件配套的betway东盟体育app样式。

对于样式,请注意我们已经将样式指定为 作用域 .这意味着我们在这里编写的样式只适用于这个组件。这有助于防止样式从组件中泄漏,从而影响应用程序的其他部分。我们强烈建议使用 作用域 离子型Vue应用的样式betway东盟体育app。

IonPage 是所有页面的基础组件(一个带有路由/URL的组件),包括全屏组件的一些常见构建块,如标题、标题和内容组件。

在创建自己的页面时,不要忘记拥有 IonPage 成为它们的根组件。有 IonPage 根组件很重要,因为它帮助确保过渡正常工作,并提供了离子框架组件所依赖的基本CSS。betway东盟体育app

IonHeader 是应该存在于页面顶部的组件。除了处理一些基于flexbox的布局外,它本身并没有做太多事情。它是用来存放组件的,比如 IonToolbar IonSearchbar

IonContent 如其名称所示,是我们页面的主要内容区域。它负责提供用户将与之交互的可滚动内容,以及可在应用程序中使用的任何滚动事件。

我们目前的内容相对简单,但不包含任何可以在真正的应用中使用的内容,所以让我们改变这一点。

注意:为了简洁起见,我们排除了组件的重复部分,比如来自其他组件的函数声明或导入语句。


                <
               模板
               >
             
                <
               ion-page
               >
             ...
                <
               离子含量
               >
             
                <
               ion-list
               >
             
                <
               ion-item
               >
             
                <
               ion-checkbox
              
               
                
                
               开始
                
               >
                
               ion-checkbox
               >
             
                <
               ion-label
               >
             
                <
               h1
               >
             创建的想法
                
               h1
               >
             
                <
               ion-note
               >
             用白兰地做创意
                
               ion-note
               >
             
                
               ion-label
               >
             
                <
               ion-badge
              
               颜色
                
                
               成功
                
              
               
                
                
               结束
                
               >
             5天
                
               ion-badge
               >
             
                
               ion-item
               >
             
                
               ion-list
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >

在我们 IonContent ,我们加一个 IonList 更复杂 IonItem 组件。让我们来看看 IonItem 因为它是这里的中心。


                <
               ion-item
               >
             
                <
               ion-checkbox
              
               
                
                
               开始
                
               >
                
               ion-checkbox
               >
             
                <
               ion-label
               >
             
                <
               h1
               >
             创建的想法
                
               h1
               >
             
                <
               ion-note
               >
             用白兰地做创意
                
               ion-note
               >
             
                
               ion-label
               >
             
                <
               ion-badge
              
               颜色
                
                
               成功
                
              
               
                
                
               结束
                
               >
             5天
                
               ion-badge
               >
             
                
               ion-item
               >

看看我们的代码,我们有一个叫做slot的特殊属性。这是让 IonItem 知道在哪里放置 IonCheckbox 当它呈现。这不是一个Vue API,而是一个web标准API。此外,这与Vue 2中的插槽API不同。

让我们看看Ionic Framework的另一个组件FAB。betway东盟体育app浮动动作按钮是一种很好的方式来提供一个从应用程序的其他部分上升的主要动作。对于这个FAB,我们需要三个组件:FAB、FAB按钮和图标。


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               ion-list
               >
             ...
                
               ion-list
               >
             
                <
               ion-fab
              
               垂直
                
                
               
                
              
               水平
                
                
               结束
                
              
               
                
                
               固定
                
               >
             
                <
               ion-fab-button
               >
             
                <
               ion-icon
              
               :图标
                
                
               添加
                
               >
                
               ion-icon
               >
             
                
               ion-fab-button
               >
             
                
               ion-fab
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               添加
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                ...
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “回家”
                
               
                ...
                
               
                设置
                
                
               
                
               
                返回
               
                
               添加
                
               
                
               
                
                
               
                
               脚本
               >

在我们的主要 IonFab ,我们用垂直和水平属性设置它的位置。我们还通过slot属性将渲染位置设置为“fixed”。这将告诉 IonFab 渲染可滚动内容的外部 IonContent

现在让我们连接一个点击处理程序到这个。当单击FAB按钮时,我们希望导航到一个新页面(我们将在稍后创建它)。为此,我们需要访问Vue Router的导航API。这可以通过导入来实现 useRouter vue-router 包中。


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               ion-list
               >
             ...
                
               ion-list
               >
             
                <
               ion-fab
              
               垂直
                
                
               
                
              
               水平
                
                
               结束
                
              
               
                
                
               固定
                
               >
             
                <
               ion-fab-button
              
               @click
                
                
               () = > router.push(' /新')
                
               >
             
                <
               ion-icon
              
               :图标
                
                
               添加
                
               >
                
               ion-icon
               >
             
                
               ion-fab-button
               >
             
                
               ion-fab
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               添加
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                进口
               
                
               useRouter
                
               
                
               
                “vue-router”
                
               
                ...
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “回家”
                
               组件
                
               
                
               IonContent
                
               IonFab
                
               IonFabButton
                
               IonHeader
                
               betway东盟体育appIonIcon
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
                
               
                设置
                
                
               
                
               
                返回
               
                
               路由器
                
               
                useRouter
                
                
                
               添加
                
               
                
               
                
                
                
               
                
               脚本
               >

在组件文件中,我们正在导入 useRouter 函数。调用此函数时,将路由器依赖注入到组件中。它允许我们从Vue Router访问历史API,允许我们将一个新路由推入导航堆栈。在我们的 IonFabButton ,我们可以添加一个点击处理程序,并调用 router.push 然后通过新的路线。在本例中,我们将导航到


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

新建路由

现在我们已经准备好了在应用程序中导航的部件,我们需要创建一个新组件,并将新路由添加到路由器声明中。让我们打开 路由器/ index.ts 归档并添加新的路由。


              进口
             
              
             createRouter
              
             createWebHistory
              
             
              
             
              “@betway东盟体育appionic / vue-router”
              
             
              进口
             
              
             RouteRecordRaw
              
             
              
             
              “vue-router”
              
             
              进口
             首页
              
             
              “@ /视图/ Home.vue”
             
              进口
             NewItem
              
             
              “@ /视图/ NewItem.vue”
              
             
              常量
             路线
              
             
              数组
              <
             RouteRecordRaw
              >
             
              
             
              
             
              
             路径
              
             
              ' / '
              
             重定向
              
             
              “/ home”
             
              
              
             
              
             路径
              
             
              “/ home”
              
             的名字
              
             
              “回家”
              
             组件
              
             首页
              
              
             
              
             路径
              
             
              ' /新'
              
             的名字
              
             
              “NewItem”
              
             组件
              
             NewItem
              
             
              
             
              常量
             路由器
              
             
              createRouter
              
              
             历史
              
             
              createWebHistory
              
             过程
              
             env
              
              BASE_URL
              
              
             路线
              
              
             
              出口
             
              默认的
             路由器

现在我们的路由器有了路由的入口 /新 ,我们将创建所需的组件, NewItem .它会存在于 视图/ NewItem.vue

让我们填 NewItem.vue 文件中暂时包含一些占位符内容。


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               ion-header
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-buttons
              
               
                
                
               开始
                
               >
             
                <
               ion-back-button
               >
                
               ion-back-button
               >
             
                
               ion-buttons
               >
             
                <
               ion-title
               >
             新项目
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               ion-header
               >
             
                <
               离子含量
               >
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               IonBackButton
                
               IonButtons
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “NewItem”
                
               组件
                
               
                
               IonBackButton
                
               IonButtons
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               
                
                
                
               
                
               脚本
               >

每个视图必须包含 IonPage 组件。没有它,页面转换将无法正常工作。看到<一个href="//www.jesscamp.com/docs/vue/navigation" c-id="168.3208.6.3"> IonPage文档为更多的信息。

这里的内容应该类似于 首页 组件。这里有什么不同 IonBackButton 组件。这是用来导航回上一个路线。看起来很简单,对吧?好的,但是如果我们重新加载页面呢?

在本例中,内存中的历史记录丢失,因此后退按钮消失。要解决这个问题,我们可以设置 default-href 属性值为我们想要导航到的URL,如果没有历史记录。


                <
               ion-back-button
              
               default-href
                
                
               /家庭
                
               >
                
               ion-back-button
               >

现在,如果没有应用程序历史记录,我们将能够导航回我们的主路线。

对组件的调用方法

为了在任何Ionic Vue组件上调用方法,您首先需要获得对组件实例的引用。betway东盟体育app接下来,您需要使用 el美元 并调用该方法。

在其他框架集成中,如Ionic React,这是不需要的betway东盟体育app 裁判 会自动转发到底层Web组件实例。由于Vue管理裁判的方式有限,我们无法在这里做同样的事情。


                <
               模板
               >
             
                <
               离子含量
              
               裁判
                
                
               内容
                
               >
             
                <
               ion-button
              
               @click
                
                
               scrollToBottom
                
               >
             滚动到下
                
               ion-button
               >
             ...
                
               离子含量
               >
             
                
               模板
               >
             
                <
               脚本
              
               
                
                
               ts
                
               >
               
                进口
               
                
               IonButton
                
               IonContent
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               裁判
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               IonButton
                
               IonContent
                
                
               
                设置
                
                
               
                
               
                常量
               内容
                
               
                裁判
                
                
                
               
                常量
               
                scrollToBottom
               
                
               
                
                
               
                = >
               
                
               内容
                
               价值
                
               el美元
                
                scrollToBottom
                
                300
                
                
               
                
               
                返回
               
                
               内容
                
               scrollToBottom
                
               
                
               
                
                
                
               
                
               脚本
               >

添加图标

betway东盟体育app爱奥尼亚Vue自带<一个href="https://ionic.io/ionicons/" c-id="168.3548.5.1"> betway东盟体育appIonicons预装。开发人员在应用程序中使用它们有几种选择。

动态的进口

动态导入是使用ionicon的推荐方法。betway东盟体育app方法导入所选的图标 betway东盟体育appionicons 打包并传递给你的模板:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               ion-icon
              
               :图标
                
                
               
                
               >
                
               ion-icon
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                进口
               
                
               IonContent
                
               IonPage
                
               
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “图标”
                
               组件
                
               
                
               IonContent
                
               IonPage
                
               
                
                
               
                设置
                
                
               
                
               
                返回
               
                
               
                
               
                
               
                
                
                
               
                
               脚本
               >

让我们分析一下我们正在做的事情。首先,我们正在进口 图标从 betway东盟体育appionicons /图标 .这将为我们的图标加载适当的SVG数据。

接下来,我们传递 的模板中的数据 设置 方法。

最后,我们将图标数据传递到 ion-icon 组件通过 图标 财产。

开发者也可以根据模式设置不同的图标:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               ion-icon
              
               : ios
                
                
               logoApple
                
              
               :医学博士
                
                
               logoAndroid
                
               >
                
               ion-icon
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               logoAndroid
                
               logoApple
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                进口
               
                
               IonContent
                
               IonPage
                
               
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “图标”
                
               组件
                
               
                
               IonContent
                
               IonPage
                
               
                
                
               
                设置
                
                
               
                
               
                返回
               
                
               logoAndroid
                
               logoApple
                
               
                
               
                
                
                
               
                
               脚本
               >

注意,在导入时,任何带连字符的图标名称都应该写成驼峰格式。

全球进口

另一种选择是全局导入特定的图标。通常不建议这样做,因为它会迫使每次应用程序启动时都加载图标,并且会增加应用程序的初始块大小。

也就是说,在某些情况下,全局加载特定的图标是有意义的:

main.ts


              进口
             
              
             addIcons
              
             
              
             
              “betway东盟体育appionicons”
              
             
              进口
             
              
             
              
             
              
             
              “betway东盟体育appionicons /图标”
              
             
              addIcons
              
              
             
              “心”
              
             
              
              
              

Home.vue


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               ion-icon
              
               图标
                
                
               
                
               >
                
               ion-icon
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               IonContent
                
               IonPage
                
               
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “回家”
                
               组件
                
               
                
               IonContent
                
               IonPage
                
               
                
               
                
                
                
               
                
               脚本
               >

main.ts , addIcons 函数允许我们全局注册图标,并给它一个字符串作为键。然后通过我们的 首页 组件。

优化您的构建

Vue提供了一些工具来优化应用程序。本节将介绍与Ionic Framework最相关的选项。betway东盟体育app

默认情况下,Ionic betway东盟体育appFramework组件在本地注册。通过本地注册,这些组件将被导入并提供给您想要在其中使用它们的每个Vue组件。这是推荐的方法,因为它允许延迟加载和摇树在Ionic Framework组件中正常工作。betway东盟体育app

这种方法的一个缺点是,多次重新导入您的Ionic Framework组件可能非常繁琐。betway东盟体育app但是,我们认为您由此获得的性能优势是值得的。

还要注意,本地注册的组件在子组件中不可用。您需要重新导入想要在子组件中使用的Ionic Frameworbetway东盟体育appk组件。

让我们来看看本地组件注册是如何工作的:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               子组件
               >
                
               子组件
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
              
               
                
                
               ts
                
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               
                
               IonContent
                
               IonPage
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               子组件
                
               
                “@ /组件/ Subcomponent.vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               IonContent
                
               IonPage
                
               子组件
                
               
                
                
                
               
                
               脚本
               >

在上面的例子中,我们使用 IonPage 而且 IonContent 组件。要使用它们,我们首先从 @betway东盟体育appionic / vue .然后,将它们提供给Vue组件 组件 选择。从那里,我们可以使用模板中的组件。

注意,由于我们是在本地注册这些组件,所以两者都不能 IonPage 也不 IonContent 将于 子组件 除非我们也在那里登记。

有关更多信息,请参见<一个href="https://v3.vuejs.org/guide/component-registration.html" target="_blank" rel="noopener noreferrer" c-id="168.4562.5.1"> 本地注册Vue文档

全球组件注册

注册组件的另一种选择是使用全局注册。全局注册涉及到导入要在其中使用的组件 main.ts 和调用 组件 方法。

虽然这使得将Ionic Framework组件添加到Vue应用程序更betway东盟体育app容易,但全局注册通常并不理想。引用Vue文档:“如果您正在使用Webpack这样的构建系统,全局注册所有组件意味着即使您停止使用某个组件,它仍然可以包含在最终的构建中。这不必要地增加了用户需要下载的JavaScript数量。”

让我们来看看全局组件注册是如何工作的:

main.ts


              进口
             
              
             IonContent
              
             betway东盟体育appIonicVue
              
             IonPage
              
             
              
             
              “@betway东盟体育appionic / vue”
              
             
              常量
             应用程序
              
             
              createApp
              
             应用程序
              
             
              
              使用
              
             betway东盟体育appIonicVue
              
             
              
              使用
              
             路由器
              
              
             应用程序
              
              组件
              
              离子含量的
              
             IonContent
              
              
             应用程序
              
              组件
              
              “ion-page”
              
             IonPage
              
              

MyComponent.vue


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               子组件
               >
                
               子组件
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
              
               
                
                
               ts
                
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               子组件
                
               
                “@ /组件/ Subcomponent.vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               子组件
                
               
                
                
                
               
                
               脚本
               >

在上面的例子中,我们使用 IonPage 而且 IonContent 组件。要使用它们,我们首先从 @betway东盟体育appionic / vue main.ts .从那里,我们调用 组件 方法,并将标记名和组件定义传递给它。之后,我们可以在应用程序的其余部分中使用这些组件,而不必将它们导入每个Vue组件。

有关更多信息,请参见<一个href="https://v3.vuejs.org/guide/component-registration.html" target="_blank" rel="noopener noreferrer" c-id="168.4865.5.1"> 全局注册Vue文档

预取JavaScript应用程序

默认情况下,Vue CLI会自动为应用程序中的JavaScript生成预取提示。预取利用浏览器空闲时间来下载用户可能在不久的将来访问的文档。当用户访问需要预取文档的页面时,它可以从浏览器的缓存中快速提供。

预取会消耗带宽,所以如果你有一个大的应用程序,你可能想要禁用它。您可以通过修改或创建 vue.config.js 文件:

vue.config.js


             模块
              
             出口
              
             
              
             
              chainWebpack
              
             
              配置
             
              = >
             
              
             配置
              
             插件
              
              删除
              
              “预取”
              
             
              
             
              

上面的配置将防止所有文件被预取,而是在需要时加载它们。您也可以选择特定的块进行预取。检查<一个href="https://cli.vuejs.org/guide/html-and-static-assets.html" target="_blank" rel="noopener noreferrer" c-id="168.4939.5.1"> 关于预取的Vue CLI文档更多的例子。

创建原生应用

我们现在已经具备了Ionic Vue应用程序的基础,包括一betway东盟体育app些UI组件和导航。Ionic Framework组件的伟大之处betway东盟体育app在于,它们可以在任何地方工作,包括iOS、Android和PWAs。为了部署到手机、桌面等平台,我们使用了Ionic的跨平台应用运行时betway东盟体育app<一个href="https://capacitor.www.jesscamp.com" c-id="168.4951.5.1"> 电容器.它提供了一致的、以web为中心的api集,使应用程序尽可能接近web标准,同时在支持这些标准的平台上访问丰富的本地设备功能。

添加本机功能很容易。首先,将电容器添加到您的项目:


             betway东盟体育app离子的集成
              启用
             电容器

接下来,构建项目,然后添加您选择的平台:


             betway东盟体育app离子建造离子帽
              添加
             ios离betway东盟体育app子帽
              添加
             安卓

我们使用标准的本地ide (Xcode和Android Studio)来打开、构建和运行iOS和Android项目:


             betway东盟体育app离子帽
              开放
             ios离betway东盟体育app子帽
              开放
             安卓

可以找到更多的细节<一个href="https://capacitor.www.jesscamp.com/docs/getting-started/with-ionic" c-id="168.5002.5.1"> 在这里

接下来,看看<一个href="https://capacitor.www.jesscamp.com/docs/apis" c-id="168.5008.5.1"> 所有的api这是可用的。有一些很棒的功能,包括<一个href="https://capacitor.www.jesscamp.com/docs/apis/camera" c-id="168.5011.5.3"> 摄像头API.我们可以在几行代码中实现照片捕获功能:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               ion-header
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-title
               >
             betway东盟体育app离子空白
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               ion-header
               >
             
                <
               离子含量
              
               
                
                
               ion-padding
                
               >
             
                <
               img
              
               : src
                
                
               照片
                
              
               />
             
                <
               ion-button
              
               @click
                
                
               takePhoto ()
                
               >
             拍照
                
               ion-button
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
              
               
                
                
               ts
                
               >
               
                进口
               
                
               IonButton
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               defineComponent
                
               裁判
                
               
                
               
                “vue”
                
               
                进口
               
                
               插件
                
               CameraResultType
                
               
                
               
                “@capacitor /核心”
                
               
                常量
               
                
               相机
                
               
                
               插件
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               的名字
                
               
                “回家”
                
               组件
                
               
                
               IonButton
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
                
               
                设置
                
                
               
                
               
                常量
               imageSrc
                
               
                裁判
                
                
                
                
               
                常量
               
                takePhoto
               
                
               
                异步
               
                
                
               
                = >
               
                
               
                常量
               图像
                
               
                等待
               相机
                
                getPhoto
                
                
               质量
                
               
                90
                
               allowEditing
                
               
                真正的
                
               resultType
                
               CameraResultType
                
               Uri
                
                
                
               imageSrc
                
               价值
                
               图像
                
               webPath
                
               
                
               
                返回
               
                
               照片
                
               imageSrc
                
               takePhoto
                
               
                
               
                
                
               
                
               脚本
               >

何去何从

本指南涵盖了创建Ionic Vue应用程序的基础知识,添加一些基本导航,并引入电容作为构建betway东盟体育app本机应用程序的一种方式。要更深入地使用Vue和电容构建完整的Ionic Framework应用程序,betway东盟体育app请关注我们的 首先应用指南

想要更详细地了解Ionic Frameworks的组件,betway东盟体育app请查看<一个href="https://betway东盟体育appwww.jesscamp.com/docs/components"c-id="168.5480.5.1"> 组件API页面.有关Vue的更多详细信息,请参阅<一个href="https://v3.vuejs.org/" c-id="168.5483.5.3"> Vue文档.要继续构建本机功能,请参阅<一个href="https://capacitor.www.jesscamp.com/docs/" c-id="168.5486.5.5"> 电容器文档

应用程序构建快乐!

以前的
概述
下一个
开发你的第一款应用
Baidu