vuejs2 + wp-rest-api开发web app

原文网址链接：vuejs2 + wp-rest-api开发web app

之前我写了一篇《利用Cordova，jqurey与wp-rest-api制作一个属于自己博客的移动APP》，使用的是jQuery mobile的方式进行web app的开发，今天我就说一下使用vuejs 与 wp-reset-api开发一个web app的方法。
先看看做好以后的效果吧：

安装方法请自行去官方网站查看

1、直接打开nodejs的命令窗口输入以下命令：
npm install -g vue-cli //全局安装vue-cli
vue init webpack egtch //生成项目名为egtch的模板，这里的项目名egtch随你自己写
输入这个目录后会出现如下所示

? Project name 自己填写一个项目名称 ? Project description (A Vue.js project)
这里是项目描述，随便填写 ? Author 这个是开发者信息，会自动获取，也可以自己设置

Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are
ONLY allowed in .vue files - render functions are required elsewhere

看到这个，直接回车跳过 ? Install vue-router? (Y/n)
//这里选择y，安装vue-router（路由）功能，以便我们进行相应的开发。 ? Use ESLint to lint your
code? (Y/n) //如果你想要使用eslint提示，那么你选择y，不知道这个是什么东西的同学，直接选择n吧。 ? Setup
unit tests with Karma + Mocha? //这两个是js测试框架，选择n ? Setup e2e tests with
Nightwatch? (Y/n) //这个也直接选择n

2、以上步骤都完成后，即将看到如下的提醒哦

vue-cli · Generated "egtch". To get started: cd egtch npm install npm
run dev 3、然后我们在执行以下命令 cd egtch //进入项目所在目录 npm install //初始化安装依赖
这样我们在回来看我们的目录结构，将在egtch目录下生成如下目录结构 vue-cli项目目录

npm run dev //在浏览器中运行当前的vue项目
这样就可以看到vue-cli默认的一个页面展现在我们眼前了，如下图：
vue-cli演示页面

4、在我们开发中会用到vue-resource与stylus
我们可以通过命令 npm install vue-resource -save来进行下载vue-resource安装
npm install stylus -save
当然也可以修改egtch根目录下的packge.json文件中的代码后，在执行npm install，修改如图
packge.json修改

并且修改

"devDependencies": {
…………
"css-loader": "^0.26.1", //在这个下面添加stylus
//必须要添加2个关于stylus的依赖库
"stylus-loader": "^2.5.0",
"stylus": "0.52.4",
…………
}

（官方地址http://v2.wp-api.org/） 
比如，如果想要获取wordpress中最新的文章，你可以直接在浏览器中输入： http://www.egtch.com/wp-json/...，大家可以通过本站的相关api去访问 如果想获取指定的文章（按文章ID），可以输入： http://www.egtch.com/wp-json/... 获取第一页的文章http://www.egtch.com/wp-json/... 第二页page=2以此类推 更多关于wp-rest-api用法，请参考官方文档api

1、打开根目录下的index.html，修改title，并且在head中增加手机端设备支持代码
并且导入reset.css(自行到网上寻找适合自己的reset.css)，并且将其放在static目录中
2、在main.js中引入vue-resource

import VueResource from 'vue-resource'
Vue.use(VueResource)

3、在src/assets下新建一个css目录，并在目录下建立一个public.styl文件，其代码如下
注意：使用stylus中，缩进必须正确，否则就会出现严重的问题

font-rem($num)
  font-size ($num/16)rem
bg-change($color)
  background $color
body
  background #CCC
  font-family "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif
  font-weight lighter
  height 100%
h1,h2,h3,h4,h5,h6
  font-weight 400
  color black
  border-left 2px #CCC solid
  margin 10px 0
  padding 0 0 0 8px
  line-height 1
  font-rem(18)
//手机端真正实现1px的线
.line
  width 90%
  margin 0 auto
  flex 1
  position relative
  top -6px
  border-bottom 1px solid #F2F2F2
.line-k
  width 100%
  margin 10px auto 0 auto
  flex 1
  position relative
  top -6px
  border-bottom 1px solid #F2F2F2
.codecolorer-container
  width 90%
  background #f2f2f2
  margin 0 auto
  color dimgrey
  overflow auto
  border 1px #CCC solid
  padding 3%
  font-rem(14)
.wp-caption
  text-align center

4、修改src目录下的App.vue如下

5、我们在src目录下的commponents目录下建立一个Posts.vue来获取，代码如下：

6、建立一个Article.vue获取文章内容

7、再新建一个Categories.vue读取分类

8、建立一个Postcat.vue来获取分类目录下的文章

      以上我们就可以完成了获得文章以及分类目录下的文章的相关代码。看上去是不是很简单，使用vuejs确实可以让我们省去很多的DOM操作。
      更多代码和实例，请直接查看本项目在github中的实例地址为：
      https://github.com/king2088/V...，如果你喜欢本实例，请记得在github上给我加星哦！
      演示地址：
      http://www.egtch.com/VueEgtch/
      本程序会后续还会进行相应的更新维护，希望大家关注，也希望大家关注vuejs