當前位置:首頁 > 芯聞號 > 充電吧
[導讀]原文網(wǎng)址鏈接:vuejs2 + wp-rest-api開發(fā)web app 之前我寫了一篇《利用Cordova,jqurey與wp-rest-api制作一個屬于自己博客的移動APP》,使用的是jQu

原文網(wǎng)址鏈接:vuejs2 + wp-rest-api開發(fā)web app


之前我寫了一篇《利用Cordova,jqurey與wp-rest-api制作一個屬于自己博客的移動APP》,使用的是jQuery mobile的方式進行web app的開發(fā),今天我就說一下使用vuejs 與 wp-reset-api開發(fā)一個web app的方法。
先看看做好以后的效果吧:


一、首先安裝nodejs

安裝方法請自行去官方網(wǎng)站查看

二、安裝vue-cli

1、直接打開nodejs的命令窗口輸入以下命令:
npm install -g vue-cli //全局安裝vue-cli
vue init webpack egtch //生成項目名為egtch的模板,這里的項目名egtch隨你自己寫
輸入這個目錄后會出現(xiàn)如下所示


? Project name 自己填寫一個項目名稱 ? Project description (A Vue.js project)
這里是項目描述,隨便填寫 ? Author 這個是開發(fā)者信息,會自動獲取,也可以自己設(shè)置

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(路由)功能,以便我們進行相應(yīng)的開發(fā)。 ? 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、然后我們在執(zhí)行以下命令 cd egtch //進入項目所在目錄 npm install //初始化安裝依賴
這樣我們在回來看我們的目錄結(jié)構(gòu),將在egtch目錄下生成如下目錄結(jié)構(gòu) vue-cli項目目錄


npm run dev //在瀏覽器中運行當前的vue項目
這樣就可以看到vue-cli默認的一個頁面展現(xiàn)在我們眼前了,如下圖:
vue-cli演示頁面


4、在我們開發(fā)中會用到vue-resource與stylus
我們可以通過命令 npm install vue-resource -save來進行下載vue-resource安裝
npm install stylus -save
當然也可以修改egtch根目錄下的packge.json文件中的代碼后,在執(zhí)行npm install,修改如圖
packge.json修改



并且修改

"devDependencies": {
…………
"css-loader": "^0.26.1", //在這個下面添加stylus
//必須要添加2個關(guān)于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/...,大家可以通過本站的相關(guān)api去訪問 如果想獲取指定的文章(按文章ID),可以輸入:?http://www.egtch.com/wp-json/...?獲取第一頁的文章http://www.egtch.com/wp-json/...?第二頁page=2以此類推 更多關(guān)于wp-rest-api用法,請參考官方文檔api

四、進入vue開發(fā)

1、打開根目錄下的index.html,修改title,并且在head中增加手機端設(shè)備支持代碼
并且導入reset.css(自行到網(wǎng)上尋找適合自己的reset.css),并且將其放在static目錄中
2、在main.js中引入vue-resource

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

3、在src/assets下新建一個css目錄,并在目錄下建立一個public.styl文件,其代碼如下
注意:使用stylus中,縮進必須正確,否則就會出現(xiàn)嚴重的問題

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)
//手機端真正實現(xiàn)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獲取文章內(nèi)容




7、再新建一個Categories.vue讀取分類







8、建立一個Postcat.vue來獲取分類目錄下的文章




? ? ? 以上我們就可以完成了獲得文章以及分類目錄下的文章的相關(guān)代碼??瓷先ナ遣皇呛芎唵?,使用vuejs確實可以讓我們省去很多的DOM操作。
? ? ? 更多代碼和實例,請直接查看本項目在github中的實例地址為:
? ? ??https://github.com/king2088/V...,如果你喜歡本實例,請記得在github上給我加星哦!
? ? ? 演示地址:
? ? ? http://www.egtch.com/VueEgtch/
? ? ? 本程序會后續(xù)還會進行相應(yīng)的更新維護,希望大家關(guān)注,也希望大家關(guān)注vuejs



