本项目模仿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,实战项目随心笔记的更多相关文章

  1. Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-2-driver

    1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...

  2. 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!

    缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊! 从 2019 年到 2021 年,空闲时间里陆陆续续做了一些开源项目,推荐给大家啊!记得点赞和收藏噢! ...

  3. Vue3 全家桶,从 0 到 1 实战项目,新手有福了

    前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...

  4. .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计

    这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...

  5. 08Vue.js快速入门-Vue综合实战项目

    8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...

  6. Docker-核心笔记(含Dockerfile,Compose)

    Docker-核心笔记(含Dockerfile,Compose) 2017/03 Chenxin 参考 https://yeasy.gitbooks.io/docker_practice Docker ...

  7. (转)VS2015基础 指定一个或多个项目执行 - 心少朴的博客

           慈心积善融学习,技术愿为有情学.善心速造多好事,前人栽树后乘凉.我今于此写经验,愿见文者得启发. 这个解决方案下,有两个项目, 看到黑体的project了吗?它就是指定执行的项目. 这两 ...

  8. Jetpack MVVM 实战项目,附带源码+视频,收藏!

    从读者的反馈来看,近期大部分安卓开发已跳出舒适圈,开始尝试认识和应用 Jetpack MVVM 到实际的项目开发中. 只可惜,关于 Jetpack MVVM,网上多是 东拼西凑.人云亦云.通篇贴代码  ...

  9. 干货来袭!3天0基础Python实战项目快速学会人工智能必学数学基础全套(含源码)(第3天)概率分析篇:条件概率、全概率与贝叶斯公式

    第1天:线性代数篇:矩阵.向量.实战编程 第2天:微积分篇:极限与导数.梯度下降.积分.实战编程 第3天:概率分析篇:条件概率与全概率.贝叶斯公式.实战项目 目录 前言 一.概率与机器学习 1.1 概 ...

  10. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

随机推荐

  1. python.exe和pythonw.exe的区别(区分.py、.pyw、.pyc、.pyo文件)

    python和pythonw 在Windows系统搭建好Python的环境后,进入Python的安装目录,大家会发现目录中有python.exe和pythonw.exe两个程序.如下图所示: 它们到底 ...

  2. win10家庭版禁用更新

    前言 2020年初因为疫情在家远程办公,而我老家没有电脑,先后向两位大学生借了两台电脑来办公,发现一个现象:他们的电脑系统都是家庭版,也就是刚买电脑时安装的win10家庭版.也问了其它几位计算机专业的 ...

  3. python实现GUI自动化(控制鼠标)|屏幕快照&图像识别基础

    1.GUI自动化 ●GUI自动化就是写程序直接控制键盘和鼠标.这些程序可以控制其他应用,向它们发送虚拟的击键和鼠标点击,就像你自己坐在计算机前与应用交互-样.这种技术被称为"图形用户界面自动 ...

  4. 2.3 Windows驱动开发:内核字符串转换方法

    在内核编程中字符串有两种格式ANSI_STRING与UNICODE_STRING,这两种格式是微软推出的安全版本的字符串结构体,也是微软推荐使用的格式,通常情况下ANSI_STRING代表的类型是ch ...

  5. Java实现将中缀表达式转换到后缀表达式

    思路: 1.初始化两个栈 运算符栈 s1 和储存中间结果栈 s22. 从左到右扫描中缀表达式3. 遇到操作数时 压入s24. 遇到操作符 o1 时 比较其与 S1 栈顶运算符的优先级 1)如果s1为空 ...

  6. SpringCloud-06-Consul注册中心

    Consul Server Consul 是由 HashiCorp 基于 Go 语言开发的,支持多数据中心,分布式高可用的服务发布和注册服务软件. 用于实现分布式系统的服务发现与配置. 使用起来也较 ...

  7. Blazor OIDC 单点登录授权实例5 - 独立SSR App (net8 webapp ) 端授权

    目录: OpenID 与 OAuth2 基础知识 Blazor wasm Google 登录 Blazor wasm Gitee 码云登录 Blazor OIDC 单点登录授权实例1-建立和配置IDS ...

  8. CF1895

    A 题意:你在数轴原点.有一个宝箱在 \(x\),钥匙在 \(y\).每移动一单位,耗费 \(1\) 时间.你可以到了 \(x\) 然后抱着宝箱走,但是抱着宝箱走的总路程不能超过 \(k\) 单位.如 ...

  9. 2023年多校联训NOIP层测试5

    2023年多校联训NOIP层测试5 T1 糖果 \(10pts\) 首先考虑一些异或的性质: 归零率:\(a \bigoplus a=0\) 恒等律:\(a \bigoplus 0=a\) 交换律:\ ...

  10. 即截即贴,推荐一个提升截图对比效率的工具Snipaste

    壹 ❀ 超好用的snipaste 你的图片是用座机(锁孔)拍的吗?我们常常会这样嘲讽那些不会使用截图工具,硬要用手机拍出高斯模糊特效的群友(对个焦怎么就这么难= =),其实不管是日常生活还是工作,QQ ...