1.使用vite创建项目

 npm init vue@latest

2.项目初始化

2.1 进入mock文件夹，并安装相关依赖

cd mock 
npm install

2.2 修改App.vue文件

<template>
  <div class="app">
    app
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="less" scoped>
.app{

}
</style>

2.3 安装之后用到的依赖

安装仅开发阶段依赖的第三方包less和mockjs类型声明文件，快速编写样式（放在文件package.json里面的"devdependencies"）

npm install  @types/mockjs  less -D

安装在开发和上线都需要的第三方包（mockjs，axios，element-plus）（放在文件package.json里面的"dependencies"）

npm install mockjs axios element-plus  -S

3.使用ElementPlus的Table表格组件

3.1 更改默认样式

删除assets文件夹下的所有文件，更改main.css并保留

main.css

*{
  margin: 0;
  padding: 0;
}

3.2 完整导入element-plus

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'  //新增
import 'element-plus/dist/index.css'    //新增
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)                    //新增
app.mount('#app')

3.3 使用Table表格组件

App.vue

<template>
  <div class="app">
    <h2>入学时间表</h2>
    <el-table :data="EnrollmentTimeTableData" style="width: 80%">
      <el-table-column align="center" prop="date" label="入学日期" width="170" />
      <el-table-column align="center" prop="name" label="姓名" width="100" />
      <el-table-column align="center" prop="nickname" label="微信昵称" width="100" />
      <el-table-column align="center" prop="imgAvactar" label="微信头像" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img :src="scope.row.imgAvactar"  min-width="70" height="70" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱" width="150" />
      <el-table-column align="center" prop="sex" label="性别" width="60" />
      <el-table-column align="center" prop="age" label="年龄" width="60" />
      <el-table-column align="center" prop="address" label="居住地址" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const EnrollmentTimeTableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    nickname: '网名',
    imgAvactar: 'https://pic.ntimg.cn/file/20200605/23605973_173021196899_2.jpg',
    email: 'fvilfpz@163.com',
    sex: '男',
    age: "18",
    address: 'No. 189, Grove St, Los Angeles',
  }
])
</script>

<style lang="less" scoped>
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

运行效果：

4.使用mock模拟的数据替换tableData数据

4.1.在src文件夹下新建mock文件夹，在mock文件夹下新建api.ts文件,管理所有模拟的数据

api.ts

// mock规则：http://mockjs.com/examples.html
import Mock from "mockjs";
const Random = Mock.Random;

interface IEnrollmentTime {
  code: number;
  msg: string;
  "data|1-10":any[]
}

export function getEnrollmentTime(): IEnrollmentTime {
  return {
    code: 200,
    msg: "获取入学时间成功",
    "data|1-10": [ 
      {
        date: Random.datetime("yyyy-MM-dd HH:mm"),
        name: "@cname()",
        nickname: "@first",
        imgAvactar: Random.image(
          "140x140",
          "#16d46b",
          "#fff",
          "png",
          "Hello World!"
        ),
        email: Random.email("163.com"),
        sex: "@integer(0, 1)",
        age: "@integer(1, 100)",
        address: Random.county(true),
      },
    ],
  };
}

4.2.在mock文件夹下新建index.ts作为出口文件 index.ts

import Mock from "mockjs";
import { getEnrollmentTime } from "./api";

//拦截请求
Mock.mock("/enrollmentTime", "get", getEnrollmentTime());

4.3.在main.ts中导入

import "@/mock";

4.4.修改App.vue文件

<template>
 <div class="app">
   <h2>入学时间表</h2>
   <el-table :data="EnrollmentTimeTableData" style="width: 80%">
     <el-table-column align="center" prop="date" label="入学日期" width="170" />
     <el-table-column align="center" prop="name" label="姓名" width="100" />
     <el-table-column align="center" prop="nickname" label="微信昵称" width="100" />
     <el-table-column align="center" prop="imgAvactar" label="微信头像" width="100">
       <template #default="scope">
         <div style="display: flex; align-items: center">
           <img :src="scope.row.imgAvactar" min-width="70" height="70" />
         </div>
       </template>
     </el-table-column>
     <el-table-column align="center" prop="email" label="邮箱" width="170" />
     <el-table-column align="center" prop="sex" label="性别" width="60" >
       <template #default="scope">
           {{ scope.row.sex ? "男":"女"}}
       </template>
     </el-table-column>
     <el-table-column align="center" prop="age" label="年龄" width="60" />
     <el-table-column align="center" prop="address" label="居住地址" />
   </el-table>
 </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import axios from 'axios'

const EnrollmentTimeTableData = ref()

const getEnrollmentTimeTableData = async () => {
 await axios.get("/enrollmentTime").then(res => {
   console.log(res);
   
   if (res.data?.code == 200) {
     EnrollmentTimeTableData.value = res.data.data;
   }
 })
}
onMounted(() => {
 getEnrollmentTimeTableData()
})

</script>

<style lang="less" scoped>
.app {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
</style>

最终效果：

5.写在最后

更多mock规则尽在：mockjs.com/examples.ht…

Vue3+ts项目使用Mock之本地Mock案例