这是一个基于Vue 3、Vite、Pinia、Element UI和Axios的后台管理系统的简单框架设置。以下是一个简单的实例代码：
- 安装依赖：
npm install
- 项目结构可能如下所示：
src
|-- api
| |-- index.js
|-- assets
|-- components
|-- store
| |-- index.js
|-- styles
|-- views
|-- App.vue
|-- main.js
|-- vite-env.d.ts
vite-env.d.ts 文件用于声明环境变量：
/// <summary> Declares environment variables. </summary>
interface ImportMetaEnv {
readonly VITE_API_BASE_URL: string;
}
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');
api/index.js 用于集中管理 API 请求：
import axios from 'axios';
const apiClient = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
});
export default apiClient;
store/index.js 用于使用 Pinia 管理状态：
import { createPinia } from 'pinia';
const store = createPinia();
export default store;
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>
- 在
views 目录下可以包含更多的 Vue 组件，它们将由 Vue Router 在 main.js 中定义和使用。
这个框架提供了一个基础，您可以根据自己的需求进行扩展和定制。记得在实际应用中，您还需要设置 Vue Router、Vuex 或 Pinia 的状态管理，并且要处理权限、国际化等其他常见的后台管理系统需求。