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

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

配置别名

修改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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读【检测】:商汤 ICLR2021 | Deformable DETR

文章目录 论文地址AbstractMotivation技术细节多尺度backbone特征MSDeformAttention 小结 论文地址 Deformable DETR 推荐视频&#xff1a;bilibili Abstract DETR消除对目标检测中许多手工设计的组件的需求&#xff0c;同时表现出良好的性能。然而&#xff0c;由于Transfor…

MongoDB - 聚合阶段 $count、$skip、$project

文章目录 1. $count 聚合阶段2. $skip 聚合阶段3. $project 聚合阶段1. 包含指定字段2. 排除_id字段3. 排除指定字段4. 不能同时指定包含字段和排除字段5. 排除嵌入式文档中的指定字段6. 包含嵌入式文档中的指定字段7. 添加新字段8. 重命名字段 1. $count 聚合阶段 计算匹配到…

Odoo 17 仪表盘开发指南:打造高效的数据可视化中心

在现代企业管理中,数据驱动的决策至关重要。Odoo 17 提供了强大的平台来构建自定义仪表板, 适用于数据统计、工作台、驾驶舱、数据可视化等场景,以便用户能够一目了然地监控关键指标并做出及时反应。本文将介绍如何在 Odoo 17 中开发一个灵活且高度定制化的仪表盘系统,包括…

12_TypeScript 模块 以及 模块化封装DB 库

