Ionic vue 初探

Posted 2023-03-05

参考技术A

Ionic 是一个广为人知的桥接app开发方案，它丰富的组件以及完善的文档，对于快速开发app是一种好的选择。然而不同的人使用的技术栈不一样， Ionic 组件已经可以和 Vue 集成，对于使用 Vue 开发移动端应用的同学来说，多了一种选择。
github地址
本篇主要参照Youtube视频: https://www.youtube.com/watch?v=6H1wftPS0oo

在弹出的 preset 选择中，选择 `default (babel, eslint)

创建成功之后，进入到 ionic-vue-test 工作路径中，安装 @ionic/vue ，并且添加 router

使用 vscode 打开 ionic-vue-test 路径，打开 main.js 文件，改造为

对于 router ，使用基于 VueRouter 的 IonicVueRouter ，改造 router.js

相应的，去掉 App.vue 中的内容，使用 <ion-app> 包装， <ion-app> 代表 ionic 应用的入口

现在即可以放心的使用 Ionic 中的组件啦。在 Home.vue 中，删除原来的内容，改造为

执行效果贴图

欢迎留言讨论!