====== Vue.jsでIonic(@ionic/vue) ====== →2020年10月 ionic-vueが正式対応したそうです。 https://i-doctor.sakura.ne.jp/font/?p=45127 Ionicは、スマホアプリ(PWAを含む)作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。 2019年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、v-modelが使用できないそうです。(残念、、、) https://blog.ionicframework.com/announcing-the-ionic-vue-beta/ {{:ionic4:pasted:20190429-004905.png}} 公式GitHub https://github.com/ionic-team/ionic/tree/master/vue 公式Documentation https://ionicframework.com/docs 上記Blogを写経してみたいと思います。 ===== ソースコードとDEMOサイト ===== ソースコード https://github.com/adash333/ionic4-vue-modal DEMOサイト https://compassionate-neumann-66e20f.netlify.com/ {{:ionic4:pasted:20190430-144410.png}} ===== 開発環境 ===== Windows10Pro 1803 nvm 1.1.7 node 10.15.1 npm 6.4.1 yarn 1.13.0 ionic 4.12.0 VisualStudioCode 1.33.1 今回構築した環境 vue/cli 3.7.0 →@vue/cliでvueアプリを作成した後に、@ionic/vueとvue-routerをインストールするだけなので、CodeSandboxでも可能かもしれません。 ===== ionic-cliのupdate(install)と@vue/cliのインストール ===== C:/vue/ フォルダを作成し、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開きます。 ionic-cliをインストール済みの場合は、以下を入力してupdateします。 npm update -g ionic {{:ionic4:pasted:20190429-012958.png}} ionic-cliをインストール未の場合は、以下を入力してインストールします。 npm install -g ionic 次に、@vue/cliをインストールします。 npm install -g @vue/cli {{:ionic4:pasted:20190429-020421.png}} ===== 新規Vueアプリの作成 ===== vue create ionic4-vue-app Use https://registry.npm.taobao.org for faster installation? と聞かれるので、Y+Enter 画面が変わって、さらに2回何か聞かれるので、2回ともそのままEnter 数分待ちます。 {{:ionic4:pasted:20190429-021143.png}} 途中で以下のような感じのエラーが出ますが、待っていると、、、 {{:ionic4:pasted:20190429-021600.png}} 以下のように完了しました。割と時間がかかります。 {{:ionic4:pasted:20190429-021924.png}} ===== Vueアプリの起動 ===== cd ionic4-vue-app yarn serve {{:ionic4:pasted:20190429-022139.png}} ブラウザで、http://localhost:8080/ を開くと、以下のようになっています。 {{:ionic4:pasted:20190429-024550.png}} サーバを停止するときは、ターミナル画面で、Ctrl+C => y + Enterとなります。 ===== vue-routerと、@ionic/vueの追加 ===== vue add router yarn add @ionic/vue //または、npm install @ionic/vue {{:ionic4:pasted:20190429-025001.png}} {{:ionic4:pasted:20190429-025236.png}} yarn serve //または、npm run serve {{:ionic4:pasted:20190429-030744.png}} ===== src/main.jsの変更 ===== src/main.jsで、@ionic/vueとionic用のcssを読みこみます。 import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); (変更前) {{:ionic4:pasted:20190429-095306.png}} (変更後) {{:ionic4:pasted:20190429-095636.png}} 変更して保存したら、自動更新に60秒くらいかかりました。 ===== src/views/Home.vueの変更 ===== 以下に書き換えます。 は使用できるかな? 参考:https://ionicframework.com/docs/api/button (変更前) {{:ionic4:pasted:20190429-095911.png}} (変更後) {{:ionic4:pasted:20190429-100541.png}} ボタンの部分をクリックすると、Aboutページへ移動します。 {{:ionic4:pasted:20190429-100609.png}} は普通に使用できるようです。 ===== src/router.jsとsrc/App.vueの変更 ===== 上記のままでもなんかよさそうな気がしなくもないのですが、ionicをちゃんと利用できるようにするためには、以下の設定を行わなければならないそうです。 src/router.jsを編集して、vue-routerのRouterではなく、@ionic/vueのIonicVueRouterを用いるように設定します。 import { IonicVueRouter } from '@ionic/vue'; Vue.use(IonicVueRouter); export default new IonicVueRouter({ ... }); (変更前) {{:ionic4:pasted:20190429-101132.png}} (変更後) {{:ionic4:pasted:20190429-101346.png}} また、それに応じて、src/App.vueにおいて、に変更します。 の部分が、src/router.jsで設定したコンポーネント(Home.vueやAbout.viewなど)で置き換えられることになります。 (変更前) {{:ionic4:pasted:20190429-101441.png}} (変更後) {{:ionic4:pasted:20190429-101604.png}} ===== src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card) ===== 題名と画像が左寄せになってしまったので、"%%
%%"で囲んで水平方向真ん中に配置します。 src/views/Home.vueの変更

Welcome To @ionic/vue

Vue logo
{{:ionic4:pasted:20190430-130944.png}} Aboutページでは、Ionicのcardを使ってみたいと思います。 参考:https://ionicframework.com/docs/api/card 参考2:https://ionicframework.com/docs/v3/components/#card-image https://ionicframework.com/docs/demos/api/card/madison.jpg から、madison.jpgをダウンロードして、%%src/assets/%%に保存します。 src/views/About.vue {{:ionic4:pasted:20190430-134025.png}} 画像つきカードCardを作成することができました。 ===== ion-modalを試してみる ===== modalという、リンクをクリックすると一時的に出てくる画面を試してみます。 src/views/Modal.vueを新規作成し、 src/views/About.vueに"Open Modal"ボタンを設置し、そのボタンをクリックすると、Modal.vueが表示されるようにします。 参考:https://ionicframework.com/docs/api/modal {{:ionic4:pasted:20190430-134513.png}} src/views/Modal.vueを新規作成 {{:ionic4:pasted:20190430-134720.png}} src/views/About.vue //