项目搭建篇：前端界面（vue）

柔情只为你懂 2021-06-24 16:11 467阅读 0赞

新建vue项目：  
[http://www.jianshu.com/p/de410cefd788][http_www.jianshu.com_p_de410cefd788]

引入axios

npm install axios -save

![2789632-359b6e6126a58bdf.png][]

添加引用,main.js：

import axios from 'axios'
    
    Vue.prototype.$http = axios

![2789632-9866dd48452f4a13.png][]

配置cofig下的index.js

proxyTable: {
          '/api': {
            target: 'http://localhost:8032',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/api'
            }
          }
        },

在app.vue里做个测试，看看能不能获取数据

<template>
      <div id="app">
        {
        {Theme}}
        <router-view></router-view>
      </div>
    </template>
    
    <script>
      export default {
        data () { return {Theme: '', name: 'mynae'} },
        mounted: function () {
          this.$http.get('/api/Index/GetTheme').then(response => {
            console.log(response)
            console.log(response.data)
            console.log(response.data.Name)
            this.Theme = response.data.Name
          })
        }
      }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![2789632-72906c63ca9f7aac.png][]

先搭建三块：  
头，中间，尾部

![2789632-44e84ea1d8bda4af.png][]

![2789632-de944bf672e64edd.png][]

[http_www.jianshu.com_p_de410cefd788]: https://www.jianshu.com/p/de410cefd788
[2789632-359b6e6126a58bdf.png]: /images/20210615/97c01d523da348ecaf844892b3b92bfe.png
[2789632-9866dd48452f4a13.png]: /images/20210615/065f52aa18ab4342bac2e10faa3a00fd.png
[2789632-72906c63ca9f7aac.png]: /images/20210615/46df8f2b77e6482d8fb664a347795554.png
[2789632-44e84ea1d8bda4af.png]: /images/20210615/3795e6249f274531a0cbee6313cac74d.png
[2789632-de944bf672e64edd.png]: /images/20210615/2d1a32735e7a4abcb36b5eb256b64351.png