安装 axios - Vite 小白教程

1
  server: {
2
    proxy: {
3
      //"/api": "http://t.weather.itboy.net/",
4
      //对以/api开头的请求进行代理
5
      "/api": {
6
        // 代理的目标地址
7
        target: "http://t.weather.itboy.net/",
8
        //设置允许跨域
9
        changeOrigin: true,
10
        // 路径重写
11
        rewrite: (path) => path.replace(/^/api/, ""),
12
      },
13
    },
14
  },

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

4
// https://vitejs.dev/config/
5
export default defineConfig({
6
  plugins: [vue()],
7
  server: {
8
    proxy: {
9
      //"/api": "http://t.weather.itboy.net/",
10
      //对以/api开头的请求进行代理
11
      "/api": {
12
        // 代理的目标地址
13
        target: "http://t.weather.itboy.net/",
14
        //设置允许跨域
15
        changeOrigin: true,
16
        // 路径重写
17
        rewrite: (path) => path.replace(/^/api/, ""),
18
      },
19
    },
20
  },
21
});

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

7
</template>
8

9
<script setup>
10
import { reactive, onMounted } from 'vue';
11
import axios from 'axios'
12

13
const info = reactive({})
14

15

16
onMounted(() => {
17
    const api = "/api/weather/city/101030100"
18
    axios.get("/api" + api).then((response) => {
19
        //console.log(response.data)
20
        //console.log(response.data.message)
21
        info.value = response.data;
22
    })
23
});
24

25
</script>

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

1
<script setup>
2
// This starter template is using Vue 3 <script setup> SFCs
3
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
4
import HelloWorld from './components/HelloWorld.vue'
5
import axios from './components/axios,.vue';
6
</script>
7

8
<template>
9
  <div>
10
    <a href="https://vitejs.dev" target="_blank">
11
      <img src="/vite.svg" class="logo" alt="Vite logo" />
12
    </a>
13
    <a href="https://vuejs.org/" target="_blank">
14
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
15
    </a>
16
  </div>
17
  <HelloWorld msg="Vite + Vue" />
18
  <axios />
19

20
</template>
21

22
<style scoped>
23
.logo {
24
  height: 6em;
25
  padding: 1.5em;
26
  will-change: filter;
27
}
28

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

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