搭建一个vue3+vant4+vite4+pinia 的移动端h5模板

效果图

图片1 图片2
图片1 图片2

项目的创建和组件库的安装

  1. 项目创建
pnpm create vite vue3-vant4-vite-pinia-pro-h5

注意: node版本控制在 18+, 可以通过nvm来管理本地的node版本,具体可以看这篇文章 nvm的简单使用

  1. vant-ui库的安装【这里安装的是 ^4.6.0 版本的】
pnpm add vant

注意: 具体的一些配置这里就不介绍了,可以去 vant-ui官网 查看详细的安装和配置

项目目录预览

请添加图片描述

就按上面的项目目录 对主要的文件就行简单说明。

  1. api 文件目录 【存放项目中所有的接口】
import request from "@/utils/request";// banner 列表
export const getBannerList = (params) => request.get(`/goodsBanner/list`, { params });
// 菜单列表
export const getMenuList = (params) => request.get(`/homeMenu/getList`, { params });
  1. assets 文件目录【存放项目中的一些静态文件: icon、svg等】
  2. components 文件目录【存放项目中的组件】
    在这里插入图片描述

简要说明:
globalComponents : 全局组件,已经全局注册 【页面使用不需要引入】(一般很常用的组件放这里)
localComponents : 本地组件, 没有全局注册 【页面使用需要手动引入】(一般不常用的可以放这里)
registerGlobComp: 组件注册文件,注册全局组件和vant-ui组件【vant-ui组件我这里用的是按需引入,需要手动引入】,如何想全局引入vant-ui组件,可以去 vant-ui官网 查看

  1. directives文件目录【存放自定义的vue指定】,以下是一个自定义的旋转指令(v-rotate)
  • 代码
