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

投稿日: 2022-04-20 2022-10-06
タグ: Vue.js

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

ローカルRESTAPIを作成できます json-server これにより、サーバーに対して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 })

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

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コンポーネントを使用して構築されているため、Vueに次のことを伝える必要があります。 ion- コンポーネントは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リスト

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

私たちの内部 created フック、キャプチャしています todos APIから、それらをに割り当てます 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. 取得するには value 私たちが使用している新しいtodoアイテムの 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に追加しています。

結果は次のとおりです

getdocs

13036