VUEJS2 + WP-REST-API Development Web app__c#

Source URL Link: vuejs2 + WP-REST-API Development web App

Before I wrote an article "using Cordova,jqurey and Wp-rest-api to make a mobile app of my own blog," using jquery Mobile to develop web apps, today I'm going to talk about using Vuejs and Wp-reset-api a way to develop a web app.
Let's take a look at the results later:

First, install Nodejs

Installation method please go to the official website to view the second, install VUE-CLI

1, Directly Open nodejs Command window to enter the following command:
NPM install-g VUE-CLI//Global installation VUE-CLI
Vue init webpack egtch//Generate a template with project name Egtch, where the project name Egtch as you write
Entering this directory will appear as shown below

? Project name fills in one of the item names yourself? Project Description (A vue.js project)
Here is a description of the project, casually fill in? Author This is the developer information, it will be automatically acquired, you can set up your own

Runtime + compiler:recommended for most users runtime-only:about 6KB lighter min+gzip, but templates (or any Vue-specifi C HTML) are
Only allowed in. Vue Files-render functions are required elsewhere

See this, just jump in the carriage? Install Vue-router? (y/n)
Here choose Y, install vue-router (routing) function, so that we can develop accordingly. Use Eslint to lint your
Code? (y/n)//If you want to use the ESLINT hint, then you choose Y, do not know what this is the classmate, directly choose N Bar. Setup
Unit tests with Karma + Mocha? These two are JS test framework, select n? Setup e2e tests with
Nightwatch? (y/n)//This also directly select N

2, the above steps are completed, will see the following reminders OH

VUE-CLI Generated "Egtch". To get STARTED:CD egtch npm install NPM
Run Dev 3, then we execute the following command CD Egtch//Enter the project directory NPM install//Initialize installation dependencies
So we're coming back to see our directory structure, the following directory structure will be generated in the Egtch directory VUE-CLI project directory

NPM Run dev//Run the current Vue project in the browser
This allows you to see the VUE-CLI default page displayed in front of us, as shown in the following figure:
VUE-CLI Demo Page

4, in our development will use Vue-resource and stylus
We can download Vue-resource installation via the command NPM install Vue-resource-save
NPM Install Stylus-save
Of course, you can also modify the code in the Packge.json file under the Egtch root directory, after performing NPM install, modify the diagram
Packge.json modification

and modify

"Devdependencies": {..........
Css-loader ":" ^0.26.1 ",//Add stylus below this/
//You must add 2 stylus dependent libraries
" Stylus-loader ":" ^2.5.0 ",
" stylus ":" 0.52.4 ", ......
}

iii. use of WP-REST-API v2

(Official address http://v2.wp-api.org/)
For example, if you want to get the latest article in WordPress, you can directly in the browser input: http://www.egtch.com/wp-json/..., you can use the relevant API to access the site if you want to get the specified article (by the article ID), Can enter: http://www.egtch.com/wp-json/... Get the first page of the article http://www.egtch.com/wp-json/... The second page page=2 and so on more about WP-REST-API usage, please refer to official documentation API IV, enter VUE development

1, open the root of the index.html, modify the title, and in the head to increase the phone-side device support code
and import reset.css (Find your own reset.css on the web) and put it in a static directory
2. Introduction of Vue-resource in Main.js

Import Vueresource from ' Vue-resource '
vue.use (Vueresource)

3. Create a new CSS directory under Src/assets and create a public.styl file under the directory, with the following code
Note: In stylus, the indentation must be correct, otherwise there will be a serious problem

Font-rem ($num) font-size ($num/16) rem bg-change ($color) Background $color body background #CCC font-family "Micros  Oft Yahei "," Helvetica neue ", Helvetica,arial,sans-serif font-weight lighter height 100% h1,h2,h3,h4,h5,h6 Color Black border-left 2px #CCC solid margin 10px 0 padding 0 0 0 8px line-height 1 font-rem (18)//Mobile End Real achieve 1px lines. 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. Codeco
  Lorer-container width 90% background #f2f2f2 margin 0 auto color dimgrey overflow auto border 1px #CCC solid Padding 3% font-rem. Wp-caption Text-align Center

4, modify the SRC directory under the App.vue as follows

<template> <div id= "app" > <top></top> <transition:name= "$router. App.pagetransition" &
        Gt <router-view></router-view> </transition> <bottom></bottom> </div> </temp late> <script> import top from './components/top.vue ' import Bottom from './components/bottom.vue ' export defaul t {components:{' top ': top, ' bottom ': Bottom}} </script> <style lang= ' stylus ' rel= ' Stylesheet/stylus "> @import"./assets/css/public.styl "@import"./assets/css/font-awesome.min.css "#app width 100% height 100% dis
    Play table overflow Auto/*right start*/. slide-right-enter-active transition 4s ease. slide-right-enter
    Opacity 0.9;
    Transform Translate3d (100%, 0, 0). Slide-right-leave transform Translate3d (0, 0, 0). slide-right-leave-active Transition all. 4s ease opacity. 5 Transform Translate3d ( -20%, 0, 0)/*right end*//*left.Slide-left-enter-active transition all 4s ease;
    Transform Translate3d (0%, 0, 0); 
    Z-index 1998. Slide-left-enter opacity. 5 Transform Translate3d ( -20%, 0, 0) z-index 1998. Slide-left-leave Transform Translate3d (0, 0, 0). slide-left-leave-active transition all. 4s ease opacity 0.9 transform T
    Ranslate3d (100%, 0, 0)/*left end*/. slide-fade-enter-active transition All 4s ease. slide-fade-leave-active Transition all 4s ease. Slide-fade-enter,. slide-fade-leave-active opacity 0. Slide-fade-enter padding-to
 P 80%. slide-fade-leave-active padding-top-100% </style>

5, we are in the SRC directory under the commponents directory to create a posts.vue to get, the code is as follows:

<template> <div class= "po" > <div class= "Posts" > <div class= "box" v-for= "(item, index) In posts "> <div class=" post "> <router-link:to=" {path: '/article ', query: {Id:posts[index]
            . ID}} ">{{posts[index].title.rendered}}</router-link> <div class=" Line-k "></div> <div class= "posts-img" v-html= "getfirstimg (posts[index].content.rendered)" ></div> <div class = "description" v-html= "Replaceds (posts[index].excerpt.rendered)" ></div> </div> </DIV&G
          T
          <a id= "Pre" @click = "Pre" ><i class= "fa fa-angle-left" aria-hidden= "true" ></i>PREVIOUS</a>