blackteay/Vue3-Vite-Vant-TS-H5
1
0
Fork 0
mirror of https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git synced 2025-04-06 03:57:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：请求真实数据

Browse Source
This commit is contained in:
tantao 2022-08-25 14:45:55 +08:00
parent cf2924f075
commit 06f33c1dea
1 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/home/Home.vue
View File

@ -1,68 +1,81 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, reactive, ref, toRefs } from 'vue' import { computed, onMounted, reactive, ref, toRefs } from "vue";
import { getList } from "@/api/home";
import logo from "@/assets/logo.png";
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({ const get = async () => {
list: [ const result = await getList();
{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()
onMounted(() => {
get();
});
</script> </script>
<template> <template>
<div> <div>
<CustomHeader title="首页" /> <CustomHeader title="首页" />
<div class="py-3 px-3"> <div class="py-3 px-3">
<div class="title py-2 flex-start align-items-center"> <div class="title py-2 flex-start align-items-center">
<van-image width="36" :src="logo" /> <van-image width="36" :src="logo" />
<span class="fs-1 px-5">Vue3+TS H5开发模板</span> <span class="fs-1 px-5">Vue3+TS H5开发模板</span>
</div> </div>
<div class="subTitle px-3 fs-3 opacity-50"> <div class="subTitle px-3 fs-3 opacity-50">
A Vue3 h5 template with Vant UI A Vue3 h5 template with Vant UI
</div> </div>
</div> </div>
<div class="py-5"> <div class="py-5">
<van-list finished-text="没有更多了"> <van-list finished-text="没有更多了">
<van-cell v-for="(item, index) in list" :key="index" :title="item.title" icon="success" /> <van-cell
</van-list> v-for="(item, index) in list"
</div> :key="index"
</div> :title="item.title"
icon="success"
/>
</van-list>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
h1 { h1 {
display: block;
font-size: 40px;
text-align: center;
padding: 20px 0;
}
ul {
li {
display: block; display: block;
font-size: 40px; font-size: 20px;
text-align: center;
padding: 20px 0; padding: 20px 0;
text-align: center;
} }
ul { }
li {
display: block;
font-size: 20px;
padding: 20px 0;
text-align: center;
}
}
</style> </style>