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の変更 =====
以下に書き換えます。
Hello World
Welcome To @ionic/vue
About
参考:https://ionicframework.com/docs/api/button
(変更前)
{{:ionic4:pasted:20190429-095911.png}}
(変更後)
{{:ionic4:pasted:20190429-100541.png}}
ボタンの部分をクリックすると、Aboutページへ移動します。
{{:ionic4:pasted:20190429-100609.png}}
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において、
(変更前)
{{: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
{{: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
Hello World
This is an about page
Home
Card Subtitle
Card Title
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
Card Link Item 1
Card Link Item 2
Card Button Item 1
Card Button Item 2
{{: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を新規作成
{{ title }}
{{ content }}
{{:ionic4:pasted:20190430-134720.png}}
src/views/About.vue
// 内に、
Open Modal
//
{{:ionic4:pasted:20190430-141043.png}}
{{:ionic4:pasted:20190430-141132.png}}
{{:ionic4:pasted:20190430-141155.png}}
Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。
==== Modal画面を閉じるボタンの実装($ionic.modalController.dismiss()) ====
Modal画面を閉じるボタンを設置する場合は、Modal.vueの内に%%@click="closeModal"%%のようにcloseModal関数を記載し、