安裝axios – Vite小白教程

打開當(dāng)前項目，在當(dāng)前項目下執(zhí)行以下命令安裝

npm install axios

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

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

  server: {
    proxy: {
      //"/api": "http://t.weather.itboy.net/",
      //對以/api開頭的請求進(jìn)行代理
      "/api": {
        // 代理的目標(biāo)地址
        target: "http://t.weather.itboy.net/",
        //設(shè)置允許跨域
        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開頭的請求進(jìn)行代理
      "/api": {
        // 代理的目標(biāo)地址
        target: "http://t.weather.itboy.net/",
        //設(shè)置允許跨域
        changeOrigin: true,
        // 路徑重寫
        rewrite: (path) => path.replace(/^/api/, ""),
      },
    },
  },
});

我們在/src/components/目錄下，新建axios.vue文件，編寫以下代碼

<template>
    <h3>進(jìn)行數(shù)據(jù)請求</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  target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a  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>
  

若您此時在運(yùn)行項目，請將項目關(guān)閉，重新運(yùn)行，在當(dāng)前目錄（按下Ctrl+c，Enter鍵，輸入y，Enter鍵）執(zhí)行以下命令

npm run dev

您可看到代碼起到效果了