Ionic4+Vue+Capacitor 初体验

注：本文的目的在于记录自己基于最新的Ionic4构建一个App，也为同样需求的小伙伴提供参考。第一次写文章，文笔笨拙，还请见谅，不对之处，还请指出。

---

最新的Ionic4已经提供了其他 js 框架的支持，Vue，React 等等，甚至不使用框架。接下来我将使用 Vue 和 Ionic 开发一个最简单的app。

创建项目

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

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

cd ionic-vue-app

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

npm run serve

成功了，接下来我们为项目添加 Vue Router 和 Ionic 框架。

vue add router
npm install @ionic/vue

安装完成后，还需要引入到我们的项目中，这样就可以使用 Ionic 的组件了。
首先打开 src/main.js, 添加下面三行代码：

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

Vue.use(Ionic);

接下来修改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')
    }
  ]
})

现在，我们就可以访问Ionic的组件了，如下修改Home.vue的代码。

<template>
  <div class="home">
    <div class="ion-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Hello World</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>Welcome To @ionic/vue</h1>
        <img alt="Vue logo" src="../assets/logo.png">
      </ion-content>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

以 ion-action-sheet 为例，直接去官网复制示例代码：

完美~

---

那么如何把代码打包成为一个app呢，首先借助 ionic 开发的 capacitor，他是一个类似于 cordova 的可以提供本机接口的工具，同时它也兼容很多现有的 cordova 插件。我们回归到代码(以下仅演示Android环境)：

首先，我们需要把我们的 vue 项目变成一个 ionic 项目:

ionic init

注意：Project type 选择 custom (custom)

然后我们在该项目中安装capacitor:

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

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

npx cap init

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

"webDir": "dist"

接下来我们构建项目：

npm run build

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

npx cap add android
npx cap copy android

现在我们就可以使用Android Studio打开项目，使用模拟器运行项目，或是构建app。
也可以直接使用 capacitor启动Android Studio，运行：

npx cap open android

使用模拟器运行项目

完美~，那么本次的初体验就到此结束了，capacitor 的插件使用可以参考官方文档哦。

运行环境：

1. 浏览器：Chrome
2. 编辑器：VS Code
3. 软件版本：

"dependencies": {
    "@capacitor/android": "^1.0.0",
    "@capacitor/cli": "^1.0.0",
    "@capacitor/core": "^1.0.0",
    "@ionic/vue": "0.0.4",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3"
  },

参考资料：

1. Ionic文档
2. Capacitor文档
3. Ionic宣布vue测试版