一、下载相关包
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-menu
active-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编写。