TypeScript 模块 1、模块中暴露方法12、模块中暴露方法23、模块中暴露方法34、封装[上一节的db 库](https://blog.csdn.net/qq_46143850/article/details/140664100)5、TypeScript 命名空间 模块的概念&#xff08;官方&#xff09;&#xff1a; 关于术语的一点说明&#xff1a…

TCP Nagle算法,TCP_CORK,延迟确认机制简单介绍

Nagle Nagle算法是一种改善TCP/IP网络效率的算法。 算法的目的 主要目的是减少网络中小数据包的数量,从而减少网络拥塞。它通过延迟发送小数据包来实现这一目标,直到有足够的数据可以发送一个完整的数据包。 工作原理 如果要发送的数据量达到了最大分段大小(Maximum Segmen…

Android笔试面试题AI答之Android系统与综合类(1)

答案仅供参考&#xff0c;来着文心一言、Kimi.ai 目录 1.简述嵌入式实时操作系统&#xff0c;Android 操作系统属于实时操作系统吗?嵌入式实时操作系统简述Android操作系统是否属于实时操作系统 2.简述Android系统的优势和不足&#xff1f;3.简述Android的系统架构 &#xff1…

实战深度学习--进行蘑菇分类

数据集&#xff1a;https://pan.quark.cn/s/4d3526600c0c 概述 本笔记将介绍如何使用Python和深度学习库&#xff08;如TensorFlow和Keras&#xff09;来构建一个卷积神经网络&#xff08;CNN&#xff09;模型&#xff0c;以区分可食用和有毒的蘑菇。我们将从数据准备、模型构…

Vue.js 与 Ajax(vue-resource)的集成应用

Vue.js 与 Ajax&#xff08;vue-resource&#xff09;的集成应用 Vue.js 是一款流行的前端JavaScript框架&#xff0c;以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中&#xff0c;与后端服务的通信是不可或缺的&#xff0c;而Ajax技术是实现这一功能的关键。在V…

C语言 -- 动态内存管理

C语言 -- 动态内存管理 1. 为什么要有动态内存分配2. malloc 和 free2.1 malloc2.2 free 3. calloc 和 realloc3.1 calloc3.2 realloc 4. 常见的动态内存的错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动…

【力扣】SQL题库练习5

高级查询和连接 1341.电影评分 表&#xff1a;Movies ------------------------ | Column Name | Type | ------------------------ | movie_id | int | | title | varchar | ------------------------ movie_id 是这个表的主键(具有唯一值的列)。 ti…

力扣131题:分割回文串的 Java 实现

引言 力扣&#xff08;LeetCode&#xff09;是一个在线编程平台&#xff0c;提供了大量的编程题目供开发者练习。第131题“分割回文串”是一个有趣的字符串处理问题&#xff0c;要求将一个字符串分割成尽可能多的回文子串。本文将介绍如何使用 Java 解决这个问题。 题目描述 …

05 capture软件创建元器件库(以STM32为例)

05 创建元器件库_以STM32为例 一、新建原理图库文件二、新建器件三、开始创建元器件 一些IC类元件&#xff0c;需要自己创建元器件库。 先看视频&#xff0c;然后自己创建STM32F103C8T6的LQFP48的元器件。 STM32F103C8T6是目前为止&#xff0c;自己用的最多的芯片。 先要有数据…

mysqlMHA

mysqlMHA 什么是MHA ​ 高可用模式下的故障切换,基于主从复制. ​ 至少需要3台 ​ 故障切换过程在0-30秒之内. ​ 这过程和keepalive比较像,也是通过vip地址,根据vip地址所在的主机,确定主备. ​ 主和备不是靠优先级确定的,主从复制的时候就确定了主,备是在MHA的过程中确…

Qt自定义MessageToast

效果&#xff1a; 文字长度自适应&#xff0c;自动居中到parent&#xff0c;会透明渐变消失。 CustomToast::MessageToast(QS("最多添加50张图片"),this);1. CustomToast.h #pragma once#include <QFrame>class CustomToast : public QFrame {Q_OBJECT pub…

【学习笔记】解决Serial Communication Library编译问题

【学习笔记】解决编译 Serial Communication Library 时的 Catkin 依赖问题 Serial Communication Library 是一个用 C 编写的用于连接类似 rs-232 串口的跨平台库。它提供了一个现代的 C 接口&#xff0c;它的工作流程设计在外观和感觉上与 PySerial 相似&#xff0c;但串口速…

ControlNet on Stable Diffusion

ControlNet on Stable Diffusion 笔记来源&#xff1a; 1.Adding Conditional Control to Text-to-Image Diffusion Models 2.How to Use OpenPose & ControlNet in Stable Diffusion 3.ControlNet与DreamBooth&#xff1a;生成模型的精细控制与主体保持 4.Introduction t…

光猫设置桥接 路由器pppoe拨号 设置正常访问光猫 (openwrt)

网络信息展示 光猫桥接很简单吧&#xff0c;就不说了。先来列出修改前的网络接口和网络信息。 光猫192.168.1.1&#xff0c;openwrt 10.0.0.0/8 初始配置 需要记录的信息&#xff1a;WAN的网络设备&#xff08;eth1&#xff09;&#xff0c;光猫的IP&#xff08;192.168.1.1&am…

StarryCoding-35:鼠鼠我鸭

题目描述 在一个叫做酱西功爷枝叶鸡树学院的地方有&#x1d45b;n只小动物&#xff0c;要么是鼠鼠&#xff0c;要么是鸭鸭&#xff0c;从11到&#x1d45b;n编号&#xff0c;每只小动物有个体重&#x1d44e;&#x1d456;ai​。 在这个学校里&#xff0c;存在一种神奇的魔法…

Symfony 入门指南:快速安装与基础配置

Symfony 入门指南&#xff1a;快速安装与基础配置 Symfony 是一个强大而灵活的 PHP 框架&#xff0c;广泛应用于构建现代 Web 应用程序。本指南将带您一步一步地了解如何快速安装 Symfony&#xff0c;并完成基本配置&#xff0c;以便您能够开始使用这个强大的框架。 目录 引…

使用法国云手机进行面向法国的社媒营销

在当今数字化和全球化的时代&#xff0c;社交媒体已经成为企业营销和拓展市场的重要工具。对于想进入法国市场的企业来说&#xff0c;如何在海外社媒营销中脱颖而出、抓住更多的市场份额&#xff0c;成为了一个关键问题。法国云手机正为企业提供全新的营销工具&#xff0c;助力…