Ionic4.x+Vue+Capacitor开发APP框架搭建

目前网上已经有了很多关于这个技术栈搭建app框架的文章，所以这篇文章主要是自已记录基于Ionic4.x+Vue+Capacitor构建一个App框架搭建的过程。第一次写文章，文笔笨拙，还请见谅，不对之处，还请帮忙指出。

注：我这里用的是vscode开发工具进行开发

一、项目框架搭建：

** 1、**使用Vue Cli创建一个Vue项目（默认配置）：

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

2、启动项目，看看是否创建成功：

npm run serve

3、此时已经成功创建了一个vue项目，接下为项目添加 Vue Router 和 Ionic 框架

vue add router
npm install @ionic/vue

这里安装vue router 会让你选择是不是用history模式来创建路由推荐no

注：hash模式和history模式的不同

最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。

安装完成后，还需要引入到我们的项目中，这样就可以使用 Ionic 的组件了。

4、打开 src/main.js, 添加下面三行代码

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);

5、接下来修改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(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

服务启动中如遇到的问题：

执行：

npm i ionicons@4.5.9-1 -D

7、现在可以使用Ionic的组件了，如下修改Home.vue的代码。以 ion-action-sheet 为例，直接去官网复制示例代码：

<template>
  <IonVuePage :title="'Action Sheet'">
    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
  </IonVuePage>
</template>

<script>
export default {
  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>

服务重启控制台如遇到这个问题：

注：由于Ionic4.x是使用Web Component构建的，我们需要告诉Vue, Ionic组件不是Vue组件。在main.js中，添加以下忽略所有Ionic元素的配置对象

Vue.config.ignoredElements = [/^Ion/, /^ion-/];

查看项目是否可以正常运行以及控制台是否存在异常信息；如果一切正常说明ionic+vue项目架构已经完成了

二、项目测试发布

首先借助 ionic 开发的 capacitor，他是一个类似于 cordova 的可以提供本机接口的工具，同时它也兼容很多现有的 cordova 插件

1、首先把项目初始化为ionic项目

执行：

ionic init

2、该项目中安装capacitor，执行

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

、初始化 capacitor，App name 和 App Package ID 根据你自己的项目去进行填写

npx cap init

4、初始化完成之后 capacitor.config.json 里的 webDir，改成 dist，因为vue项目的构建目录为dist，这样可以省的我们去复制代码到 www 目录（并且我们也没有创建 www 目录）。

5、构建项目

npm run build

6、我们使用 capacitor 添加对Android平台的支持，并将构建的代码拷贝到Android项目库里

npx cap add android
npx cap copy android

npx cap open android