Ionic是一个广为人知的桥接app开发方案,它丰富的组件以及完善的文档,对于快速开发app是一种好的选择。然而不同的人使用的技术栈不一样,Ionic组件已经可以和Vue集成,对于使用Vue开发移动端应用的同学来说,多了一种选择。
github地址
本篇主要参照Youtube视频: https://www.youtube.com/watch?v=6H1wftPS0oo
1,创建Vue工程,添加相关依赖
vue create ionic-vue-test
在弹出的preset选择中,选择 `default (babel, eslint)
创建成功之后,进入到ionic-vue-test工作路径中,安装@ionic/vue,并且添加router
npm i --save @ionic/vue
vue add router
如果没有安装@vue/cli,请全局安装
npm i -g @vue/cli
2,打开项目,进行文件改造
使用vscode打开ionic-vue-test路径,打开main.js文件,改造为
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
对于router,使用基于VueRouter的IonicVueRouter,改造router.js
import Vue from 'vue'
import { IonicVueRouter } from '@ionic/vue'
import Home from './views/Home.vue'
Vue.use(IonicVueRouter)
export default new IonicVueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
]
})
相应的,去掉App.vue中的内容,使用包装,代表ionic应用的入口
现在即可以放心的使用Ionic中的组件啦。在Home.vue中,删除原来的内容,改造为
Hello Ionic Vue
presentActionSheet
Card Subtitle
Card Title
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
export default {
name: 'home',
methods: {
presentActionSheet() {
return this.$ionic.actionSheetController
.create({
header: 'Albums',
buttons: [
{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked')
},
},
{
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked')
},
},
{
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked')
},
},
{
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked')
},
},
{
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
},
},
],
})
.then(a => a.present());
}
}
}
如果出现页面空白,且命令行中报错:
"export 'ICON_PATHS' was not found in 'ionicons/icons'
npm install ionicons@4.5.9-1 --save-dev
执行效果贴图
result.png
欢迎留言讨论!