前端H5移动端基础框架模板 :Vue3 + Vite5 + Pinia + Vant4 + Sass + 附源码
技术栈选用 Vue3 + Vite5 + Pinia + Vant4 + Sass
源码地址:
git clone https://gitee.com/gaiya001/h5-APP.git
1. 1.vite.config.js文件配置
**
import { defineConfig } from 'vite' // 导入 Vite 的配置函数
import vue from '@vitejs/plugin-vue' // 导入 Vue 插件
import path from 'path' // 导入 Node.js 的 path 模块
import Components from 'unplugin-vue-components/vite' // 导入 Vue 组件自动注册插件
import { VantResolver } from 'unplugin-vue-components/resolvers' // 导入 Vant 组件解析器
import { visualizer } from 'rollup-plugin-visualizer' // 导入 Rollup 打包分析插件
import { execSync } from 'child_process' // 导入 Node.js 的 child_process 模块export default defineConfig({base: '/', // 设置应用的基础路径server: {port: 3000, // 设置开发服务器端口open: true, // 启动开发服务器时自动打开浏览器proxy: {'/api': {target: 'https://baidu', // 设置代理的目标地址changeOrigin: true, // 改变请求的源头rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径},},},plugins: [vue(), // 使用 Vue 插件Components({resolvers: [VantResolver()], // 使用 Vant 组件解析器自动注册 Vant 组件}),visualizer({ open: true }), // 使用打包分析工具并在打包后自动打开分析报告],resolve: {alias: {'@': path.resolve(__dirname, './src'), // 设置路径别名,@ 指向 src 目录},},build: {rollupOptions: {output: {manualChunks: {vendor: ['vue', 'axios', 'vant'], // 手动分割 vendor 包,包含 vue, axios, vant},},},chunkSizeWarningLimit: 500, // 设置警告阈值,单位 KBbrotliSize: false, // 关闭 Brotli 压缩大小报告},optimizeDeps: {include: ['vue', 'axios', 'vant'], // 预构建依赖,提高构建速度},// 添加打包完成后清除 log 文件的钩子buildEnd: () => {try {execSync('rimraf logs'); // 使用 rimraf 清除 logs 目录// console.log('日志文件已清除');} catch (error) {// console.error('清除日志文件失败:', error);}},
})
2.main.js文件配置详解
// 导入 Vue 的 createApp 函数,用于创建 Vue 应用实例
import { createApp } from 'vue';// 导入根组件 App.vue
import App from './App.vue';// 引入路由配置
import router from './router/index.js';// 引入路由权限配置
import '@/router/permission.js';// 引入 Vant 的样式文件
import 'vant/lib/index.css';// 引入全局样式文件(使用 SCSS)
import './assets/index.sass';// 引入 Pinia 实例
import pinia from './store/index.js';// 创建 Vue 应用实例
const app = createApp(App);// 使用路由插件
app.use(router);// 使用 Pinia 插件
app.use(pinia);// 将 Pinia 实例注册为全局属性(可选)
// app.config.globalProperties.$store = pinia;// 挂载应用到 DOM 中的 #app 元素
app.mount('#app');## ```3.axios-req.js文件详解```javascript
// 导入 axios 库,用于发送 HTTP 请求
import axios from 'axios';// 从 Vant 库中导入 Toast 和 Dialog 组件,用于显示提示信息和对话框
import { Toast, Dialog } from 'vant';// 从 Pinia 存储中导入 basic store,用于管理全局状态
import { useBasicStore } from '@/store/basic';// 创建 axios 请求实例
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_URL, // 设置基础 URL,从环境变量中获取timeout: 12000 // 设置请求超时时间为 12000 毫秒
});let loadingInstance = null; // 用于存储 loading 提示实例
let tempReqUrlSave = ''; // 临时保存请求 URL
let authorTipDoor = true; // 控制授权提示的开关// 定义一个函数,用于处理未授权的情况
const noAuthDill = () => {authorTipDoor = false; // 关闭授权提示开关Dialog.confirm({message: '请重新登录', // 提示信息confirmButtonText: '重新登录', // 确认按钮文本closeOnClickOverlay: false, // 点击遮罩层不关闭对话框showCancelButton: false, // 不显示取消按钮showClose: false, // 不显示关闭按钮theme: 'round-button' // 对话框主题}).then(() => {useBasicStore().resetStateAndToLogin(); // 重置状态并跳转到登录页面authorTipDoor = true; // 重新打开授权提示开关});
};// 请求前拦截器
service.interceptors.request.use((req) => {const { token, axiosPromiseArr } = useBasicStore();// 收集请求地址,用于取消请求req.cancelToken = new axios.CancelToken((cancel) => {tempReqUrlSave = req.url;axiosPromiseArr.push({url: req.url,cancel});});// 设置 token 到请求头if (token) req.headers['X-Auth-Token'] = token;// 如果请求方法是 GET 并且没有 params,使用 data 作为 paramsif (req.method?.toLowerCase() === 'get' && !req.params) req.params = req.data;// 请求加载提示if (req.reqLoading ?? true) {loadingInstance = Toast.loading({forbidClick: true, // 禁止点击duration: 0, // 持续时间,0 表示持续显示message: '数据载入中...' // 提示信息});}console.log('Request:', req); // 添加请求日志return req;},(err) => {console.error('Request Error:', err); // 添加请求错误日志return Promise.reject(err);}
);// 请求后拦截器
service.interceptors.response.use((res) => {// 取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave);if (loadingInstance) {Toast.clear(); // 清除 loading 提示}// 处理文件下载if (res.data?.type?.includes("sheet")) {return res;}const { code, msg } = res.data;const successCode = [0, 200, 20000]; // 成功状态码const noAuthCode = [401, 403]; // 未授权状态码if (successCode.includes(code)) {console.log('Response:', res); // 添加响应日志return res.data;} else {// authorTipDoor 防止多个请求多次提示if (authorTipDoor) {if (noAuthCode.includes(code)) {noAuthDill(); // 处理未授权情况} else {if (!res.config?.isNotTipErrorMsg) {Toast.fail({message: msg || '请求失败', // 提示信息duration: 2 * 1000 // 持续时间 2 秒});} else {return res;}return Promise.reject(msg || '请求失败');}}}},(err) => {// 取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave);if (loadingInstance) {Toast.clear(); // 清除 loading 提示}console.error('Response Error:', err); // 添加响应错误日志Toast.fail({message: err.message || '网络请求失败', // 提示信息duration: 2 * 1000 // 持续时间 2 秒});return Promise.reject(err);}
);// 手动取消请求
export function cancelRequest(url) {const { axiosPromiseArr } = useBasicStore();const index = axiosPromiseArr.findIndex(item => item.url === url);if (index !== -1) {axiosPromiseArr[index].cancel(); // 取消请求axiosPromiseArr.splice(index, 1); // 从数组中移除已取消的请求}
}// 导出 service 实例给页面调用,config -> 页面的配置
export default function axiosReq(config) {return service(config);
}
4.路由permission.js文件配置
import router from './index'; // 引入主路由模块
import { useUserStore } from '@/store/modules/user'; // pinia持久化的信息const whiteList = ['/login']; // 不需要鉴权的路由白名单router.beforeEach(async (to, from, next) => {console.log(to,"路由前置守望");const userStore = useUserStore();// 设置页面标题document.title = to.meta?.title;// 获取用户信息const { token } = userStore.userInfo;console.log(token,'token')// 如果用户已经登录,则直接放行if (token) {next();return;}// 如果用户未登录并且目标路由不在白名单中if (!token && !whiteList.includes(to.path)) {// 重定向到登录页,并携带当前路由路径作为查询参数next(`/login?redirect=${to.path}`);} else {// 目标路由在白名单中,直接放行next();}
});
// 路由后置守卫
router.afterEach((to, from) => {// console.log('路由后置守望', to, from);
});export default router;
相关文章:

前端H5移动端基础框架模板 :Vue3 + Vite5 + Pinia + Vant4 + Sass + 附源码
技术栈选用 Vue3 Vite5 Pinia Vant4 Sass 源码地址: git clone https://gitee.com/gaiya001/h5-APP.git1. 1.vite.config.js文件配置 ** import { defineConfig } from vite // 导入 Vite 的配置函数 import vue from vitejs/plugin-vue // 导入 Vue 插件 i…...

什么是线程安全
🌈🌈🌈今天给大家分享的是:什么是线程安全 目录 线程安全的定义 线程安全的级别 (1)不可变 (2)绝对线程安全 (3)相对线程安全 (4)线程非安全…...

️️️ 避坑指南:如何修复国密gmssl 库填充问题并提炼优秀加密实践20241212
🛡️ 避坑指南:如何修复国密gmssl 库填充问题并提炼优秀加密实践 ✨ 引言 在当下的数据安全环境中,SM4作为中国国家密码算法的代表性选择,被广泛应用于金融、通信和政府领域。然而,在实际开发中,即便是开…...

深度学习实验十四 循环神经网络(1)——测试简单循环网络的记忆能力和梯度爆炸实验
目录 一、数据集构建 1.1数据集的构建函数 1.2加载数据集并划分 1.3 构建Dataset类 二、模型构建 2.1嵌入层 2.2SRN层 2.3模型汇总 三、模型训练 3.1 训练指定长度的数字预测模型 3.2 损失曲线展示 四、模型评价 五、修改 附完整可运行代码 实验大体步骤&#x…...

AWS re:Invent 发布新的数据库产品 Aurora DSQL; NineData SQL编程大赛开始; 腾讯云支持PostgreSQL 17
重要更新 1. AWS re:Invent 发布新的数据库产品 Aurora DSQL ,提供了跨区域、强一致、多区域读写的能力,同时具备99.999%(多区域部署)的可用性,兼容PostgreSQL;同时发布的还有 DynamoDB 也提供类似的跨区域…...

STM32 OLED屏幕驱动详解
一、介绍 OLED是有机发光二极管,又称为有机电激光显示(Organic Electroluminescence Display, OLED)。OLED由于同时具备自发光,不需背光源、对比度高、厚度薄、视角广、反应速度快、可用于挠曲性面板、使用温度范围广…...
Python字符串常用操作
Python字符串常用操作 一、字符串的切片 1.1、通过下标及下标范围取值 my_str myNameIsTaichi value1 my_str[2] # 正向 N value2 my_str[-5] # 反向 从 -1 开始 a字符串分割,语法:string[end: step] start:头下标,以0开…...

Redis 生产问题(重要)
缓存穿透 什么是缓存穿透? 缓存穿透说简单点就是大量请求的 key 是不合理的,根本不存在于缓存中,也不存在于数据库中 。这就导致这些请求直接到了数据库上,根本没有经过缓存这一层,对数据库造成了巨大的压力…...

前端 —— Git
Git安装 下载安装包 【免费】前端前置-Git安装包资源-CSDN文库 安装 ‘git‘不是内部或外部命令及Git 的保姆级安装教程(保姆级教程)_git不是内部或外部命令-CSDN博客 vscode添加gitbash终端 setting.json "terminal.integrated.profiles.win…...

【GL006】Linux 之 shell
目录 一、shell 指令 1.1 体验shell指令 1.2 命令格式 1.3 shell中的通配符 1.4 输入输出重定向 1.5 命令置换 1.6 基本系统维护命令 1.7 Linux的进程管理命令 1.8 文件系统相关命令 1.9 Linux网络配置管理 二、shell 编程 2.1 shell 脚本的基础知识 2.2 shell 变…...

JS听到了强运的回响
正则表达式 介绍 正则表达式是用于匹配字符串中字符组合的模式,在JS中,正则表达式也是对象 通常用来查找,替换那些符合正则表达式的文本 就是筛选出符合条件的一类人 比如说 有人喜欢玩艾斯爱慕,那他喜欢的就是这一类人&…...

Linux下MySQL的简单使用
Linux下MySQL的简单使用 导语MySQL安装与配置 MySQL安装密码设置 MySQL管理 命令 myisamchkmysql其他 常见操作 C语言访问MYSQL 连接例程错误处理使用SQL 总结参考文献 导语 这一章是MySQL的使用,一些常用的MySQL语句属于本科阶段内容,然后是C语言和M…...
.net core使用AutoMapper
AutoMapper 是一个用于 .NET 平台的对象映射工具,它简化了不同对象类型之间的转换过程。在软件开发中,尤其是在分层架构的应用程序里,常常需要在不同的对象模型之间进行数据传递,例如从数据库实体到视图模型、DTO(数据…...

nmap详解
Nmap(Network Mapper)是一个开放源代码的网络探测和安全审核的工具。由于它的功能强大,被广泛应用于网络安全领域。以下是Nmap的一些主要功能及其在实战中的应用举例。 Nmap的主要功能: 端口扫描:检测目标主机上开放…...
CentOS7环境安装php
直接安装 yum -y install php CentOS7默认安装是php5,现在php已有8.3版本 先查看php -v 版本 如果是低版本,可以删除 yum remove php yum remove php-fpm yum remove php-common 一、添加REMI存储库 yum install epel-release yum install -y …...

基于深度学习的猫狗识别系统【深度学习课设】
🏆 作者简介:席万里 ⚡ 个人网站:https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜,同时略懂Vue与React前端技术,也了解一点微信小程序开发。 🍻 对计算机充满兴趣,愿意并且希望学习更多的技…...
字体子集化实践探索
最近项目rust生成PDF组件printpdf需要内嵌完整字体导致生成的PDF很大,需要做压缩,但是rust的类库allsorts::subset::subset不支持windows,所以做了一些windows下字体子集化的尝试 方案一:node.js做子集化 fontmin 缺点是也需要集…...

A1017 基于Java+JSP+SQL Server+servlet的二手购物平台的设计与实现
二手购物平台 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 摘 要 计算机以及网络技术的飞速发展,网络的应用在全国乃至全球日益普及,随着人们的思想水平和生活水平的提高,网络已经是人们必不可少的一部分。人们的…...

Simdroid-EC:液冷仿真新星,助力新能源汽车电机控制器高效散热
近年来,新能源电动车的销量呈现出快速增长的态势。据统计,2024 年1-10月中国新能源汽车销量达728万辆,同比增长37.8%。 电机控制器在新能源汽车中对于保障动力和安全性能扮演着至关重要的角色,其核心部件IGBT(绝缘栅双…...

C语言——实现并求出两个数的最大公约数
问题描述:求出两个数的最大公约数 //求两个数的最大公约数 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<math.h> #include<time.h>int main() {int a,b;printf("请您输入两个数 a 和 b\n");scanf…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...

循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...

优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...