Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ionic/vueもβ版になったのでちゃんと触ってみた
Search
chan_kaku
April 27, 2019
Technology
0
510
ionic/vueもβ版になったのでちゃんと触ってみた
ionic/vueが2019年4月にβ版がリリースされたということでα版との違いなどを調べてみました
chan_kaku
April 27, 2019
Tweet
Share
More Decks by chan_kaku
See All by chan_kaku
JJGU CCC 2019 Springまとめ~Java歴1年なりの意見を添えて~
takumiz19
1
2.3k
Vueのライフサイクルを完全に理解
takumiz19
0
1.7k
Vueでネイティブアプリを作り倒す
takumiz19
1
1.4k
Other Decks in Technology
See All in Technology
Introduction to GKE x LLM
soma00333
0
140
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
280
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
1
160
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
0
160
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.7k
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
シン・Kafka / shin-kafka
oracle4engineer
PRO
6
2.7k
強みを伸ばすキャリアデザイン
yug1224
0
200
Signals Unleashed: The Full Guide
rainerhahnekamp
0
350
Algyan イベント振り返り
linyixian
0
170
20240416_devopsdaystokyo
kzkmaeda
1
160
Featured
See All Featured
Teambox: Starting and Learning
jrom
127
8.4k
GraphQLとの向き合い方2022年版
quramy
29
12k
A designer walks into a library…
pauljervisheath
199
23k
Atom: Resistance is Futile
akmur
258
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Building Your Own Lightsaber
phodgson
97
5.7k
Web Components: a chance to create the future
zenorocha
304
41k
What the flash - Photography Introduction
edds
64
11k
GitHub's CSS Performance
jonrohan
1023
450k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Transcript
ionic/vueもβ版になったのでちゃんと触っ てみた 2019/04/27 Kyoto.js #16 chan_kaku
自己紹介 フリュー株式会社 サーバーサイドエンジニア Vue歴約1年(v-kansai運営) ライブ、フェス、ベース、お酒 特にビールが大好きだよ 仕事 趣味 Twitter @chan_kakuz
前回のKyoto.jsで、、、
https://speakerdeck.com/takumiz19/vuedeneiteibuapuriwozuo-ridao-su
前回もvue/ionicの話をしたが、、、
動機
動機 • VueConf USAでionic/vueのβ版について発表された • α版からどうなったのか気になった
β版でできるようになったこと • Vue Routerがついに • その他色々IonicのComponentsが使えるようになったっ ぽい(公式アナウンスはない)
β版でもできないこと • The shorthand v-model binding is currently not supported
a. 双方向バインディングのディレクティブであるv-modelが使えない • Stack navigation for deep transitions is under heavy development at this time. a. 次のページで解説 • ネイティブのAPIが使えない a. これはまだAngularでしか使えない
stack navigator 1 5 4 3 2 1 2 3
4 5 screenが積み重なっている感じ
まずはrouterを使ってみる
routerを使う vue cliで作ったプロジェクト にrouterを追加
ionic追加 import Vue from 'vue' import App from './App.vue' import
router from './router' import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app') 追加 src/main.js
IonicVueRouterを追加 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', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }); 追加 VueRouterを使いつつ、Ionic のRouterAPIを 使うためのもの src/router.js
None
いろんなComponentで遊んでみる
ion-fab <ion-fab vertical="bottom" horizontal="end"> <ion-fab-button>Share</ion-fab-button> <ion-fab-list side="top"> <ion-fab-button> <ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button> <ion-fab-button> <ion-icon name="logo-twitter"></ion-icon> </ion-fab-button> <ion-fab-button> <ion-icon name="logo-youtube"></ion-icon> </ion-fab-button> </ion-fab-list> <ion-fab-list side="start"> <ion-fab-button> <ion-icon name="logo-vimeo"></ion-icon> </ion-fab-button> </ion-fab-list> </ion-fab>
None
ion-card <ion-card> <img src="../assets/profile.png"> <ion-card-header> <ion-card-subtitle>name</ion-card-subtitle> <ion-card-title>chankaku</ion-card-title> </ion-card-header> <ion-card-content> I
love beer. </ion-card-content> </ion-card>
ion-card
感想 • GooglePlay StoreでもPWAでアプリを配信できるよ うになったし、iOSも12.2でPWAのOAuthがちゃんと 使えるようになったので、PWAでいいのではと思った り • 今のところ(2019/04現在)はVueでちゃんとしたプロ ダクトとしてネイティブアプリを作るのは辛いイメージ
まとめ • IonicのRouterAPIを使うことができるようになった • Ionic/VueでもIonicのComponentが結構使えるようになっ た