Ionic 4에서 Vue.js를 사용해 보았습니다.
이번에는 모바일 애플리케이션 개발에서 인기 ionic을 사용하여 Vue.js를 만져 간다.
전제
구현
vue init webpack-simple i-vue
그렇다면 다음과 같이 입력합니다.
? Project name i-vue
? Project description Ionic Vue Project
? Author Taku Nakagawa
? License MIT
? Use sass? No
vue init webpack-simple i-vue
? Project name i-vue
? Project description Ionic Vue Project
? Author Taku Nakagawa
? License MIT
? Use sass? No
cd i-vue
npm install
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/[email protected]/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/[email protected]/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.com/
와 같이 표시되면 정상 시작
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.jsimport 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.com/
그리고 이것이 나오면 완료!
이상입니다! !
후기
평소의 자신은 Angular를 메인으로 하고 있어, ionic도 Angular 베이스로 만들어져 있어, ionic을 건드릴 기회가 있었으므로
지금 유행의 vue.js에서도 ionic을 만져 보았습니다!
Reference
이 문제에 관하여(Ionic 4에서 Vue.js를 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/taaabooon/items/95b4f2b2734dfa68ed1b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!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/[email protected]/dist/ionic.js"></script>
</body>
</html>
<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>
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)
})
<!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/[email protected]/dist/ionic.js"></script>
</body>
</html>
<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>
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 install axios
<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>
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)
})
평소의 자신은 Angular를 메인으로 하고 있어, ionic도 Angular 베이스로 만들어져 있어, ionic을 건드릴 기회가 있었으므로
지금 유행의 vue.js에서도 ionic을 만져 보았습니다!
Reference
이 문제에 관하여(Ionic 4에서 Vue.js를 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/taaabooon/items/95b4f2b2734dfa68ed1b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
