Ionic vue 初探

Ionic是一个广为人知的桥接app开发方案，它丰富的组件以及完善的文档，对于快速开发app是一种好的选择。然而不同的人使用的技术栈不一样，Ionic组件已经可以和Vue集成，对于使用Vue开发移动端应用的同学来说，多了一种选择。

本篇主要参照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中的内容，使用<ion-app>包装，<ion-app>代表ionic应用的入口

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

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

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello Ionic Vue</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
          <ion-button color="primary" @click="presentActionSheet" expand="block">presentActionSheet</ion-button>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
          <ion-card-title>Card Title</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          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.
        </ion-card-content>
      </ion-card>
    </ion-content>
  </div>
</template>

<script>
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());
    }
  }
}
</script>

如果出现页面空白，且命令行中报错：

"export 'ICON_PATHS' was not found in 'ionicons/icons'

那么，请手动添加依赖

npm install ionicons@4.5.9-1 --save-dev

执行效果贴图

result.png

欢迎留言讨论!