vue3,实战项目随心笔记
本项目模仿bibi 网站,主要是做一个pc和手机端的应用案例,主要涉及支付,三方登陆,css原子,妹子ui,路由缓存,组件封装,tailwindcss,vueuse 等常见企业级术应用,
由于本项目是同时手机和pc端,所以在路由访问时是需要判断客户端是设备,从而响应不同的路求请求,
初始化项目略过。。。。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
构建移动端处理识别工具,MobileTerminal,
构建一个工具方法,封装成一个工具类utils,创建一个工具类方法,rleible.js 方法返回一个boolena形的数据,如果屏幕小与1280表示是移动端,如果为真表示是移动端,如果false表示是pc端,这个1280是一个常量,需要先定义在一个专门存放常量的文件中,一般常量的文件建议放在一个src/constants/index.js中
//src/constants/index.js //export const pc_device_width = 1280
import {computed} from "vue";
import {PC_DEVICE_WIDTH} from "../constants/index.js";
/**
* 判断是否发工屏宽度小与常量定义
* **/
export const isMobileTerminal = computed(() =>{
return document.documentElement.clientWidth < PC_DEVICE_WIDTH
})
vue3,实战项目随心笔记的更多相关文章
- Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-2-driver
1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...
- 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!
缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊! 从 2019 年到 2021 年,空闲时间里陆陆续续做了一些开源项目,推荐给大家啊!记得点赞和收藏噢! ...
- Vue3 全家桶,从 0 到 1 实战项目,新手有福了
前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...
- .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计
这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- Docker-核心笔记(含Dockerfile,Compose)
Docker-核心笔记(含Dockerfile,Compose) 2017/03 Chenxin 参考 https://yeasy.gitbooks.io/docker_practice Docker ...
- (转)VS2015基础 指定一个或多个项目执行 - 心少朴的博客
慈心积善融学习,技术愿为有情学.善心速造多好事,前人栽树后乘凉.我今于此写经验,愿见文者得启发. 这个解决方案下,有两个项目, 看到黑体的project了吗?它就是指定执行的项目. 这两 ...
- Jetpack MVVM 实战项目,附带源码+视频,收藏!
从读者的反馈来看,近期大部分安卓开发已跳出舒适圈,开始尝试认识和应用 Jetpack MVVM 到实际的项目开发中. 只可惜,关于 Jetpack MVVM,网上多是 东拼西凑.人云亦云.通篇贴代码 ...
- 干货来袭!3天0基础Python实战项目快速学会人工智能必学数学基础全套(含源码)(第3天)概率分析篇:条件概率、全概率与贝叶斯公式
第1天:线性代数篇:矩阵.向量.实战编程 第2天:微积分篇:极限与导数.梯度下降.积分.实战编程 第3天:概率分析篇:条件概率与全概率.贝叶斯公式.实战项目 目录 前言 一.概率与机器学习 1.1 概 ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
随机推荐
- 有道云笔记之备选方案Obsidian和Notion
有道云笔记限制登录设备 在商业项目中一般都会有plana.planb,对于云笔记,我也在寻找planb,有道云笔记在国内市场已经占据了很大的份额. 同类型中的就不再去挑选了,我觉得商业软件,迟早也会走 ...
- 关于飞桨UIE等模型预测推理时间很久的问题分析以及解决,蒸馏剪枝部署问题解决
1.关于飞桨UIE等模型预测推理时间很久的问题分析以及解决 1.1.原因分析 用uie做实体识别,Taskflow预测的时间与schema内的实体类别数量成正比,schema里面有多少个实体类别 实体 ...
- 4.9 x64dbg 内存处理与差异对比
LyScript 插件中针对内存读写函数的封装功能并不多,只提供了最基本的内存读取和内存写入系列函数的封装,本章将继续对API接口进行封装,实现一些在软件逆向分析中非常实用的功能,例如ShellCod ...
- CE修改器入门:查找共享代码
本关我们将学习共享代码,在C语言中角色属性都是以结构体的方式进行存储的,而结构体所存储的信息都是连续性的,这一关我们将会解释如何处理游戏中的共用代码,这种代码是通用在除了自己以外的其他同类型对像上的 ...
- 【链表】链表的合并【经典面试OJ详解】【力扣21,力扣23】超详细的算法教程
链表的合并 导航小助手 说在前面 题目链接 链表结构 OJ21.合并两个有序链表 题目描述和算法分析 接口的完整实现代码 OJ23.合并K个升序链表 题目描述和算法分析 接口的完整实现代码 尾声 说在 ...
- PHP常用类
PHP常用类 一.分页类 <?php /** * 分页类 * 调用方式: * $p=new Page(总条数,显示页码链接数量,当前页码,每页显示条数,[链接]); * print_r($p-& ...
- 【求助】navicat导入monogdb数据报错
navicat在进行mongodb数据导入时报错 Navicat Premium 版本 16.1.3 (64-bit) Windows 11 Unknown Internal Error (A7052 ...
- 小知识:解决EXP-00003的报错
客户有个需求:某用户程序(含exp导出任务)报错EXP-00003,这个错误并不会影响整个导出任务的结束,但由于是晚上的定时任务,该错误会触发夜间告警.客户想通过数据库层面来规避掉此错误. 事实上,这 ...
- Sunnyui画曲线溢出错误
之前用sunnyui做展示数据库数据曲线的时候.偶然会报溢出错误,也不报错错误在哪,就是直接程序都跑不动了. 后面发现 设置曲线上下限的时候,当上下限一样的时候就会导致溢出错误.sunnyui的曲线也 ...
- [BUUCTF][WEB][ACTF2020 新生赛]Upload 1
打开靶机url,右键查看网页源代码 其中有一段代码 <div class="light"><span class="glow"> < ...