Vue.jsアプリでのIonic4コンポーネントの使用

提供：Dev Guides
移動先:案内、検索

Vue.jsはすべての正当な理由で人気を集めており、VueとプログレッシブWebアプリケーションの組み合わせの将来は明るいように見えます。 IonicはモバイルファーストUXを組み合わせる最前線のWebフレームワークであり、現在Angular 5.xを搭載していますが、チームの新しい Stencil コンパイラにより、Vue.jsはIonic4と同じWebコンポーネントを使用できます。

Ionic 4は現在アルファ版であり、本番環境で使用するべきではありませんが、それでも、これは優れた思考実験であり、ステンシルの利点と、フレームワークに依存しないUIコンポーネントにとってのWebコンポーネントの意味を深く掘り下げます。

開始するには、VueCLIを使用して新しいVueプロジェクトを作成します。 

# Install the Vue CLI
$ npm install vue-cli

# Create a new Vue project
$ vue init webpack-simple vue-ionic

# Change directory
$ cd vue-ionic

# Add vue-router and axios
$ npm install vue-router axios

# Run development server
$ npm run dev

REST API

json-serverを使用してローカルRESTAPIを作成できます。これにより、サーバーに対してToDoを簡単にGETおよびPOSTできます。 まだインストールしていない場合は、これをマシンにグローバルにインストールします。 

$ npm install json-server -g

サーバーは、JSONシリアル化データベースで起動できます。 プロジェクトのルート内にdb.jsonという名前のファイルを作成します。

db.json

`` `json {“ todos”：[{“ id”：1、“ name”：“ Make awesome Applications”}、{“ id”：2、“ name”：“ Play squash”}、{“ id”： 3、“ name”：“ Deadlift”}、{“ id”：4、“ name”：“ Squat”}]} `` `

ターミナルで以下を実行してAPIを開始します。 

$ json-server db.json --watch --port 3001

APIが稼働しているので、Ionicを追加しましょう！

イオンの追加

プロジェクト内にIonicのアルファ版を追加するには、index.htmlファイルに次のスクリプトを追加します。 

<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>

Ionicコアの現在のバージョンはここにあります： https://www.npmjs.com/package/@ionic/core


同時に、適切なレスポンシブメタタグがあることを確認してください。 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ルート

次に、ToDoアイテムを表示するか、ToDoアイテムを追加する2つのルートを設定できます。

App.vue 

import Vue from 'vue'
import VueRouter from 'vue-router';

import TodoList from './components/TodoList';
import AddTodoItem from './components/AddTodoItem';

Vue.use(VueRouter);

const routes = [
  { path: '', redirect: '/todos'},
  { path: '/todos', component: TodoList },
  { path: '/todos/add', component: AddTodoItem}
]

export default new VueRouter({ routes })

その後、main.js内のメインVueインスタンスにルーター構成を追加します。

main.js 

import Vue from 'vue'
import App from './App.vue'

import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

IonicWebコンポーネント

Ionic 4.xはWebコンポーネントを使用して構築されているため、ion-コンポーネントはVueコンポーネントではないことをVueに通知する必要があります。 main.js内に、すべてのIonic要素を無視する次の構成オブジェクトを追加します。

main.js 

Vue.config.ignoredElements = [/^ion-/]

App.vue内に、<router-view>を追加し、これを<ion-app>コンポーネントで囲むことができます。 これは、すべてのIonicコンポーネントを囲むために使用されます。

App.vue 

<template>
  <ion-app>
    <router-view></router-view>
  </ion-app>
</template>

Todoリスト

router.js内に登録したToDoリストページを作成するには、src/componentsフォルダー内にTodoList.vueという名前のファイルを作成します。

createdフック内で、APIからtodosをキャプチャし、それらをtodos配列に割り当てています。

TodoList.vue 

import axios from 'axios';

export default {
  data() {
    return {
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.$router.push({path: '/todos/add'})
    }
  },
  created() {
    axios.get('http://localhost:3001/todos')
      .then(res => this.todos = res.data)
  }
}

次に、過去にIonicを使用したことがある人と同じように見えるテンプレートを追加できます。 

<template>
  <ion-page>
    <ion-header>

      <ion-toolbar class="toolbar-md-primary">
        <ion-title>TodoList</ion-title>
      </ion-toolbar>

    </ion-header>
    <ion-content class="content">

      <ion-list>
        <ion-item v-for="todo in todos" :key="todo.id">
          {{todo.name}}
        </ion-item>
      </ion-list>

      <ion-fab-button class="todo-fab" @click="addTodo">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-content>
  </ion-page>
</template>

コンポーネントをion-page要素の中にラップします。 これにより、ナビゲーションバーを表示する機能を提供するヘッダーとツールバーを定義できます。

次に、ion-content要素内のリストを表示し、todos配列内の各アイテムをion-itemとして反復処理できます。

ファブボタンのスタイルを設定し、パディングを追加します。 両方のコンポーネントで両方のクラスを使用するので、style.cssファイルと適切なクラスを追加しましょう。

style.css 

.todo-fab {
  position: fixed;
  bottom: 25px;
  right: 15px;
  font-size: 30px;
}

.content {
  padding: 10px 10px 10px 0px
}

これにより、次の結果が得られます

ユーザーがFABボタンをクリックすると、[Todoの追加]ページに移動します。 components/AddTodoItem.vueで作成しましょう。

AddTodoItem.vue 

<template>
  <ion-page>
    <ion-header class="toolbar-md-primary">

      <ion-toolbar>
        <ion-title>Add Item</ion-title>
      </ion-toolbar>

    </ion-header>
    <ion-content class="content">

      <ion-item>
        <ion-input :value="name" ref="newTodoItem" @input="updateTodoName" placeholder="Todo Name"></ion-input>
      </ion-item>

      <ion-fab-button class="todo-fab" @click="addTodo">
        <ion-icon name="checkmark"></ion-icon>
      </ion-fab-button>

    </ion-content>
  </ion-page>
</template>

マークアップは非常によく似ていますが、今回はion-inputを使用しています。 新しいtodoアイテムのvalueを取得するために、refイベントとinputイベントを使用しています。 

import axios from 'axios';

export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    addTodo() {
      const newTodo = { name: this.name }
      axios.post('http://localhost:3001/todos', newTodo)
        .then(res => {
          this.$router.push({path: '/todos'})
        })
    },
    updateTodoName() {
      this.name = this.$refs.newTodoItem.value
    }
  }
}

このページのコードも非常によく似ています。誰かがFABボタンをクリックするたびに、axiosを使用して新しいTodoアイテムをAPIに追加しています。

結果は次のとおりです

「https://www.finddevguides.com/index.php?title=Vue.jsアプリでのIonic4コンポーネントの使用&oldid=100239」から取得
Powered by MediaWiki