VueJS with ionic @vue/cli @ionic/vue@next

 

clone from C:\d\lab\flaskw3html\19.vuejs\07.ionic\app\notes.md

created on 2020/7/27

repeated on 2020/9/14

"dependencies": {

    "@ionic/vue": "0.0.9",

    "ionicons": "^4.6.3",

    "vue": "^2.6.11",

    "vue-router": "^3.2.0"

  }

Ionic4+Vue+Capacitor 初體驗

https://segmentfault.com/a/1190000019359409

https://www.twblogs.net/a/5cf319d1bd9eee4a4a864c79

npm install @vue/cli

vue create app

vue add router (History Mode)

rem npm install @ionic/vue@0.0.9

npm install @ionic/vue@next

rem npm install ionicons rem this does not work tested on 20200727

npm install ionicons@4.6.3

rem must use 4.6.3 on 20200727

npm run serve

src/main.js

===========

import Ionic from '@ionic/vue';

import "@ionic/core/css/core.css";

import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

src/router/routers.js

=====================

replace 

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter()

by 

import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

const router = new IonicVueRouter()

icons src/main.js

=================

https://github.com/ionic-team/ionic-framework/issues/19078

import Ionic from '@ionic/vue';

import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

import { addIcons } from 'ionicons';

import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {

  return {

    ['ios-' + i]: allIcons[i].ios,

    ['md-' + i]: allIcons[i].md

  };

});

const iconsObject = Object.assign({}, ...currentIcons);

addIcons(iconsObject);

IonicVueRouter

======

replace ```import IonicVueRouter from 'vue-router'``` by ```import { IonicVueRouter } from "@ionic/vue"```

Home.vue

========

<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>