ionic + vue todoList

全局安装vue-cli3

npm install -g vue-cli

创建vue项目

vue create ionic-vue-app
cd ionic-vue-app
npm run serve

本地安装json-server

npm install json-server -g

配置db.json

{
  "todos": [
    {
      "id": 1,
      "name": "Make awesome applications"
    },
    {
      "id": 2,
      "name": "Play squash"
    },
    {
      "id": 3,
      "name": "Deadlift"
    },
    {
      "id": 4,
      "name": "Squat"
    }
  ]
}

运行api，成功后浏览器打开localhost:3001查看数据

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

public/index.html引入ionic

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

修改router/index.js

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忽略ionic元素标签

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

修改App.vue

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

新建components/TodoList.vue

<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>

<script>
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
      })
      .catch((error) => {
        console.log(error)
      })
  }
}
</script>

<style scoped lang="scss">
.todo-fab {
  position: fixed;
  bottom: 25px;
  right: 15px;
  font-size: 30px;
}

.content {
  padding: 10px 10px 10px 0px
}
</style>

新建components/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>

<script>
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
    }
  }
}
</script>

<style scoped lang="scss">
.todo-fab {
  position: fixed;
  bottom: 25px;
  right: 15px;
  font-size: 30px;
}

.content {
  padding: 10px 10px 10px 0px
}
</style>