成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ionic4+Vue+Capacitor 初體驗(yàn)

cuieney / 1970人閱讀

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

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

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

創(chuàng)建項(xiàng)目

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

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

cd ionic-vue-app

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

npm run serve


成功了，接下來(lái)我們?yōu)轫?xiàng)目添加 Vue Router 和 Ionic 框架。

vue add router
npm install @ionic/vue

安裝完成后，還需要引入到我們的項(xiàng)目中，這樣就可以使用 Ionic 的組件了。
首先打開(kāi) src/main.js, 添加下面三行代碼：

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

Vue.use(Ionic);

接下來(lái)修改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)在，我們就可以訪問(wèn)Ionic的組件了，如下修改Home.vue的代碼。

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

完美~

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

首先，我們需要把我們的 vue 項(xiàng)目變成一個(gè) ionic 項(xiàng)目:

ionic init

注意：Project type 選擇 custom (custom)

然后我們?cè)谠擁?xiàng)目中安裝capacitor:

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

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

npx cap init

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

"webDir": "dist"

接下來(lái)我們構(gòu)建項(xiàng)目：

npm run build

然后我們使用 capacitor 添加對(duì)Android平臺(tái)的支持，并將構(gòu)建的代碼拷貝到Android項(xiàng)目庫(kù)里：

npx cap add android
npx cap copy android

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

npx cap open android

使用模擬器運(yùn)行項(xiàng)目

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

運(yùn)行環(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測(cè)試版

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104312.html

相關(guān)文章

  • Capacitor 新一代混合應(yīng)用“神器” 會(huì)代替Cordova嗎？？

    摘要：介紹暢想是由團(tuán)隊(duì)最新開(kāi)發(fā)維護(hù)的一個(gè)跨平臺(tái)的應(yīng)用程序容器，可以輕松構(gòu)建在，，和上本機(jī)運(yùn)行的應(yīng)用程序。后者旨在替代或者說(shuō)是進(jìn)化。希望看到在未來(lái)發(fā)展，以及正式發(fā)布。我認(rèn)為它有可能大大改善混合應(yīng)用開(kāi)發(fā)體驗(yàn)。 1.介紹or暢想 Capacitor是由ionic團(tuán)隊(duì)最新開(kāi)發(fā)維護(hù)的一個(gè)跨平臺(tái)的應(yīng)用程序容器，可以輕松構(gòu)建在iOS，Android，Electron和Web上本機(jī)運(yùn)行的Web應(yīng)用程序。我們...

    番茄西紅柿 評(píng)論0 收藏0

  • ionic4+vue+cordova開(kāi)發(fā)混合應(yīng)用

    摘要：摘要是可以讓我們使用開(kāi)發(fā)即使來(lái)移動(dòng)應(yīng)用的框架。如果你熟悉可以直接使用開(kāi)發(fā)，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以來(lái)說(shuō)明這兩者如何結(jié)合使用。除此之外還引入和來(lái)對(duì)把我們代碼打包成安卓或應(yīng)用。。 摘要 ionic是可以讓我們使用web開(kāi)發(fā)即使來(lái)移動(dòng)應(yīng)用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽離成四個(gè)版本，@ionic/co...

    Yujiaao 評(píng)論0 收藏0

  • Vue上手初體驗(yàn)

    摘要：已經(jīng)建立了和數(shù)據(jù)之間的連接，此時(shí)任何對(duì)的改動(dòng)，都會(huì)觸發(fā)的更新。是一個(gè)雙向綁定，意味著當(dāng)在當(dāng)前上所對(duì)應(yīng)的數(shù)據(jù)發(fā)生改變時(shí)，更新的值當(dāng)用戶在中修改或輸入內(nèi)容的時(shí)候，同步上對(duì)應(yīng)的數(shù)據(jù)。 Vue.js vue.js不是一個(gè)框架，他只是一個(gè)提供MVVM風(fēng)格的雙向綁定的庫(kù)，專注于UI層面。 在 Vue.js 的定義中，View 就是用戶實(shí)際看到的 DOM 元素，而 Model 就是原生的JavaSc...

    Eirunye 評(píng)論0 收藏0

  • Vue+Express+Mysql 全棧初體驗(yàn)

    前言 原文地址 曾幾何時(shí)，你有沒(méi)有想過(guò)一個(gè)前端工程師的未來(lái)是什么樣的？這個(gè)時(shí)候你是不是會(huì)想到了一個(gè)詞前端架構(gòu)師，那么一個(gè)合格的前端架構(gòu)只會(huì)前端OK嗎？那當(dāng)然不行，你必須具備全棧的能力，這樣才能擴(kuò)大個(gè)人的形象力，才能升職加薪，才能迎娶白富美，才能走向人生巔峰... 最近我在寫(xiě)一些后端的項(xiàng)目，發(fā)現(xiàn)重復(fù)工作太多，尤其是框架部分，然后這就抽空整理了前后端的架子，主要是用的Vue，Express，數(shù)據(jù)存儲(chǔ)用...

    econi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<