Ionic4+Vue+Capacitor 初體驗

cuieney 發(fā)布于2019-08-23 17:53 / 1929人閱讀

摘要：最新的已經(jīng)提供了其他框架的支持，，等等，甚至不使用框架。接下來我將使用和開發(fā)一個最簡單的。也可以直接使用啟動，運行使用模擬器運行項目完美，那么本次的初體驗就到此結(jié)束了，的插件使用可以參考官方文檔哦。

注：本文的目的在于記錄自己基于最新的Ionic4構(gòu)建一個App，也為同樣需求的小伙伴提供參考。第一次寫文章，文筆笨拙，還請見諒，不對之處，還請指出。

最新的Ionic4已經(jīng)提供了其他 js 框架的支持，Vue，React 等等，甚至不使用框架。接下來我將使用 Vue 和 Ionic 開發(fā)一個最簡單的app。

創(chuàng)建項目

使用Vue Cli創(chuàng)建一個Vue項目（默認配置）：

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

cd ionic-vue-app

啟動項目，看看是否創(chuàng)建成功：

npm run serve

成功了，接下來我們?yōu)轫椖刻砑?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")
    }
  ]
})

現(xiàn)在，我們就可以訪問Ionic的組件了，如下修改Home.vue的代碼。

以 ion-action-sheet 為例，直接去官網(wǎng)復(fù)制示例代碼：

完美~

那么如何把代碼打包成為一個app呢，首先借助 ionic 開發(fā)的 capacitor，他是一個類似于 cordova 的可以提供本機接口的工具，同時它也兼容很多現(xiàn)有的 cordova 插件。我們回歸到代碼(以下僅演示Android環(huán)境)：

首先，我們需要把我們的 vue 項目變成一個 ionic 項目:

ionic init

注意：Project type 選擇 custom (custom)

然后我們在該項目中安裝capacitor:

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

然后初始化 capacitor，App name 和 App Package ID 根據(jù)你自己的項目去進行填寫

npx cap init

初始化之后我們需要改一下 capacitor.config.json 里的 webDir，改成 dist，因為vue項目的構(gòu)建目錄為dist，這樣可以省的我們?nèi)?fù)制代碼到 www 目錄（并且我們也沒有創(chuàng)建 www 目錄）。

"webDir": "dist"

接下來我們構(gòu)建項目：

npm run build

然后我們使用 capacitor 添加對Android平臺的支持，并將構(gòu)建的代碼拷貝到Android項目庫里：

npx cap add android
npx cap copy android

現(xiàn)在我們就可以使用Android Studio打開項目，使用模擬器運行項目，或是構(gòu)建app。
也可以直接使用 capacitor啟動Android Studio，運行：

npx cap open android

使用模擬器運行項目

完美~，那么本次的初體驗就到此結(jié)束了，capacitor 的插件使用可以參考官方文檔哦。

運行環(huán)境：

瀏覽器：Chrome

編輯器：VS Code

軟件版本：

"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"
  },

參考資料：

Ionic文檔

Capacitor文檔

Ionic宣布vue測試版