前端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…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...

什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...

自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...

ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...

GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...