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

目前界面长成这样:

配置别名

修改vite.config.js

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"),
        }
    }
})

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

js 复制代码
"@": path.resolve(__dirname, "src"),

配置首页

创建 src/page/home/index.vue

html 复制代码
<script setup>

</script>

<template>
home
</template>

<style scoped>

</style>

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

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

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

html 复制代码
<script setup>
</script>

<template>
  <RouterView/>
</template>

此时界面的预览效果如下:

引入外部资源

将提前准备好的资源放入assets目录:

修改src/main.js,引入静态资源:

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

安装:

bash 复制代码
pnpm i vant

安装按需引入依赖:

bash 复制代码
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

修改 vite.config.js

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会帮我们自动导入。

html 复制代码
<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,配置路由:

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
相关推荐
摇滚侠37 分钟前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 属性优先级 行内写法 变量选择 笔记42
java·spring boot·笔记
摇滚侠41 分钟前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 总结 热部署 常用配置 笔记44
java·spring boot·笔记
rechol1 小时前
汇编与底层编程笔记
汇编·arm开发·笔记
lzj_pxxw2 小时前
嵌入式开发技巧:舍弃标志位,用宏定义函数实现程序单次运行
笔记·stm32·单片机·嵌入式硬件·学习
润 下3 小时前
C语言——回调函数的典型示例(分析详解)
c语言·开发语言·人工智能·经验分享·笔记·程序人生
朝新_3 小时前
【EE初阶 - 网络原理】传输层协议
java·开发语言·网络·笔记·javaee
koo3643 小时前
李宏毅机器学习笔记27
人工智能·笔记·机器学习
峰顶听歌的鲸鱼3 小时前
1.云计算与服务器基础
运维·服务器·笔记·云计算·学习方法
Kay_Liang4 小时前
大语言模型如何精准调用函数—— Function Calling 系统笔记
java·大数据·spring boot·笔记·ai·langchain·tools
bnsarocket4 小时前
Verilog和FPGA的自学笔记7——流水灯与时序约束(XDC文件的编写)
笔记·fpga开发