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

最新推荐文章于 2024-08-14 20:09:38 发布

「已注销」

最新推荐文章于 2024-08-14 20:09:38 发布

阅读量749

点赞数

本文链接：https://blog.csdn.net/zhonghua_csdn/article/details/89877286

版权

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

摘要由CSDN通过智能技术生成

新建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>