Vue+Ionic4,知虎偏行(二)创建及配置项目
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+Ionic4,知虎偏行(二)创建及配置项目相关的知识,希望对你有一定的参考价值。
参考技术A一般Ionic项目创建可以使用ionic-cli命令,即:
然而查看该命令说明和源码是没有Vue的项目模版的(见 STARTER_TEMPLATES中的projectType )。
所以使用Vue来创建项目:
这是Vue很基础的东西,安装依赖并运行看下:
此时可以看到项目能正常运行的,一般来说,应用都需要和路由打交道,所以添加下路由:
对Ionic集成,安装ionic相关依赖(其中@ionic/core是组件部分,@ionic/vue是封装成Vue方式调用的接口部分):
安装完成后,在main.js中添加配置:
再次运行,发现命令行会有告警提示:
同时页面也会报错,显示空白页面,这是一个BUG(前期的版本是没有这个BUG的),我们需要安装ionicons,而且它对版本有要求,要在V4.5.10以下,所以执行:
此时再次运行,没有告警也没有错误提示,但是还是空白页面,调试页面发现有这样一个样式:
我也不知道这是干嘛用的,改了再说:
此时页面看到有东西了, 那我们尝试下ionic的组件能不能用 ,在Home.vue页面添加一个按钮:
可以看到组件渲染出来了,为了和ionic的dom结构保持一致,把App.vue稍微改动一下,变为如下:
我们再试试看事件能不能响应,页面稍微改一下:
运行,发现能正常使用的。
为了支持Ionic的路由和使用其动画和样式,@ionic/vue里在vue-router的基础上做了封装,所以处理一下,打开router.js,修改一下(把Router替换为IonicVueRouter即可):
此时看到路由也是正常使用的。
众所周知,Ionic默认是使用android/md(Material Design)模式的,如果想使用ios模式,在<html>上添加mode="ios",即:
index.html添加meta项:
至此,基本项目配置就完成了,后续再谈论更多细节。
ionic vue
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,从而我们可以将新路由压入导航堆栈。对于当前的Io??nFabButton,我们可以添加一个点击处理程序,只需调用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。在应用程序中使用时有几个方式。
<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。
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>
构建原生App
ionic integrations enable capacitor
ionic build
ionic cap add ios
ionic cap add android
ionic cap open ios
ionic cap open android
<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文档。
祝构建应用程式愉快! ??
以上是关于Vue+Ionic4,知虎偏行(二)创建及配置项目的主要内容,如果未能解决你的问题,请参考以下文章