之前我写了一篇《利用Cordova，jqurey与wp-rest-api制作一个属于自己博客的移动APP》，使用的是jQuery mobile的方式进行web app的开发，今天我就说一下使用vuejs 与 wp-reset-api开发一个web app的方法。
先看看做好以后的效果吧：
一、首先安装nodejs，安装方法请自行去官方网站查看
二、安装vue-cli
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目录下生成如下目录结构
npm run dev //在浏览器中运行当前的vue项目
这样就可以看到vue-cli默认的一个页面展现在我们眼前了，如下图：
4、在我们开发中会用到vue-resource与stylus
我们可以通过命令 npm install vue-resource -save来进行下载vue-resource安装
npm install stylus -save
当然也可以修改egtch根目录下的packge.json文件中的代码后，在执行npm install，修改如图
并且修改
"devDependencies": {
…………
"css-loader": "^0.26.1", //在这个下面添加stylus
//必须要添加2个关于stylus的依赖库
"stylus-loader": "^2.5.0",
"stylus": "0.52.4",
…………
}
三、wp-rest-api v2使用（官方地址http://v2.wp-api.org/）
比如，如果想要获取wordpress中最新的文章，你可以直接在浏览器中输入：
http://www.egtch.com/wp-json/wp/v2/posts，大家可以通过本站的相关api去访问
如果想获取指定的文章（按文章ID），可以输入：
http://www.egtch.com/wp-json/wp/v2/posts/1
获取第一页的文章
http://www.egtch.com/wp-json/wp/v2/posts?page=1 第二页page=2以此类推
更多关于wp-rest-api用法，请参考官方文档api
四、进入vue开发
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/VueEgtch，如果你喜欢本实例，请记得在github上给我加星哦！
演示地址：
http://www.egtch.com/VueEgtch/
本程序会后续还会进行相应的更新维护，希望大家关注，也希望大家关注vuejs