From 06f33c1dea39ca9b8cc484fc6f5a2389eaba9dfe Mon Sep 17 00:00:00 2001
From: tantao <1416249906@qq.com>
Date: Thu, 25 Aug 2022 14:45:55 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=AF=B7=E6=B1=82=E7=9C=9F?=
 =?UTF-8?q?=E5=AE=9E=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/Home.vue | 119 ++++++++++++++++++++++------------------
 1 file changed, 66 insertions(+), 53 deletions(-)

diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
index 79ca2e9..f80d468 100644
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
@@ -1,68 +1,81 @@
 <script setup lang="ts">
-	import { computed, reactive, ref, toRefs } from 'vue'
-	
-	import logo from '@/assets/logo.png'
+import { computed, onMounted, reactive, ref, toRefs } from "vue";
+import { getList } from "@/api/home";
+import logo from "@/assets/logo.png";
 
-	const useShowList = () => {
-		const state = reactive({
-			list: [
-				{title: 'vite'},
-				{title: 'rem移动端适配'},
-				{title: 'VantUI 组件按需加载'},
-				{title: 'Sass 全局样式'},
-				{title: 'Vuex 状态管理'},
-				{title: 'Pinia 状态管理'},
-				{title: 'Axios 封装及接口管理'},
-				{title: 'Vue-router'},
-				{title: 'vite.config.ts 基础配置'},
-				{title: '检查文件中的env路径'},
-				{title: '配置 proxy 跨域'},
-				{title: '配置 alias 别名'},
-				{title: 'Eslint+Pettier 统一开发规范'},
-				{title: '批量全局注册公共组件'},
-			]
-		})
-		return toRefs(state)
-	}
-	const { list }  = useShowList()
+const useShowList = () => {
+  const state = reactive({
+    list: [
+      { title: "vite" },
+      { title: "rem移动端适配" },
+      { title: "VantUI 组件按需加载" },
+      { title: "Sass 全局样式" },
+      { title: "Vuex 状态管理" },
+      { title: "Pinia 状态管理" },
+      { title: "Axios 封装及接口管理" },
+      { title: "Vue-router" },
+      { title: "vite.config.ts 基础配置" },
+      { title: "检查文件中的env路径" },
+      { title: "配置 proxy 跨域" },
+      { title: "配置 alias 别名" },
+      { title: "Eslint+Pettier 统一开发规范" },
+      { title: "批量全局注册公共组件" },
+    ],
+  });
+  return toRefs(state);
+};
+const { list } = useShowList();
 
+// 请求真实数据
+const get = async () => {
+  const result = await getList();
+};
+
+onMounted(() => {
+  get();
+});
 </script>
 
 <template>
-	<div>
-		<CustomHeader title="首页" />
-		<div class="py-3 px-3">
-			<div class="title py-2 flex-start align-items-center">
-				<van-image width="36" :src="logo" />
-				<span class="fs-1 px-5">Vue3+TS H5开发模板</span>
-			</div>
-			<div class="subTitle px-3 fs-3 opacity-50">
-				A Vue3 h5 template with Vant UI 
-			</div>
-		</div>
-		<div class="py-5">
-			<van-list finished-text="没有更多了">
-				<van-cell v-for="(item, index) in list" :key="index" :title="item.title" icon="success" />
-			</van-list>
-		</div>
-	</div>
+  <div>
+    <CustomHeader title="首页" />
+    <div class="py-3 px-3">
+      <div class="title py-2 flex-start align-items-center">
+        <van-image width="36" :src="logo" />
+        <span class="fs-1 px-5">Vue3+TS H5开发模板</span>
+      </div>
+      <div class="subTitle px-3 fs-3 opacity-50">
+        A Vue3 h5 template with Vant UI
+      </div>
+    </div>
+    <div class="py-5">
+      <van-list finished-text="没有更多了">
+        <van-cell
+          v-for="(item, index) in list"
+          :key="index"
+          :title="item.title"
+          icon="success"
+        />
+      </van-list>
+    </div>
+  </div>
 </template>
 
 
 
 <style lang="scss" scoped>
-  h1 {
+h1 {
+  display: block;
+  font-size: 40px;
+  text-align: center;
+  padding: 20px 0;
+}
+ul {
+  li {
     display: block;
-    font-size: 40px;
-    text-align: center; 
+    font-size: 20px;
     padding: 20px 0;
+    text-align: center;
   }
-  ul {
-    li {
-      display: block;
-      font-size: 20px;
-      padding: 20px 0;
-      text-align: center;
-    }
-  }
+}
 </style>
\ No newline at end of file