在 Vue.js 应用程序中使用 Ionic 4 组件

Vue.js 正因所有正确的原因而变得越来越受欢迎,Vue 和 Progressive Web Applications 的组合(https://andsky.com/tech/tutorials/js-intro-progressive-web-apps)的未来看起来很光明。Ionic 是结合移动第一 UX 的前沿 Web 框架,尽管它目前由 Angular 5.x 支持,但团队的新 Stencil 编译器允许 Vue.js 与 Ionic 4 使用相同的 Web 组件。

Ionic 4目前处于alpha阶段,不应该用于生产,但这是一项伟大的思想实验,深入了解Stencil的好处以及Web Components对于框架无意识的UI组件意味着什么。

要开始,使用 Vue CLI 创建一个新的 Vue 项目:

 1# Install the Vue CLI
 2$ npm install vue-cli
 3
 4# Create a new Vue project
 5$ vue init webpack-simple vue-ionic
 6
 7# Change directory
 8$ cd vue-ionic
 9
10# Add vue-router and axios
11$ npm install vue-router axios
12
13# Run development server
14$ npm run dev

剩下的火

我们可以使用json-server创建一个本地的REST API,这使我们能够轻松地向我们的服务器发送GET和POST todos。

1$ npm install json-server -g

您可以使用 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:

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

现在我们有一个API并运行,让我们添加Ionic!

添加离子

要在我们的项目中添加一个Alpha版本的Ionic,将以下脚本添加到我们的index.html文件:

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

<$>[注]你可以在这里找到当前版本的 Ionic 核心: https://www.npmjs.com/package/@ionic/core <$>

同时,确保您有适当的响应性元标签:

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

路线

然后我们可以设置两个路径,允许我们查看 todo 项目或添加 todo 项目:

 1[label App.vue]
 2import Vue from 'vue'
 3import VueRouter from 'vue-router';
 4
 5import TodoList from './components/TodoList';
 6import AddTodoItem from './components/AddTodoItem';
 7
 8Vue.use(VueRouter);
 9
10const routes = [
11  { path: '', redirect: '/todos'},
12  { path: '/todos', component: TodoList },
13  { path: '/todos/add', component: AddTodoItem}
14]
15
16export default new VueRouter({ routes })

接下来,将路由器配置添加到“main.js”中的主要Vue实例中:

 1[label main.js]
 2import Vue from 'vue'
 3import App from './App.vue'
 4
 5import router from './router'
 6
 7new Vue({
 8  el: '#app',
 9  router,
10  render: h => h(App)
11})

Ionic Web 组件

由于 Ionic 4.x 是使用 Web Components构建的,所以我们需要告诉 Vue 这些“ion”组件不是 Vue 组件。

1[label main.js]
2Vue.config.ignoredElements = [/^ion-/]

在“App.vue”中,我们现在可以添加我们的“”并将其嵌入到一个“”组件中。

1[label App.vue]
2<template>
3  <ion-app>
4    <router-view></router-view>
5  </ion-app>
6</template>

全部列表

要创建我们在“router.js”中注册的 todo 列表页面,请在“src/components”文件夹中创建一个名为“TodoList.vue”的文件。

在我们的“创建”链条中,我们正在从我们的API中捕捉“todos”并将它们分配到“todos”数组中。

 1[label TodoList.vue]
 2import axios from 'axios';
 3
 4export default {
 5  data() {
 6    return {
 7      todos: []
 8    }
 9  },
10  methods: {
11    addTodo() {
12      this.$router.push({path: '/todos/add'})
13    }
14  },
15  created() {
16    axios.get('http://localhost:3001/todos')
17      .then(res => this.todos = res.data)
18  }
19}

然后我们可以添加一个模板,它肯定会看起来像任何在过去使用Ionic的人:

 1<template>
 2  <ion-page>
 3    <ion-header>
 4
 5      <ion-toolbar class="toolbar-md-primary">
 6        <ion-title>TodoList</ion-title>
 7      </ion-toolbar>
 8
 9    </ion-header>
10    <ion-content class="content">
11
12      <ion-list>
13        <ion-item v-for="todo in todos" :key="todo.id">
14          {{todo.name}}
15        </ion-item>
16      </ion-list>
17
18      <ion-fab-button class="todo-fab" @click="addTodo">
19        <ion-icon name="add"></ion-icon>
20      </ion-fab-button>
21    </ion-content>
22  </ion-page>
23</template>

我们将我们的组件包装在一个“离子页面”元素中,这使我们能够定义一个标题和工具栏,这使我们能够显示导航栏。

接下来,我们可以将列表显示在一个“离子内容”元素中,并在我们“todos”数组中的每个元素中重复为一个“离子内容”。

为了样式化我们的fab按钮并添加一些模板,我们将使用我们两个组件的两个类,所以让我们添加一个“style.css”文件和相应的类:

 1[label style.css]
 2.todo-fab {
 3  position: fixed;
 4  bottom: 25px;
 5  right: 15px;
 6  font-size: 30px;
 7}
 8
 9.content {
10  padding: 10px 10px 10px 0px
11}

这给了我们以下结果(s)

List of todo items

当用户点击FAB按钮时,他们将被导航到添加Todo页面。

 1[label AddTodoItem.vue]
 2<template>
 3  <ion-page>
 4    <ion-header class="toolbar-md-primary">
 5
 6      <ion-toolbar>
 7        <ion-title>Add Item</ion-title>
 8      </ion-toolbar>
 9
10    </ion-header>
11    <ion-content class="content">
12
13      <ion-item>
14        <ion-input :value="name" ref="newTodoItem" @input="updateTodoName" placeholder="Todo Name"></ion-input>
15      </ion-item>
16
17      <ion-fab-button class="todo-fab" @click="addTodo">
18        <ion-icon name="checkmark"></ion-icon>
19      </ion-fab-button>
20
21    </ion-content>
22  </ion-page>
23</template>

我们的标记看起来非常相似,但这次我们使用一个“离子输入”来获得新 Todo 项目的“值”,我们使用一个“ref”和一个“输入”事件。

 1import axios from 'axios';
 2
 3export default {
 4  data() {
 5    return {
 6      name: ''
 7    }
 8  },
 9  methods: {
10    addTodo() {
11      const newTodo = { name: this.name }
12      axios.post('http://localhost:3001/todos', newTodo)
13        .then(res => {
14          this.$router.push({path: '/todos'})
15        })
16    },
17    updateTodoName() {
18      this.name = this.$refs.newTodoItem.value
19    }
20  }
21}

这个页面的代码也非常相似,我们每当有人点击 FAB 按钮时,都会使用 axios添加一个新的 Todo 项目到我们的 API。

以下是结果

Adding a todo item