一、創(chuàng)建項(xiàng)目

1、使用Vue CLi搭建Vue項(xiàng)目

npm install -g @vue/cli
vue create ionic-vue-app
cd ionic-vue-app

創(chuàng)建成功之后通過命令啟動項(xiàng)目：

npm run serve

具體創(chuàng)建方式及相關(guān)配置參照文章vue cli 3.x搭建項(xiàng)目
2、然后添加Ionic框架

npm install @ionic/vue

3、引用Ionic框架至項(xiàng)目中。打開src/main.js，配置如下代碼：

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

4、修改src/router.js，配置代碼如下：

import Vue from 'vue'
import Home from './views/Home.vue'
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('./views/About.vue')
    }
  ]
})

5、然后使用Ionic組件，更改Home.vue代碼如下（這里以Ionic的ion-action-sheet為例）：

<template>
  <div class="home">
    <div class="ion-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic測試Demo</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <ion-vue-page :title="'Action Sheet'">
          <ion-button @click="presentActionSheet">展開底部操作表</ion-button>
        </ion-vue-page>
      </ion-content>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    presentActionSheet() {
      return this.$ionic.actionSheetController
        .create({
          header: "底部",
          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àng)目在web端進(jìn)行查看。

二、將vue項(xiàng)目編譯成Ionic項(xiàng)目

1、執(zhí)行如下命令：

ionic init

終端效果如下：

? Project name: custom
[WARN] Could not determine project type.
Please choose a project type from the list.
? Project type: 
@ionic/angular (angular) 
Ionic 2/3 (ionic-angular) 
Ionic 1 (ionic1) 
? custom (custom) 

Project type 選擇 custom (custom)
2、安裝capacitor

npm install --save @capacitor/core @capacitor/cli

執(zhí)行如下命令初始化capacitor：

npx cap init

? App name ionic-app
? App Package ID (in Java package format, no dashes) com.ionicApp.VH
? Which npm client would you like to use? npm

3、需要 capacitor.config.json 里的 webDir，改為 dist。因?yàn)関ue項(xiàng)目的構(gòu)建目錄為dist，這樣我們就不用去復(fù)制代碼到 www 目錄（而且也沒有創(chuàng)建 www 目錄）。

"webDir": "dist"

4、構(gòu)建項(xiàng)目

npm run build

三、IOS與Android運(yùn)行項(xiàng)目

待開發(fā)測試，目前仍存在問題