安装axios - Vite小白教程

打开当前项目，在当前项目下执行以下命令安装

npm install axios

我的接口地址是：http://t.weather.itboy.net/api/weather/city/101030100

我在vite.config.js中添加以下代码

  server: {
    proxy: {
      //"/api": "http://t.weather.itboy.net/",
      //对以/api开头的请求进行代理
      "/api": {
        // 代理的目标地址
        target: "http://t.weather.itboy.net/",
        //设置允许跨域
        changeOrigin: true,
        // 路径重写
        rewrite: (path) => path.replace(/^/api/, ""),
      },
    },
  },

vite.config.js文件完整代码如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      //"/api": "http://t.weather.itboy.net/",
      //对以/api开头的请求进行代理
      "/api": {
        // 代理的目标地址
        target: "http://t.weather.itboy.net/",
        //设置允许跨域
        changeOrigin: true,
        // 路径重写
        rewrite: (path) => path.replace(/^/api/, ""),
      },
    },
  },
});

我们在/src/components/目录下，新建axios.vue文件，编写以下代码

<template>
    <h3>进行数据请求</h3>
    <dl v-for="sites in info">
        <dd> 感谢：{{sites.message}}</dd>
    </dl>

</template>
  
<script setup>
import { reactive, onMounted } from 'vue';
import axios from 'axios'

const info = reactive({})


onMounted(() => {
    const api = "/api/weather/city/101030100"
    axios.get("/api" + api).then((response) => {
        //console.log(response.data)
        //console.log(response.data.message)
        info.value = response.data;
    })
});

</script>
  

在项目的App.vue中添加以下代码,引入并使用组件

//引入组件
import axios from './components/axios.vue'
//使用组件
<axios />

App.vue文件完整代码如下：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import axios from './components/axios,.vue';
</script>
  
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <axios />

</template>
  
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
  

若您此时在运行项目，请将项目关闭，重新运行，在当前目录（按下Ctrl+c，Enter键，输入y，Enter键）执行以下命令

npm run dev

您可看到代码起到效果了