const rotateDirective = {/*** mounted 钩子函数,在绑定元素的父组件及他自己的所有子节点都挂载完成后调用* el: 指令绑定到的元素。这可以用于直接操作 DOM。* value: 传给指令的值,也就是我们要 copy 的值*/mounted(el, { value }) {// console.log("value==:", value, typeof value);el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到// el.className = 'v-rotate'el.classList.add("v-rotate");if (typeof value === "undefined") return;el.style.display = value ? "block" : "none";},// 在绑定元素的父组件及他自己的所有子节点都更新后调用updated(el, { value }) {// console.log("更新触发", value);if (typeof value === "undefined") return;el.style.display = value ? "block" : "none";},// 指令与元素解绑后,移除事件绑定unmounted(el) {el.classList.remove("v-rotate");},
};export function setupRotateDirective(app) {app.directive("rotate", rotateDirective);
}export default rotateDirective;
  • 具体使用 【可以去本项目的 src/views/mine/index.vue 文件查看】
 <SvgIcon v-rotate icon-class="loading" />
  1. hooks文件目录 【钩子函数】,以下是封装的是一个loading 钩子
  • 代码
import { showLoadingToast } from "vant";
import { onBeforeUnmount } from "vue";export function useLoading() {let toast = null;const startLoading = () => {toast = showLoadingToast({duration: 0,forbidClick: true,message: "加载中...",overlay: true,});};const stopLoading = () => {toast && toast.close();};onBeforeUnmount(stopLoading);return { startLoading, stopLoading };
}
  • 具体使用 【可以去本项目的 src/views/index/index.vue 文件查看】
// 引入
import { useLoading } from '@/hooks/useLoading'
// 导出
const { startLoading, stopLoading } = useLoading()//  接口调用startLoading()getBannerList().then((res) => {stopLoading()console.log("数据:", res);const list = res.result || [];list.map((v) => (v.url = v.url.includes("http") ? v.url : `http://${v.url}`));bannerList.value = list;});
  1. router 文件目录 【存放页面的路由】
  2. store 文件目录【这里是项目的全局存储-用的pinia】
import { createPinia, defineStore } from "pinia";
// 引入持久化插件
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// 实例化pinia
export const store = createPinia();
// 使用持久化存储插件
store.use(piniaPluginPersistedstate);// 系统统一存储
export const useAppStore = defineStore("app", {state: () => ({appName: "我是app名称",}),actions: {// 设置app名称setAppName(data) {this.appName = data;},},persist: {storage: localStorage, //default localStorage},
});
  1. styles 文件目录【这里存放的项目中一些初始化css样式、组件库统一css样式修改、全局css变量等样式】
  2. utils 文件目录 【存放一写工具函数:request.js 请求封装、wxJssdkTools.js 微信jssdk封装等】
  3. views 文件目录【存放页面的文件】
  4. .env .env.development .env.production 【三个项目配置文件:主要用于全局的配置,以及打包环境的配置】
  5. postcss.config.cjs 文件【PostCSS 示例配置】
  6. README.md 文件 【项目搭建过程中一些常用组件、方法的简单说明和使用】
  7. vite.config.js 文件【vite的一些相关配置】

源码地址和下载

代码仓库地址: Gitee | Github 或者直接复制下面的链接 直接下载代码

  • Gitee 远程仓库下载链接
https://gitee.com/junfeng535/vue3-vant4-vite-pinia-pro-h5.git
  • Github 远程仓库下载链接
https://github.com/junfeng-git/vue3-vant4-vite-pinia-pro-h5.git

其他一些页面截图

请添加图片描述

请添加图片描述
请添加图片描述

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

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

相关文章

Maven- Profile详解

前言 Profile能让你为一个特殊的环境自定义一个特殊的构建&#xff1b;profile使得不同环境间构建的可移植性成为可能。 <project><profiles><profile><build><defaultGoal>...</defaultGoal><finalName>...</finalName><…

掼蛋—开牌三步走

掼蛋是消遣也是一项脑力活动&#xff0c;除了牌运&#xff0c;还要掌握技巧。和大家一起分享一下掼蛋游戏中的“开牌三步走”技巧。 1、快速理牌 目的&#xff1a;潜力最大化 开局时可以快速查看一下自己的同花顺&#xff0c;优先保留不损害其他炸弹的同花顺&#xff0c;并及时…

精益生产咨询公司:深入探讨其独特魅力与核心竞争力

精益生产咨询公司&#xff0c;作为专注于帮助企业实现精益转型和效率提升的专业机构&#xff0c;在现代工业生产中扮演着不可或缺的角色。这些公司不仅具备深厚的行业经验和专业知识&#xff0c;还能够根据企业的实际情况和需求&#xff0c;提供个性化的解决方案和持续的支持服…

用户至上!探索7种常用的用户体验研究方法

用户体验研究是产品开放过程中的重要组成部分&#xff0c;优秀的产品设计与高质量的用户体验是不可分割的。对于产品开发&#xff0c;选择合适的用户体验研究方法在很大程度上决定了产品的使用效果。本文全面阐述了用户体验研究、用户体验研究的重要性和用户体验研究方法&#…

mamba复现—mamba+yolov8魔改(win)

Mamba复现出现的问题 安装下列步骤一步步走 一、 注&#xff1a;若是Windows环境下python一定是3.10版本的&#xff0c;要不然trition无法安装 conda create -n mamba python3.10 conda activate mamba conda install cudatoolkit11.8 -c nvidia pip install torch2.1.1 t…

探索国外静态住宅代理:保护网络安全与隐私的利器

随着互联网的日益发展&#xff0c;网络安全和隐私保护成为越来越多用户关注的焦点。在这个信息爆炸的时代&#xff0c;如何确保网络活动的匿名性和安全性成为了我们必须面对的问题。国外静态住宅代理作为一种新兴的网络技术&#xff0c;为我们提供了有效的解决方案。 &#xf…

目标检测——道路检测数据集

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …

如何在Springboot项目的Mapper中增加一个新的sql语句

在做项目的过程中&#xff0c;我发现有的时候需要用到一些不在springboot的Mapper中的Sql语句&#xff0c;那么应该如何进行操作呐&#xff1f;&#xff1f; 平常我们创建springbootmybatisPlus项目的时候是这样创建的&#xff1a;&#xff1a; 1、创建实体类 2、创建Mappe…

2024年最新方法下载钉钉群直播回放

链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 1.首先解压好所有的压缩包&#xff0c;这个压缩包里面还套着一共逍遥一仙下载器压缩包&#xff0c;也解压 2.进入逍遥一仙下载器文件夹&#xff0c;打开M3U8 V1.4.8 0508.e…

TMS320F280049 CLB模块--FSM(3)

功能框图 FSM有效状态机内部框图如下图所示&#xff0c;可以看到内部有S0 / S1两个状态和下一状态的跳转查找表。还有个输出查找表。 下图是FSM LUT的示意框图。FSM还可以工作在3输入或4输入的查找表模式下。对于输入&#xff0c;EXTRA_EXT_IN1/0可以替换S0/1。 寄存器 参考文…

将python库下载到本地安装—Pypi官网wheel版本选择详解—小白详解版

python库—本地安装文件下载&#x1f680; 在项目中需要在内网环境下配置python的环境&#xff0c;因此需要将用于安装python库的文件下载到本地传到内网环境当中然后再安装&#xff0c;通过这契机我开始了解了一下如何离线下载安装python的第三方库&#xff0c;以及配置本地的…

【Linux】环境变量是什么?如何配置?详解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

深入理解JavaScript事件循环Event Loop:宏任务与微任务的奇幻之旅

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f389; 引言&#x1f31f; 什么是事件循环&#xff1f;&#x1f4da; 「宏任务」 vs 「微任务」「宏任务」(Macrotask)「微任务」(Microtask)实际应用中的注意事项 &#x1f500; 执行流程概览&#x1f4dd; 代码示例…

算法学习笔记(2)-前缀和

##前缀和 指的是某序列的前n项和&#xff0c;在数学上我们可以理解称为数列的前n项和。前缀和是一种预处理&#xff0c;用于降低查询的时间复杂度。 ##一维前缀和 有一个一维数组x和该数组的前缀和数组y&#xff0c;则x和y具有以下关系&#xff1a; #python代码示例 #关系&am…

上位机图像处理和嵌入式模块部署(树莓派4b和电源供给)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面&#xff0c;我们说过pc电脑和嵌入式设备&#xff0c;两者都可以实现相同的软件功能。但是和pc相比较&#xff0c;嵌入式设备不仅价格更便宜&a…

计算机视觉——OpenCV实现Lucas-Kanade 光流

1.光流 光流法是计算机视觉中用于估计图像序列中物体运动的关键技术。它类似于观察夜空中的彗星&#xff0c;通过其在天空中的运动轨迹来追踪它的路径。在图像处理中&#xff0c;光流帮助我们理解像素点如何在连续的帧之间移动。 1.1 稀疏光流法 稀疏光流法关注于图像中的关…

Web3空投入门:如何增加空投成功的几率

今天分享空投如何避免限制以提高效率&#xff0c;增加成功几率&#xff0c;首先我们来了解什么是空投加密&#xff0c;有哪些空投类型。 一、什么是空投加密&#xff1f; 加密货币空投是一种营销策略&#xff0c;包括向用户的钱包地址发送免费的硬币或代币。 加密货币项目使用…

Leetcode—155. 最小栈【中等】

2024每日刷题&#xff08;130&#xff09; Leetcode—155. 最小栈 实现代码 class MinStack { public:MinStack() {}void push(int val) {if(st.empty()) {st.emplace(val, val);} else {st.emplace(val, min(val, st.top().second));}}void pop() {if(st.empty()) {return;}…

【漏洞复现】用友U8-Cloud XChangeServlet XXE漏洞

0x01 产品简介 用友U8Cloud是用友推出的新一代云ERP,主要聚焦成长型、创新型企业,提供企业级云ERP整体解决方案。 0x02 漏洞概述 用友U8 cloud /service/XChangeServlet接口存在XXE漏洞,未授权的攻击者可通过此漏洞获取数据库敏感信息,从而盗取服务器数据,造成服务器信…

林更新博士之路星途璀璨再启航

林更新&#xff1a;博士之路&#xff0c;星途璀璨再启航在这个充满机遇与挑战的时代&#xff0c;有一位演员以其出色的演技和不懈的努力&#xff0c;赢得了无数观众的喜爱。他&#xff0c;就是林更新。今日&#xff0c;一条消息如重磅炸弹般在娱乐圈炸开&#xff0c;让无数粉丝…