vue3 简单的页面基础模板

代码如下，创建页面的时候方便复制

<template>
    <div class="app-container">
        <el-card>
            <div>
                {{ state.title }}
            </div>
            <div>
                <el-select v-model="state.schoolID" class="select-level" size="default" placeholder="请选择校区" clearable>
                    <el-option v-for="item in schoolList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts" name="tasks">
import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
const state = reactive({
    title: '更新',
    schoolID:null,
    schoolList: [
        {
            id: 1,
            name: "小"
        },
        {
            id: 2,
            name: "大"
        }
    ],
})
// 这样暴露出来后页面可以直接使用schoolList,而不需要state.schoolList
const { schoolList } = toRefs(state)
onMounted(() => {
})
</script>
<style scoped="scoped" lang="scss">
.app-container {
    padding: 15px
}
</style>