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測試版