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

最新推荐文章于 2025-09-29 13:50:33 发布

原创最新推荐文章于 2025-09-29 13:50:33 发布 · 796 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何新建一个Vue项目，并详细讲述了引入axios库的步骤，包括在main.js中的引用配置和在config的index.js里的设置。通过在app.vue中进行测试，验证了数据获取的功能。项目初步结构分为头部、中部和尾部三个部分。

新建vue项目：
http://www.jianshu.com/p/de410cefd788

引入axios

npm install axios -save

添加引用,main.js：

import axios from 'axios'

Vue.prototype.$http = axios

配置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>