一段代码,只要是要使用msg,显示正常,浏览器正常运行,F12没有报错,但是编译报错。
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/126950400546191.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit)
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/568360400546159.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit)
下面是home页面的完整代码:
<template>
<div class="home">这是home页</div>
<div>
<el-table
:data="tableData.slice((page.index - 1) * page.size, page.index * page.size)"
style="width: 90%"
size="mini"
>
<el-table-column prop="studentId" label="Id" />
<el-table-column prop="studentNo" label="No" />
<el-table-column prop="studentName" label="Name" />
</el-table>
<Pagination :total="page.total" @pageChange="pageChange"></Pagination>
</div>
<el-button type="success" plain @click="$router.push('/about')">跳转about页</el-button>
<div>{{ weather.city }}</div>
<HelloWorld></HelloWorld>
</template>
<script lang="ts">
// 导入
import HelloWorld from "@/components/HelloWorld.vue";
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getWeather } from "@/api/weather";
import { getStudent } from "@/api/student";
import Pagination from "@/components/Pagination.vue";
export default {
name: "Home",
components: {
HelloWorld,
Pagination,
},
setup() {
onMounted(() => {
student();
Weather();
setInterval(() => {
Weather();
}, 1000 * 60 * 60);
});
const data = reactive({
tableData: [],
weather: {},
page: {
total: 0,
index: 1,
size: 10,
} as any,
});
function Weather() {
getWeather().then((res: any) => {
data.weather = res;
console.log(res);
});
}
function student() {
getStudent().then((res: any) => {
data.tableData = res.data;
console.log(res.data);
data.page.total = res.data.length;
});
}
function pageChange(item: any) {
data.page.index = item.currentPage;
data.page.size = item.pageSize;
console.log(data.page.index, data.page.size);
}
return {
...toRefs(data),
onMounted,
pageChange,
};
},
};
</script>
<style scoped lang="scss">
div {
margin: 10px;
}
</style>