vite vue3 axios

Vite 是一个基于现代 JavaScript（ESNext）的前端构建工具，它专注于快速的冷启动和快速的热模块重载。它与 Vue3 和 Axios 搭配使用可以实现快速开发现代化的 Vue3 应用程序。

要在 Vite 中使用 Vue3，首先需要安装 Vue3 的依赖。可以使用以下命令安装：

npm install vue@next

然后，在你的项目中创建一个 `main.ts` 文件，并添加以下内容：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

接下来，安装 Vite：

npm install -g create-vite

使用以下命令创建一个新的 Vite 项目：

create-vite my-vue-project --template vue-ts

进入项目目录：

cd my-vue-project

运行开发服务器：

npm run dev

现在，你已经配置好了 Vite 和 Vue3。接下来，可以使用 Axios 来进行网络请求。

首先，安装 Axios：

npm install axios

然后，在你的代码中使用 Axios 发起网络请求。例如，在你的 `App.vue` 文件中，你可以添加以下代码：

import { defineComponent, reactive, watchEffect } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const data = reactive([]);

    watchEffect(() => {
      axios.get('https://api.example.com/data')
        .then(response => {
          data = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    });

    return {
      data
    };
  }
});

这是一个简单的示例，它会在组件加载时使用 Axios 发起一个 GET 请求，并将返回的数据赋值给 `data` 变量。你可以根据你的需要进行自定义和扩展。

希望这能帮到你开始使用 Vite、Vue3 和 Axios 进行开发！如有更多问题，请随时提问。