当前位置: 首页 > news >正文

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

相关文章:

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

目前界面长成这样&#xff1a; 配置别名 修改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,},plug…...

Intel任命Micron技术开发主管领导Intel Foundry制造运营

- **新闻要点**&#xff1a;Intel聘请了Micron的技术开发主管Dr. Naga Chandrasekaran担任首席全球运营官、执行副总裁以及Intel Foundry制造和供应链组织的总经理。他将负责Intel的所有制造运营事务。 #### 任命背景 - **领导团队**&#xff1a;Chandrasekaran将成为Intel执行…...

苹果发布iOS 18 Beta 4,新增CarPlay 壁纸等多项功能改进

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 iOS 18 Beta 4&#xff1a;新功能与改进的探索 苹果公司在2024年7月9日向开发者推送了iOS 18的第四个开发者预览版Beta 4更新&#xff0c;内部…...

谷粒商城实战笔记-50-51-商品分类的删除

文章目录 一&#xff0c;50-商品服务-API-三级分类-删除-逻辑删除1&#xff0c;逻辑删除的配置1.1 配置全局的逻辑删除规则&#xff08;可省略&#xff09;1.2 配置逻辑删除Bean&#xff08;可省略&#xff09;1.3 Bean相应字段上加上注解TableLogic 2&#xff0c;后台接口开发…...

vue3+g2plot实现词云图

词云图 效果预览: 核心代码: import {WordCloud } from @antv/g2plot;fetch(https://gw.alipayobjects.com/os/antfincdn/jPKbal7r9r/mock.json).then((res) => res.json()).then((data) => {const wordCloud = new WordCloud(container, {data,wordField: x,weigh…...

Golang | Leetcode Golang题解之第273题整数转换英文表示

题目&#xff1a; 题解&#xff1a; var (singles []string{"", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"}teens []string{&…...

使用C#手搓Word插件

WordTools主要功能介绍 编码语言&#xff1a;C#【VSTO】 1、选择 1.1、表格 作用&#xff1a;全选文档中的表格&#xff1b; 1.2、表头 作用&#xff1a;全选文档所有表格的表头【第一行】&#xff1b; 1.3、表正文 全选文档中所有表格的除表头部分【除第一行部分】 1.…...

WordPress主题追格企业官网主题免费开源版V1.1.6

追格企业官网主题免费开源版由追格开发的一款开源wordpress主题&#xff0c;专为企业建站和追格企业官网小程序&#xff08;开源版&#xff09;PC配套而设计&#xff0c;功能集新闻动态、留言反馈、产品与服务、公司简介、联系我们等模块。...

uniapp引入自定义图标

目录 一、选择图标&#xff0c;加入购物车 二、下载到本地 三、导入项目 四、修改字体引用路径 五、开始使用 这里以扩展iconfont图标为例 官网&#xff1a;iconfont-阿里巴巴矢量图标库 一、选择图标&#xff0c;加入购物车 二、下载到本地 直接点击下载素材&#xff0…...

pytorch-scheduler(调度器)

scheduler简介 scheduler(调度器)是一种用于调整优化算法中学习率的机制。学习率是控制模型参数更新幅度的关键超参数,而调度器根据预定的策略在训练过程中动态地调整学习率。 优化器负责根据损失函数的梯度更新模型的参数,而调度器则负责调整优化过程中使用的特定参数,通…...

防火墙与入侵检测系统(IDS/IPS)在现代网络安全中的关键角色

在数字化日益加速的今天&#xff0c;网络安全变得尤为重要。随着网络攻击的复杂性和频率不断增加&#xff0c;保护关键信息资产已成为各大小组织的首要任务。防火墙&#xff08;Firewall&#xff09;和入侵检测系统&#xff08;Intrusion Detection System&#xff0c;IDS&…...

Python 之 os、open、json、pickle 模块的“疯狂”探险记

1.open函数的使用 Python 中的 open() 函数是处理文件的标准方法。它允许你打开一个文件&#xff0c;并对其进行读取、写入或追加操作 open(file,mode,encoding)函数的格式&#xff1a;file&#xff1a;文件路径 mode&#xff1a;打开方式&#xff08;读&#xff1a; r写&…...

CTF-Web习题:2019强网杯 UPLOAD

题目链接&#xff1a;2019强网杯 UPLOAD 解题思路 打开靶场如下图所示&#xff0c;是一个注册和登录界面 那就注册登录一下&#xff0c;发现是一个提交头像的页面&#xff1a; 试了一下只有能正确显示的png图片才能提交成功&#xff0c;同时F12拿到cookie&#xff0c;base6…...

Unity环境渲染与反射探针的深入探索

目录 环境渲染基础 光源设置 材质与光照贴图 反射探针&#xff08;Reflection Probes&#xff09;详解 反射探针的创建与配置 材质中的反射探针设置 实践案例 实践案例&#xff1a;室内场景中的反射效果 场景设置 反射探针配置 Unity代码示例&#xff08;非直接配置…...

vue3 父组件 props 异步传值,子组件接收不到或接收错误

1. 使用场景 我们在子组件中通常需要调用父组件的数据&#xff0c;此时需要使用 vue3 的 props 进行父子组件通信传值。 2. 问题描述 那么此时问题来了&#xff0c;在使用 props 进行父子组件通信时&#xff0c;因为数据传递是异步的&#xff0c;导致子组件无法成功获取数据…...

[C++]TinyWebServer

TinyWebServer 文章目录 TinyWebServer1 主体框架2 Buffer2.1 向Buffer写入数据2.2 从Buffer读取数据2.3 动态扩容2.4 从socket中读取数据2.5 具体实现 3 日志系统3.1 生产者-消费者模型3.2 数据一致3.3 代码 4 定时器4.1 调整堆中元素操作4.2 堆的操作4.2.1 增4.2.2 删4.2.3 改…...

Uniswap价格批量查询与ws订阅行情

Uniswap价格批量查询与ws订阅行情 由于 Uniswap V1 版本必须包含 ETH 所以两个 token 之间交换必须先换成 ETH 去中转效率很低已经弃用了 由于 V3 版本 CLMM 和 V4 版本的 DLMM 数学模型过于复杂&#xff0c;还是先从 AMM 模型的 V2 进行入门和学习 Uniswap 三种合约 Unisw…...

vue 实战 区域内小组件元素拖拽 示例

<template><div><el-button type"primary" click"showDialog true">快捷布局</el-button><el-dialog title"快捷布局配置" :visible.sync"showDialog"><el-row :gutter"20"><el-co…...

C++多线程编程中的锁详解

在现代软件开发中&#xff0c;多线程编程是提升应用程序性能和响应能力的重要手段。然而&#xff0c;多线程编程也带来了数据竞争和死锁等复杂问题。为了确保线程间的同步和共享数据的一致性&#xff0c;C标准库提供了多种锁机制。 1. std::mutex std::mutex是最基础的互斥锁…...

van-dialog 组件调用报错

报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>&#xff0c;并且提示可能是由于未正确注册该组件导致的。在 vue 中&#xff0c;当我们使用自定义组件时&#xff0c;需要先在 vue 实例中注册这些组件&#xff0c;以便 vue 能…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...