标签：java abs string 就是 20px 相对 icons transform history
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>
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文档。
祝构建应用程式愉快！ ??
标签：java abs string 就是 20px 相对 icons transform history
原文地址：https://www.cnblogs.com/johnjackson/p/13860765.html
