vue3-vant4-vite-pinia-axios-less学习日记

代码地址

GitHub：vue3-vant4-vite-pinia-axios-less

效果如图

1.首页为导航栏

2.绑定英雄页

3.注册页
4.英雄列表页

5.后面不截图了，没啥了

模块

1.vant4：按需引入组件样式文档

2.安装该vite-plugin-vue-setup-extend插件可以直接在标签上设置组件name

// vite.config.js
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
    base:'./',
    plugins: [
        vueSetupExtend(),
    ],
})

// .vue文件中使用
<script setup name="nav">
// 你的代码
</script>

3.处理动态加载图片、pdf文件，直接赋值访问不到

// 处理动态加载图片
const getImageUrl = (name = logo.png) => {
    return new URL(`/src/assets/img/software/${name}`, import.meta.url).href
}
// .vue文件中使用
res.data.list.map((n)=>{
  n.Item.Icon = n.Item.Icon?getImageUrl(n.Item.Icon):''
})

4.keep-alive的使用

// app.vue文件
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
    <router-view v-slot="{ Component }">
        <keep-alive>
            <component
                :is="Component"
                v-if="route.meta.keepalive"
                :key="route.path"
            />
        </keep-alive>
        <component
            :is="Component"
            v-if="!route.meta.keepalive"
            :key="route.path"
        />
    </router-view>
</template>

// router/index.js文件中，配置meta:true即可
{
    path: '/bindAccount',
     name: 'bindAccount',
     component: bindAccount,
     meta: {
         title: '绑定账号',
         requireAuth: true
     }
 },

5.算了不写了，兄弟们直接看代码吧，哈哈哈，任性。