一、下载相关包
npm install
npm install vue-router //路由
npm install axios
npm install element-plus --save //组件
二、构建一个简单的项目
1.创建router文件夹，在里面创建一个index.js文件用来管理不同页面的路由
import {createRouter,createWebHashHistory} from 'vue-router'const router=createRouter({history:createWebHashHistory(),routes:[{path:'/easy',component:()=>import("../views/easy.vue"),children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]}]}
);
export default router;2.设置main.js文件，使用配置的router和ElementPlus
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(router).use(ElementPlus).mount('#app')
3.创建util文件夹，在里面创建http.js文件
import axios from 'axios';export default function (options) {//配置每次发送请求都从sessionStorage中获取名字叫token的数据,//添加到请求头部的Authorization属性中//Object.assign用于合并对象的数据options.headers = Object.assign({ Authorization: sessionStorage.getItem('token') },options.headers || {});//axios() 返回一个promise对象，用于异步请求//options是一个对象，其中包含了许多用于配置请求的参数，//例如请求的url、请求方法（GET、POST等）、请求头等return axios(options).then(({ status, data, statusText }) => {//该函数在请求成功并返回数据时被调用//status：HTTP状态码，例如200表示请求成功。//data：服务器返回的数据。// statusText：HTTP状态文本，例如"OK"表示请求成功。console.log(data);if (status == 200) {return data;} else {throw new Error(statusText);}}).catch(e=>{return Promise.reject(e);//return Promise.reject(e.message);});
}4.创建api文件夹，在里面创建index.js文件，用来通过在get方法中输入地址就能获取改地址的页面
import http from '../util/http.js';const API={get:(url)=>{return http({url:url,method:'get'})}
};
export default API;5.创建代理，在vite.config.js文件中
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{// 配置vite冷启动项目自动使用浏览器访问首页open:true,proxy: { '/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}}
})
在地址输入/api就相当于'http://localhost:8080'，以后修改比较方便
6.创建views文件夹，在里面写我们需要的页面
（1）创建一个easy.vue文件
<script setup></script>
<template><div class="common-layout"><el-container><el-header>Header</el-header><el-container><el-aside width="200px"><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo"default-active="2"text-color="#fff"@open="handleOpen"@close="handleClose"router="true"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>员工管理</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1" route="stafflist">员工列表</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template>
<style></style>
里面包含一个容器，在容器的左侧有一个表格，我们只设置了第一个名字为员工列表，在里面设置route属性用来跳转到当前页面
（2）创建stafflist.vue文件
<script setup>
import {ref,onMounted} from 'vue'
import easyapi from '../api'
//定义绑定的数据
const tableData=ref([]);
//挂载页面时查询数据
onMounted(async function(){let result=await easyapi.get("/api/staff");tableData.value=result.data;
});
</script><template><el-table:data="tableData"style="width: 100%"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="code" label="编号" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="salary" label="薪资" /></el-table>
</template>
<style>
</style>首先获取数据，存在tableData中，然后通过表格展示出来。
由于我们在router文件夹中的index.js文件中设置了Stafflist的路由，所以在easy页面点击route属性为stafflist的表格时，将会自动获取路由信息，从而跳转到对应的页面。
因为是部分的页面发生改变，所以路由要在总页面的里面用children编写。