vuejs2 + wp-rest-api开发web app

djfml 发布于2019-08-20 15:09 / 3085人阅读

摘要：之前我写了一篇利用，与制作一个属于自己博客的移动，使用的是的方式进行的开发，今天我就说一下使用与开发一个的方法。

之前我写了一篇《利用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目录下生成如下目录结构 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",
…………
}

三、wp-rest-api v2使用

（官方地址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

四、进入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/V...，如果你喜欢本实例，请记得在github上给我加星哦！
演示地址：
http://www.egtch.com/VueEgtch/
本程序会后续还会进行相应的更新维护，希望大家关注，也希望大家关注vuejs

超融合服务器混合云 app动态web开发 office web apps office?web?app office?web?app?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82039.html

使用VUEJS2.0制作音乐播放器

摘要：研究了天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开的操作，刚开始学习，还是会经常使用到操作。做播放器的想法来源于之前本人做的开发此文章的灵感。研究了2天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开jQuery的DOM操作，刚开始学习VUE，还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点，等待往后学习的差不多了，我会再改...

CNZPH 2019-08-29 12:15 评论0 收藏0
使用VUEJS2.0制作音乐播放器

摘要：研究了天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开的操作，刚开始学习，还是会经常使用到操作。做播放器的想法来源于之前本人做的开发此文章的灵感。研究了2天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开jQuery的DOM操作，刚开始学习VUE，还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点，等待往后学习的差不多了，我会再改...

EdwardUp 2019-08-20 15:14 评论0 收藏0
使用VUEJS2.0制作音乐播放器

摘要：研究了天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开的操作，刚开始学习，还是会经常使用到操作。做播放器的想法来源于之前本人做的开发此文章的灵感。研究了2天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开jQuery的DOM操作，刚开始学习VUE，还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点，等待往后学习的差不多了，我会再改...

lwx12525 2019-08-01 16:32 评论0 收藏0
【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0