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版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
随机推荐
- 新建立git分支,之后将分支合并到master上
1.打开PowerShell 进入解决方案中的文件夹中,并列出目前远程的所有分支 命令:git branch -a 2.从远程获取最新版本到本地 命令:git fetch --all 3.使本地代码与 ...
- 在K8S中,deploy升级过程包括什么?
在Kubernetes (K8S) 中,Deployment的升级过程主要包括以下几个步骤: 更新Deployment配置: 当需要对应用程序进行升级时,通常会更新Deployment的YAML配置文 ...
- 第三届人工智能,大数据与算法国际学术会议 (CAIBDA 2023)
第三届人工智能,大数据与算法国际学术会议 (CAIBDA 2023) 大会官网:http://www.caibda.org/ 大会时间:2023年6月16-18日 大会地点:中国郑州 截稿日期:2 ...
- 深度学习应用篇-自然语言处理[10]:N-Gram、SimCSE介绍,更多技术:数据增强、智能标注、多分类算法、文本信息抽取、多模态信息抽取、模型压缩算法等
深度学习应用篇-自然语言处理[10]:N-Gram.SimCSE介绍,更多技术:数据增强.智能标注.多分类算法.文本信息抽取.多模态信息抽取.模型压缩算法等 1.N-Gram N-Gram是一种基于统 ...
- 10.2 调试事件获取DLL装载
理解了如何通过调试事件输出当前进程中寄存器信息,那么实现加载DLL模块也会变得很容易实现,加载DLL模块主要使用LOAD_DLL_DEBUG_EVENT这个通知事件,该事件可检测进程加载的模块信息,一 ...
- 本地Nuget包管理
nuget.org有时候会抽风,VS无法自动下载程序包.这时,我们可以配置本地nuget包搜索路径. 1 下载Nuget package 以anycad rapid sdk为例,可以先从百度云盘下载最 ...
- XPath从入门到精通:基础和高级用法完整指南,附美团APP匹配示例
XPath 通常用来进行网站.XML (APP )和数据挖掘,通过元素和属性的方式来获取指定的节点,然后抓取需要的信息. 学习 XPath 语法之前,首先了解一下一些概念. 概念介绍 节点之间的关系 ...
- KMP 学习笔记
前言-- \(char\) 与 \(string\) 有的时候 \(char\) 数组确实比 \(string\) 好用,且字符串长度很大时 \(string\) 会被卡掉,所以不要犯懒,老实用 \( ...
- CentOS7环境下编译FFmpeg
操作系统:CentOS 7.6.1810_x64 ffmpeg版本:4.2.1 ffmpeg是一个功能非常强大的音视频处理工具,很多软件依赖它,这里记录下编译过程,以便后续查阅. ffmpeg官方网址 ...
- CF1907
A 模拟. B 模拟. C 若原字符串中出现次数最多的次数为 \(cnt\),答案是 \(\max(n\%2,cnt\times 2-n)\). D 二分 \(k\),然后从后往前倒,计算出到达每个线 ...