搭建一个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.hqwc.cn/news/705382.html

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

相关文章

基于Django的图书管理系统

文章目录 前言一、页面展示1.登录2.前端页面3.后端页面 二、项目上传&#xff08;1&#xff09;导入数据库&#xff08;2&#xff09;导入项目&#xff08;3&#xff09;数据库密码修改&#xff08;4&#xff09;进入网站 总结 前言 本网站调用Django编写了图书管理网站&#…

AI 写 SQL 真的靠谱吗?腾讯游戏在 AI+ 湖仓一体的实践

作者&#xff1a;腾讯游戏数据技术负责人 刘岩 导读 腾讯游戏是全球领先的游戏开发和运营商&#xff0c;其数据团队拥有十余年、700 款大型游戏的数据工作沉淀。复杂的业务环境下&#xff0c;腾讯游戏数据团队每年需要处理超过 3 万个数据提取需求&#xff0c;SQL 编写需要耗费…

【计算机毕业设计】springboot城市公交运营管理系统

二十一世纪我们的社会进入了信息时代&#xff0c; 信息管理系统的建立&#xff0c;大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多&#xff0c;而在线管理系统刚好能满足这些需求&#xff0c;在线管理系统突破了传统管理方式的局限性。于是本文针对这一需求设…

案例研究|茶百道通过“MeterSphere+阿里云云效”实现高质量产品交付

中国茶饮连锁品牌茶百道创立于2008年&#xff0c;隶属于四川百茶百道实业股份有限公司。据有关数据显示&#xff0c;2023年茶百道在中国的现制茶饮店市场排名第三位&#xff0c;市场份额达到6.8%。截至2024年2月份&#xff0c;茶百道已拥有超过6000万名会员和近8000家门店。茶百…

25考研英语长难句Day03

25考研英语长难句Day03 【a.词组】【b.断句】 多亏了电子学和微力学的不断小型化&#xff0c;现在已经有一些机器人系统可以进行精确到毫米以下的脑部和骨骼手术&#xff0c;比技术高超的医生用手能做到的精确得多。 【a.词组】 词组翻译thanks to多亏了&#xff0c;由于cont…

节点电位与电路电压的研究

实验目的&#xff1a; 1. 验证电路中电位与电压的关系&#xff1b; 2. 掌握电路电位图的绘制方法&#xff1b; 3. 学会对简单的电路故障进行分析与排除。 实验内容及步骤&#xff1a; 1. 从“线性电路研究模块”实验板上选取元器件&#xff0c;结合实验箱提供的电源&#xff…

抖音评论采集python爬虫(含一二级评论内容)

声明 仅用于学习交流&#xff0c;不用于其他用途 正文 随着抖音评论采集更新需要登录&#xff0c;由于不懈的努力&#xff0c;攻破这一难点&#xff0c;不需要登录采集作品所有评论信息 话不多说上代码看效果&#xff1a; 输入作品id: 这样就拿到评论信息了&#xff0c;可以…

UVM寄存器模型——手写Ralf问题debug

寄存器模型是UVM中至关重要的一部分&#xff0c;如果没有寄存器模型&#xff0c;那么验证平台对于DUT内寄存器的访问方式将十分有限&#xff0c;对DUT运行状态的把控也会变得更为复杂。 在验证过程中&#xff0c;scoreboard或者其他验证组件经常需要了解当前时间某个寄存器的值…

一物一码数字化营销进军调味品行业,五丰黎红“星厨俱乐部”火啦!

近日&#xff0c;由五丰黎红联合纳宝科技精心打造的小程序“星厨俱乐部”火啦&#xff01;一经上线就吸引了大量用户注册和参与&#xff0c;可以说取得了非常成功的市场反馈&#xff0c;那究竟是一个什么样的小程序&#xff0c;竟然有这么大的吸引力呢&#xff1f; 介绍小程序之…

OpenAI 推出革命性新模型 GPT-4o:全能AI的新纪元

GPT-4o 模型的推出预示着人工智能领域的又一次飞跃&#xff0c;它将如何改变我们的世界&#xff1f; 在人工智能的快速发展浪潮中&#xff0c;OpenAI 再次站在了技术革新的前沿。2024年5月14日&#xff0c;OpenAI 宣布了其最新旗舰模型 GPT-4o&#xff0c;这不仅是一个简单的版…

Java多线程与高并发

1、什么是进程?什么是线程? 进程:进程是程序的基本执行实体;另外一种解释是进程是一个应用程序(1个进程是一个软件)。 线程:线程是操作系统能够进行运算调度的最下单位。它被包含在进程之中,是进程中的实际运作单位;是一个进程中的执行场景/执行单元。 注意:。一个进…

计算机的内存是如何实现的

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…