vant搭建

Yi.Vue3.x.Vant/src/App.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <router-view></router-view>
+
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

Yi.Vue3.x.Vant/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

Yi.Vue3.x.Vant/src/components/HelloWorld.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

Yi.Vue3.x.Vant/src/layout/bottom/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
+  <van-tabbar-item icon="home-o" to="/">主页</van-tabbar-item>
+  <van-tabbar-item icon="search">发现</van-tabbar-item>
+
+  <van-tabbar-item>
+    <template #icon="props">
+        <van-icon name="add-square" color="#1989fa" size="3rem" />
+      <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
+    </template>
+  </van-tabbar-item>
+
+  <van-tabbar-item icon="friends-o">商城</van-tabbar-item>
+  <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
+</van-tabbar>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const active = ref(0);
+</script>

Yi.Vue3.x.Vant/src/layout/index.vue

@@ -0,0 +1,13 @@
+
+<script setup  lang="ts">
+    import { ref } from 'vue'
+    import AppBottom  from './bottom/index.vue'
+</script>
+    
+<template>
+        <router-view></router-view>
+
+    <app-bottom/>
+
+</template>
+

Yi.Vue3.x.Vant/src/layout/main/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <app-tab class="tabs"/>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import AppTab from '@/layout/tab/index.vue'
+
+</script>
+<style scoped>
+.tabs{
+position: absolute;
+top: 0;
+left: 0;
+
+}
+</style>
+    

Yi.Vue3.x.Vant/src/layout/tab/index.vue

@@ -0,0 +1,22 @@
+<template > 
+  <van-tabs   v-model:active="active" offset-top="0" :sticky="true" class="tabs">
+    <van-tab title="关注" to="/follow"></van-tab>
+    <van-tab title="推荐" to="/recommend"></van-tab>
+    <van-tab title="广场"></van-tab>
+    <van-tab title="视频"></van-tab>
+
+    <router-view />
+  </van-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const active = ref(1);
+</script>
+<style scoped>
+.tabs{
+  width: 25rem;
+}
+.view{
+  margin: auto;
+}
+</style>

Yi.Vue3.x.Vant/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import './style.css'
+import router from './router'
+import App from './App.vue'
+
+const app=createApp(App)
+app.use(router)
+app.mount('#app');

Yi.Vue3.x.Vant/src/router/index.ts

@@ -0,0 +1,53 @@
+import { createWebHistory, createRouter } from 'vue-router';
+import Layout from '@/layout/index.vue';
+
+export const constantRoutes = [
+    {
+      name:'Layout',
+      path: '/',
+      component: Layout,
+      redirect:"/recommend",
+      children: [
+        {
+          path: '/my',
+          component: () => import('@/view/my.vue'),
+          name: 'My',
+        },
+
+
+        {
+          path: '/main',
+          component: () => import('@/layout/main/index.vue'),
+          name: 'Main',
+          children:[
+            {
+              path: '/recommend',
+              component: () => import('@/view/main/recommend.vue'),
+              name: 'Recommend',
+            },
+            {
+              path: '/follow',
+              component: () => import('@/view/main/follow.vue'),
+              name: 'Follow',
+            },
+          ]
+        }
+      ]
+    },
+  
+  ];
+
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: constantRoutes,
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition
+      } else {
+        return { top: 0 }
+      }
+    },
+  });
+  
+  export default router;
+  

Yi.Vue3.x.Vant/src/style.css

@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

Yi.Vue3.x.Vant/src/view/main/follow.vue

@@ -0,0 +1,3 @@
+<template>
+    这里是关注页面
+</template>

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -0,0 +1,124 @@
+<template>
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+    <van-list
+      class="list"
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <van-row v-for="item in list" :key="item" class="row">
+        
+     
+        <van-col span="6" class="leftCol">
+          <van-image
+            round
+            width="3rem"
+            height="3rem"
+            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+          />
+        </van-col>
+
+        <van-col span="12">
+            标题
+            <br>
+            副标题
+        </van-col>
+
+        <van-col span="6">
+            <van-icon name="arrow-down" @click="show=true" />
+        </van-col>
+
+
+
+        <van-col class="rowBody" span="24">这是第:{{ item }}个</van-col>
+
+        <van-col span="24">
+          <van-grid direction="horizontal" :column-num="3">
+            <van-grid-item icon="share-o" text="分享" />
+            <van-grid-item icon="comment-circle-o" text="评论" />
+            <van-grid-item icon="good-job-o" text="点赞" />
+          </van-grid>
+        </van-col>
+      </van-row>
+    </van-list>
+  </van-pull-refresh>
+
+
+
+  <!-- 功能页面 -->
+  <van-action-sheet
+  v-model:show="show"
+  :actions="actions"
+  cancel-text="取消"
+  description="这是一段描述信息"
+  close-on-click-action
+/>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const list = ref<Number[]>([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+const show = ref(false);
+    const actions = [
+      { name: '选项一' },
+      { name: '选项二' },
+      { name: '选项三', subname: '描述信息' },
+    ];
+const onLoad = () => {
+  setTimeout(() => {
+    if (refreshing.value) {
+      list.value = [];
+      refreshing.value = false;
+    }
+
+    for (let i = 0; i < 10; i++) {
+      list.value.push(list.value.length + 1);
+    }
+    loading.value = false;
+
+    if (list.value.length >= 40) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
+const onRefresh = () => {
+  // 清空列表数据
+  finished.value = false;
+
+  // 重新加载数据
+  // 将 loading 设置为 true，表示处于加载状态
+  loading.value = true;
+  onLoad();
+};
+</script>
+<style scoped>
+.list {
+  background-color: #EFEFEF;
+}
+.row {
+  background-color: white;
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+}
+.rowBody {
+  background-color: white;
+  min-height: 7rem;
+}
+.title {
+    padding-top: 1rem;
+
+  min-height: 3rem;
+  text-align: left;
+}
+.leftCol
+{
+align-content: left;
+text-align: left;
+}
+</style>

Yi.Vue3.x.Vant/src/view/my.vue

@@ -0,0 +1,3 @@
+<template>
+    这里是我的页面
+</template>

Yi.Vue3.x.Vant/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}