vuejs2 + wp-rest-api開發web app

djfml 發布于2019-08-20 15:09 / 3181人閱讀

摘要：之前我寫了一篇利用，與制作一個屬于自己博客的移動，使用的是的方式進行的開發，今天我就說一下使用與開發一個的方法。

之前我寫了一篇《利用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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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