1.下载路由组件

java"> npm i vue-router

2.创建router文件夹

3.创建router.js文件

javascript">import {createRouter, createWebHistory} from "vue-router"let router = createRouter({history: createWebHistory(),routes: [{path: "/",component: () => import("../components/StudyTable.vue")}]
})
export default router;

4.主文件中配置路由

javascript">import {createApp} from 'vue'
import App from './App.vue'
import router from './router/router.js'
let app = createApp(App);
app.use(router);
app.mount('#app')

5.下载element-plus

java"> npm install element-plus --save

6.注册组件

javascript">import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
let app = createApp(App);
app.use(router);
app.use(ElementPlus);

7.使用饿了么组件

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script lang="ts" setup>javascript">
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

8.展示效果

9.axios使用封装流程

• 下载axios

javascript">npm i axios

• 封装axios

javascript">import axios from 'axios';// 创建一个 Axios 实例
const apiClient = axios.create({baseURL: 'http://localhost:8083', // 设置你的API基础URLtimeout: 5000, // 根据需要调整超时时间headers: {'Content-Type': 'application/json',},
});// 定义通用的请求方法
export function request({ method, url, data = null }) {return apiClient({method,url,data}).then(response => response.data).catch(error => {console.error(`There was an error with the ${method.toUpperCase()} request to ${url}:`, error);throw error;});
}// 定义具体的请求函数
export function get(url) {return request({ method: 'get', url });
}export function post(url, data) {return request({ method: 'post', url, data });
}export function put(url, data) {return request({ method: 'put', url, data });
}export function deleteRequest(url) {return request({ method: 'delete', url });
}