前言
Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,我们将使用它来请求api。
WordPress REST API为WordPress数据类型提供API端点,允许开发人员通过发送和接收JSON(JavaScript Object Notation)对象与站点进行远程交互 。
demo需要实现功能
- 获取全部的文章列表
- 点击
查看详情
进入文章详情页展示文章内容 - 实现文章列表的分页功能
- 获取所有的文章分类
- 点击分类获取不同分类下的文章列表
环境搭建
vue-cli单页应用的脚手架构建:
https://cn.vuejs.org/v2/guide/installation.html
Axios引入
https://www.kancloud.cn/yunye/axios/234845
element-ui引入
http://element-cn.eleme.io/2.0/#/zh-CN/component/installation
测试 API 的工具
Wordpress REST API手册
https://developer.wordpress.org/rest-api/
新建两个.vue文件分别显示文章列表和文章详情
文章列表:articleList.vue
文章详情:article.vue
并在src/router.js
中设置页面路由如下:
import Vue from 'vue'
import Router from 'vue-router'
import ArticleList from '@/components/articleList'
import Article from '@/components/article'
Vue.use(Router)
expo