vite5+vue3开发阅读APP实战笔记20240725

news2025/10/31 17:11:32

目前界面长成这样：
在这里插入图片描述

配置别名

修改vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
    server: {
        open: true,
        port: 8088,
    },
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        }
    }
})

这里配置别名的核心代码是：

"@": path.resolve(__dirname, "src"),

配置首页

创建 src/page/home/index.vue

<script setup>

</script>

<template>
home
</template>

<style scoped>

</style>

修改src/router/index.js，这里主要是配置首页的路由：

import { createWebHashHistory, createRouter } from 'vue-router'

const routes = [
    {
        path: "/",
        name: "Home",
        component: () => import("@/page/home/index.vue")
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

修改 src/main.js

import { createApp } from 'vue'
import router from './router'

import App from './App.vue'

const app = createApp(App)

app.use(router)

app.mount('#app')

修改src/App.vue

<script setup>
</script>

<template>
  <RouterView/>
</template>

此时界面的预览效果如下：
在这里插入图片描述

引入外部资源

将提前准备好的资源放入assets目录：
在这里插入图片描述

修改src/main.js，引入静态资源：

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

import "@/assets/css/common.css"
import "@/assets/font/iconfont.css"

const app = createApp(App)

app.use(router)

app.mount('#app')

引入vant

参考文档：https://vant-ui.github.io/vant/#/zh-CN/quickstart

安装：

pnpm i vant

在这里插入图片描述

安装按需引入依赖：

pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

修改 vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {VantResolver} from '@vant/auto-import-resolver';

// https://vitejs.dev/config/
export default defineConfig({
    server: {
        open: true,
        port: 8088,
    },
    plugins: [
        vue(),
        AutoImport({
            resolvers: [VantResolver()],
        }),
        Components({
            resolvers: [VantResolver()],
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        }
    }
})

修改src/page/home/index.vue，使用组件和API。注意，这里无论是组件还是API，都不需要我们手动引入，我们配置了自动导入以后，vite会帮我们自动导入。

<script setup>
showToast('No need to import showToast');
</script>

<template>
  home
  <van-button type="primary"/>
</template>

<style scoped>

</style>

此时预览效果如下：
在这里插入图片描述

划分页面结构

在这里插入图片描述

四个页面，对应四个底部导航：

me：我的
home：首页
welfare：福利
community：社区

然后添加layout用于存放布局组件，添加底部导航组件：
在这里插入图片描述

修改 src/router/index.js，配置路由：

import { createWebHashHistory, createRouter } from 'vue-router'

const routes = [
    {
        path: "/",
        component: () => import("@/page/home/index.vue")
    },
    {
        path: "/community",
        component: () => import("@/page/community/index.vue")
    },
    {
        path: "/welfare",
        component: () => import("@/page/welfare/index.vue")
    },
    {
        path: "/me",
        component: () => import("@/page/me/index.vue")
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router