vue后台管理系统 vue3+vite+pinia+elementui+axios下

这是一个基于Vue 3、Vite、Pinia、Element UI和Axios的后台管理系统的简单框架设置。以下是一个简单的实例代码：

1. 安装依赖：

npm install

2. 项目结构可能如下所示：

src
|-- api
|   |-- index.js
|-- assets
|-- components
|-- store
|   |-- index.js
|-- styles
|-- views
|-- App.vue
|-- main.js
|-- vite-env.d.ts

3. vite-env.d.ts 文件用于声明环境变量：

/// <summary> Declares environment variables. </summary>
 
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string;
}

4. main.js 是 Vue 应用程序的入口点：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import './styles/index.css';
import router from './router';
import store from './store';
import './api/index';
 
const app = createApp(App);
 
app.use(ElementPlus);
app.use(store);
app.use(router);
 
app.mount('#app');

5. api/index.js 用于集中管理 API 请求：

import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
});
 
export default apiClient;

6. store/index.js 用于使用 Pinia 管理状态：

import { createPinia } from 'pinia';
 
const store = createPinia();
 
export default store;

7. App.vue 是根组件：

<template>
  <div id="app">
    <el-button @click="fetchData">Fetch Data</el-button>
  </div>
</template>
 
<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import api from '@/api';
 
export default defineComponent({
  setup() {
    const store = useStore();
 
    const fetchData = async () => {
      try {
        const response = await api.get('/some-endpoint');
        store.dispatch('updateData', response.data);
      } catch (error) {
        console.error('An error occurred while fetching data:', error);
      }
    };
 
    return {
      fetchData,
    };
  },
});
</script>

8. 在 views 目录下可以包含更多的 Vue 组件，它们将由 Vue Router 在 main.js 中定义和使用。

这个框架提供了一个基础，您可以根据自己的需求进行扩展和定制。记得在实际应用中，您还需要设置 Vue Router、Vuex 或 Pinia 的状态管理，并且要处理权限、国际化等其他常见的后台管理系统需求。