在Vue.js應用程序中使用Ionic 4組件

原文：https://alligator.io/vuejs/vue-ionic/

 

js正以各種正確的理由受到歡迎，Vue和先進的Web應用程序的結合前景光明。Ionic是一個處於結合移動優先用戶體驗（mobile first UX）前沿的web框架，盡管它目前由Angular 5.x提供支持，但該團隊的新Stencil編譯器允許Vue.js使用與Ionic 4相同的web組件。

Ionic4目前處於alpha中，不應用於生產，但盡管如此，這是一個偉大的思想實驗，並深入探討了Stencil的優點以及Web組件對於與框架無關的UI組件的意義。

要開始，請使用Vue CLI創建一個新的Vue項目：

# 安裝 Vue CLI
$ npm install vue-cli

# 創建一個新的 Vue 項目
$ vue init webpack-simple vue-ionic

# 進入剛創建的目錄
$ cd vue-ionic

# 添加 vue-router 和 axios
$ npm install vue-router axios

# 運行 開發服務器
$ npm run dev

 

REST API

我們可以使用json-sever創建一個本地REST API，它允許我們輕松地從服務器獲取（GET）或發布（POST）todos 到服務器 。如果尚未安裝，請在計算機上全局安裝：

$ npm install json-server -g

服務器可以啟動並帶一個JSON序列化數據庫。在項目根目錄中創建一個名為db.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

 要在項目中添加Ionic的alpha版本，請將以下腳本添加到index.html文件中：

<script src="https://unpkg.com/@ionic/core@0.0.2-30/dist/ionic.js"></script>

您可以在這里找到當前版本的Ionic core: https://www.npmjs.com/package/@Ionic/core

同時，確保您有適當的響應元標記：

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

　　

路由

然后，我們可以設置兩條允許查看todo項或添加todo項的路由：

 

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實例：

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

import router from './router'

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

　　

Ionic Web Component

由於Ionic4.x是使用Web Component構建的，我們需要告訴Vue, Ionic組件不是Vue組件。在main.js中，添加以下忽略所有Ionic元素的配置對象：

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

在App.vue內部，我們現在可以添加<router view>並將其包含在<ion App>組件中。這是用來包含我們所有的Ionic 組件：

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

　　

Todo List

要創建我們在router.js中注冊的todo列表頁，請在src/components文件夾中創建一個名為todo list.vue的文件。

在我們創建的鈎子中，我們從API捕獲todo並將它們分配給todos數組。

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">
          
        </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進行迭代。
給我們的fab按鈕加樣式並添加一些內邊距。我們將在兩個組件中同時使用這兩個類，因此我們添加一個style.css文件和適當的類：

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

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

　　

This gives us the following這給了我們以下結果 ：

 

當用戶單擊FAB按鈕時，它們將導航到Add Todo頁面。讓我們在components/AdddoItem創建它：

<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項的值，我們使用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。

 

這是結果 ：

 

原文發表日期： 一月 16, 2018