本站聲明: 本文章由作者或相關(guān)機構(gòu)授權(quán)發(fā)布,目的在于傳遞更多信息,并不代表本站贊同其觀點,本站亦不保證或承諾內(nèi)容真實性等。需要轉(zhuǎn)載請聯(lián)系該專欄作者,如若文章內(nèi)容侵犯您的權(quán)益,請及時聯(lián)系本站刪除。
換一批
延伸閱讀

9月2日消息,不造車的華為或?qū)⒋呱龈蟮莫毥谦F公司,隨著阿維塔和賽力斯的入局,華為引望愈發(fā)顯得引人矚目。

關(guān)鍵字: 阿維塔 塞力斯 華為

加利福尼亞州圣克拉拉縣2024年8月30日 /美通社/ -- 數(shù)字化轉(zhuǎn)型技術(shù)解決方案公司Trianz今天宣布,該公司與Amazon Web Services (AWS)簽訂了...

關(guān)鍵字: AWS AN BSP 數(shù)字化

倫敦2024年8月29日 /美通社/ -- 英國汽車技術(shù)公司SODA.Auto推出其旗艦產(chǎn)品SODA V,這是全球首款涵蓋汽車工程師從創(chuàng)意到認證的所有需求的工具,可用于創(chuàng)建軟件定義汽車。 SODA V工具的開發(fā)耗時1.5...

關(guān)鍵字: 汽車 人工智能 智能驅(qū)動 BSP

北京2024年8月28日 /美通社/ -- 越來越多用戶希望企業(yè)業(yè)務(wù)能7×24不間斷運行,同時企業(yè)卻面臨越來越多業(yè)務(wù)中斷的風險,如企業(yè)系統(tǒng)復雜性的增加,頻繁的功能更新和發(fā)布等。如何確保業(yè)務(wù)連續(xù)性,提升韌性,成...

關(guān)鍵字: 亞馬遜 解密 控制平面 BSP

8月30日消息,據(jù)媒體報道,騰訊和網(wǎng)易近期正在縮減他們對日本游戲市場的投資。

關(guān)鍵字: 騰訊 編碼器 CPU

8月28日消息,今天上午,2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會開幕式在貴陽舉行,華為董事、質(zhì)量流程IT總裁陶景文發(fā)表了演講。

關(guān)鍵字: 華為 12nm EDA 半導體

8月28日消息,在2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會上,華為常務(wù)董事、華為云CEO張平安發(fā)表演講稱,數(shù)字世界的話語權(quán)最終是由生態(tài)的繁榮決定的。

關(guān)鍵字: 華為 12nm 手機 衛(wèi)星通信

要點: 有效應(yīng)對環(huán)境變化,經(jīng)營業(yè)績穩(wěn)中有升 落實提質(zhì)增效舉措,毛利潤率延續(xù)升勢 戰(zhàn)略布局成效顯著,戰(zhàn)新業(yè)務(wù)引領(lǐng)增長 以科技創(chuàng)新為引領(lǐng),提升企業(yè)核心競爭力 堅持高質(zhì)量發(fā)展策略,塑強核心競爭優(yōu)勢...

關(guān)鍵字: 通信 BSP 電信運營商 數(shù)字經(jīng)濟

北京2024年8月27日 /美通社/ -- 8月21日,由中央廣播電視總臺與中國電影電視技術(shù)學會聯(lián)合牽頭組建的NVI技術(shù)創(chuàng)新聯(lián)盟在BIRTV2024超高清全產(chǎn)業(yè)鏈發(fā)展研討會上宣布正式成立。 活動現(xiàn)場 NVI技術(shù)創(chuàng)新聯(lián)...

關(guān)鍵字: VI 傳輸協(xié)議 音頻 BSP

北京2024年8月27日 /美通社/ -- 在8月23日舉辦的2024年長三角生態(tài)綠色一體化發(fā)展示范區(qū)聯(lián)合招商會上,軟通動力信息技術(shù)(集團)股份有限公司(以下簡稱"軟通動力")與長三角投資(上海)有限...

關(guān)鍵字: BSP 信息技術(shù)
關(guān)閉
關(guān)閉