Ionic是一個(gè)廣為人知的橋接app開(kāi)發(fā)方案，它豐富的組件以及完善的文檔，對(duì)于快速開(kāi)發(fā)app是一種好的選擇。然而不同的人使用的技術(shù)棧不一樣，Ionic組件已經(jīng)可以和Vue集成，對(duì)于使用Vue開(kāi)發(fā)移動(dòng)端應(yīng)用的同學(xué)來(lái)說(shuō)，多了一種選擇。
github地址
本篇主要參照Youtube視頻: https://www.youtube.com/watch?v=6H1wftPS0oo

1，創(chuàng)建Vue工程，添加相關(guān)依賴

vue create ionic-vue-test

在彈出的preset選擇中，選擇 `default (babel, eslint)

創(chuàng)建成功之后，進(jìn)入到ionic-vue-test工作路徑中，安裝@ionic/vue，并且添加router

npm i --save @ionic/vue
vue add router

如果沒(méi)有安裝@vue/cli，請(qǐng)全局安裝

npm i -g @vue/cli

2，打開(kāi)項(xiàng)目，進(jìn)行文件改造

使用vscode打開(kāi)ionic-vue-test路徑，打開(kāi)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')

對(duì)于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
    },
  ]
})

相應(yīng)的，去掉App.vue中的內(nèi)容，使用<ion-app>包裝，<ion-app>代表ionic應(yīng)用的入口

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

現(xiàn)在即可以放心的使用Ionic中的組件啦。在Home.vue中，刪除原來(lái)的內(nèi)容，改造為

<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>

如果出現(xiàn)頁(yè)面空白，且命令行中報(bào)錯(cuò)：

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

那么，請(qǐng)手動(dòng)添加依賴

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

執(zhí)行效果貼圖

result.png

歡迎留言討論!