vue下载配置---32位win7

菜鸟教程下载的版本低
https://www.jb51.net/article/146689.htm
配置
axios安装配置
https://www.kancloud.cn/wsj-/vue/645840

npm run dev

HelloWorld.vue

vue数据渲染

<template>
  <div id="app">
    <table class="table">
        <colgroup>
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>用户名</th>
            <th>id</th>
            <th>操作时间</th>
          </tr> 
         <tr v-for='a in yzmId'>
            <th>{{a.clientId}}</th>
            <th>{{a.clientName}}</th>
         </tr>
        </thead>
      </table>
      
      <div id="one" >
      <v-page :setting="pageSet" @page-chage="pageChange"></v-page>
      </div>
    </div>
</template>

跨域，json

<script>
export default { 
     data:function () {  
             return{        
                 yzmId:'' 
                    }}, 
                  pageSet:{
                    totalRow:0,
                    pageSizeMenu:[20,100]
                  },
        methods:{
          pageChange(pInfo){
            console.log(pInfo);
          }
        },
    mounted:function () {  
            var self=this; 
            this.$axios.get("/Client/selectAllClients",{emulateJSON:true}).then(function (response){
            self.yzmId=response.data.pageInfo.list;
    
        }).catch(function (error) {
          console.log("error init."+error)
        }); }}
</script>

<style scoped>
#one{
  position:fixed;
  top:700px;
  right:200px;
}

</style>

index.js

/*引入Vue框架*/
import Vue from 'vue';
/*引入资源请求插件*/
import Axios from 'axios';
/*使用axios插件*/
Vue.prototype.$axios = Axios;

Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';
export default({
});

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './axios';
import VuePageinate from 'vue-paginate'
import vPage from 'v-page';


Vue.config.productionTip = false;
Vue.use(VuePageinate)
Vue.use(vPage);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '<App/>'
})