一、创建项目

1、使用Vue CLi搭建Vue项目

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

创建成功之后通过命令启动项目：

npm run serve

具体创建方式及相关配置参照文章vue cli 3.x搭建项目
2、然后添加Ionic框架

npm install @ionic/vue

3、引用Ionic框架至项目中。打开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>

最后就可以启动项目在web端进行查看。

二、将vue项目编译成Ionic项目

1、执行如下命令：

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

执行如下命令初始化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。因为vue项目的构建目录为dist，这样我们就不用去复制代码到 www 目录（而且也没有创建 www 目录）。

"webDir": "dist"

4、构建项目

npm run build

三、IOS与Android运行项目

待开发测试，目前仍存在问题