vue3.0 + vite (一)页面渲染

vue3.0 + vite (一)页面渲染

<template>
  <el-card class="account-container">
    <!-- 渲染数据 -->
    <div class="title">{{text}}</div>
  </el-card>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue"; //引入vue
import { ElMessage } from "element-plus"; //elementUI库
import axios from "@/utils/axios"; //axios请求地址
export default {
  name: "Introduce",
  setup() {
    //定义字段
    const state = reactive({
      text: "标题",
      message: "我是一条消息",
    });
    // 获取列表
    const getCarousels = () => {
      state.loading = true;
      axios
        .post("/user/order/showList", {
          params: {},
        })
        .then((res) => {
          console.log(res);
        });
    };
    //页面挂载
    onMounted(() => {
      getCarousels();
    });
    //将定义的数据全部返回给setup函数
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style scoped>
/* 样式 */
.title {
  font-size: 50px;
}
</style>