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中，删除原来的内容，改造为

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

欢迎留言讨论!