一.

安装配置nodejs

 

npm create vite@latest

 npm install vue-router

npm install axios

npm install element-plus --save

npm run dev 

https://element-plus.org/zh-CN/#/zh-CN

 

 

 

 

 

 

 

 

 新建项目：

 easy.vue

<script setup></script><!--绑定数据-->
<template>
    <div class="common-layout" style="height:100%；">
      <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>

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>

 App.vue

<script setup>

</script>

<template>
  <router-view></router-view><!--视图路由的占位符，所有的页面在这里面演示-->
</template>

<style scoped>

</style>