最近、なにかとフロントのフレームワークで人気のVue.js
今回は、モバイル・アプリケーション開発で人気のionicを使用してVue.jsを触っていく。
前提
- Vue CLIがインストールされていること
実装
vue init webpack-simple i-vue
そしたら、下記のように入力していく
? Project name i-vue
? Project description Ionic Vue Project
? Author Taku Nakagawa
? License MIT
? Use sass? No
- i-vueプロジェクトに移動して
cd i-vue
- npmをプロジェクト配下でインストールして
npm install
- dev環境を走らせる
npm run dev
下記のように表示されればおけ！
Vue.jsの実装
なにかテキストエディタで先程、作成した【i-Vue】を開く
index.htmlを開く
index.html
<!DOCTYPE html>
<html lang="ja"">
<head>
<meta charset="utf-8">
<title>i-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>
</body>
</html>
App.vue を開いて、編集する
App.vue
<template>
<div id="app">
<ion-app>
<ion-page>
<ion-header>
<ion-toolbar>
Ionic Vue!
</ion-toolbar>
</ion-header>
</ion-page>
</ion-app>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
main.jsを開いて、編集する
import Vue from 'vue'
import App from './App.vue'
Vue.config.ignoredElements = [
'ion-app',
'ion-page',
'ion-header',
'ion-toolbar'
]
new Vue({
el: '#app',
render: h => h(App)
})
再度、index.htmlを開いて編集する
index.html
<!DOCTYPE html>
<html lang="ja"">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>i-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>
</body>
</html>
App.vueを再度、編集する
App.vue
<template>
<div id="app">
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Ionic Vue!</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
</ion-page>
</ion-app>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
main.jsも再度編集
import Vue from 'vue'
import App from './App.vue'
Vue.config.ignoredElements = [
'ion-app',
'ion-page',
'ion-header',
'ion-toolbar',
'ion-title',
'ion-content',
]
new Vue({
el: '#app',
render: h => h(App)
})
ここまで、
npm run dev
で起動したブラウザで!
http://localhost:8080/
のように表示されていれば、正常起動
Axiosをインストール
npm install axios
App.vueを編集
App.vue
<template>
<div id="app">
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Ionic Vue!</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item v-for="user of users" v-bind:key="user.id">
<ion-label full>
{{user.name}}
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</ion-app>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'app',
data () {
return {
users : []
}
},
created() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response =>
this.users = response.data)
}
}
</script>
<style>
</style>
main.jsを編集
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.ignoredElements = [
'ion-app',
'ion-page',
'ion-header',
'ion-toolbar',
'ion-title',
'ion-content',
'ion-list',
'ion-item',
'ion-label'
]
new Vue({
el: '#app',
render: h => h(App)
})
と記載して
http://localhost:8080/
でこれが出ていれば完了！
以上です！！
あとがき
普段の自分はAngularをメインにやっていて、ionicもAngularベースで作られており、ionicを触る機会があったので
今、流行りのvue.jsでもionicを触ってみました！