vue3知识整理
Vue3
1.Vue3 简介
2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王)
耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者
github 上的 tags 地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
2.Vue3 带来了什么1.性能的提升
打包大小减少 41%
初次渲染快 55%, 更新渲染快 133%
内存减少 54%
…
2.源码的升级
使用 Proxy 代替 defineProperty 实现响应式
重写虚拟 DOM 的实现和 Tree-Shaking
…
3.拥抱 TypeScript
Vue3 可以更好的支持 TypeScript
4.新的特性
Composition API(组合 API)
setup 配置
ref 与 reactive
watch 与 watchEffect
provide 与 inject
…
新的内置组件
Fragment
Teleport
Suspense
其他改变 ...
vue大屏适配方案
在做可视化大屏项目难免会考虑到屏幕适配的难题,如果有一个适配各种屏幕的基础容器组件处理这个事情,我们就可以放心写业务,下面介绍在vue中如何通过锁定宽高比的方式来进行屏幕适配。
组件特点1.自动监听浏览器窗口变化,动态计算出高宽比,无视页面放大缩小
2.适用于各种屏幕,常用作项目最外层基础容器
3.突破浏览器中 font-size 最小 12px 限制
组件实现新增LargeScreenContainer.vue文件,在文件里面创建一个外层包裹容器,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例,根据比例去对外层包裹容器进行缩放,以适应屏幕
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091 ...
vue中使用vue-lazyload实现图片的懒加载
前面在图片懒加载一文中讲到什么是图片懒加载和用js怎么实现懒加载,本文记录一下图片懒加载插件 vue-lazyload的使用。
一、安装依赖包npm1npm i vue-lazyload -S
yarn1yarn add vue-lazyload
二、全局注册插件1234567891011// 引入插件import VueLazyload from 'vue-lazyload'// 注册插件const loadimage = require('./assets/loading.gif')const errorimage = require('./assets/error.gif')Vue.use(VueLazyload, { preLoad: 1.3, error: errorimage, loading: loadimage, attempt: 1})
配置项参数说明:
键
描述
默认值
选项
preLoad
表示lazyload的元素,距离页面底部距离的百分比.计算值为(p ...
JS命名规范
js命名应遵循 简洁、语义化 的原则
一、变量命名方法: 小驼峰式命名法命名规范:前缀为形容词 (函数前缀为动词, 以此来区分函数和变量)
123456//好的命名方式let maxCount = 10;let tableTitle = '啦啦啦';//不好的命名方式let setConut = 10;let getTitle = '啦啦啦';
临时变量1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。2:循环变量可以简写,比如:i,j,k等。
s:表示字符串。例如:sName,sHtml;
n:表示数字。例如:nPage,nTotal;
b:表示逻辑。例如:bChecked,bHasLogin;
a:表示数组。例如:aList,aGroup;
r:表示正则表达式。例如:rDomain,rEmail;
f:表示函数。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例如:oButton,oDate;
g:表示全局变量,例如:gUserName,gLoginTime;
二、常量
某 ...
CSS媒体查询
媒体查询(Media Queries)
媒体查询(Media Queries)是 CSS3 中的一个特性,它允许你根据设备的特性(如宽度、高度、颜色等)来应用不同的 CSS 样式。这使得开发者能够为不同的设备(如桌面电脑、平板电脑、手机等)或同一设备的不同状态(如横屏或竖屏)创建特定的布局和样式。
媒体查询由两部分组成:媒体类型(Media Type)和媒体特性(Media Features)。
媒体类型:描述了设备的一般类别,如 all(所有设备)、screen(电脑屏幕、平板电脑、智能手机等)、print(打印机和打印预览)等。
媒体特性:描述了设备的具体特性,如 width(视口宽度)、height(视口高度)、color(设备颜色位数)等。
媒体查询的基本语法如下:
1234css@media mediaType and (mediaFeature1: value1) and (mediaFeature2: value2) { /* CSS 规则 */ }
例如,如果你想为宽度小于 768px 的设备设置特定的样式,你可以这样写:
12345 ...
uniapp安卓手机无线真机调试
从 Android 11 开始USB调试新增了无线调试功能,需要搭配 adb 30.0.0 及以上版本使用,请确认你的系统和adb是否符合要求。
一、下载adbadb下载地址: SDK Platform Tools版本说明
选择对应的系统版本,我是windows系统,所以选择如下:
下载解压完之后放到HBuilderX的adbs文件夹里 重命名为34.0.0
二、在手机上打开无线调试手机连上wifi,保证手机和电脑在同一局域网,进入开发者选项开启无线调试
三、使用配对码配对1、手机上点击使用配对码配对设备,查看配对码和ip地址:
2、进入34.0.0 文件夹,并打开cmd窗口:
使用adb pair命令和手机配对
继续使用adb connect命令连接设备
四、验证
hexo博客butterfly主题cdn加载失败?那就换
前段时间因为jsdelivr挂掉,无法访问第三方文件,导致我的博客长时间出现资源加载问题,后面更换了cdn,但有时候还是会无法加载,未从根本上解决问题。
于是今天决定,把第三方文件放在本地加载,查看butterfly官网,看到了两种方案可供选择。
1、修改third_party_provider①.找到/butterfly/_comfig.yml文件,找到下面部分,把标注的部分改为local
②.安装hexo-butterfly-extjs依赖,执行
1npm install hexo-butterfly-extjs@1.3.4
*注意:hexo-butterfly-extjs的版本要和butterfly对应,如果版本不对应的话,可能会导致这个主题需要的第三方依赖无法完全下载到node_modules,导致后面出错。当然也可以直接执行npm i 依赖@版本号,第三方依赖和版本号在/butterfly/plugins.yml。
2、下载第三方文件到本地,修改option文件地址,覆盖原有的配置
参数
解释
internal_provider
主题内部文件可选 ...
实现五种CSS经典布局
页面布局是样式开发的第一步,也是 CSS 最重要的功能之一。
常用的页面布局,其实就那么几个。下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面。
一、空间居中布局空间居中布局指的是,不管容器的大小,项目总是占据中心点。
CSS 代码如下。
1234.container { display: grid; place-items: center;}
上面代码需要写在容器上,指定为 Grid 布局。核心代码是place-items属性那一行,它是一个简写形式。
1place-items: <align-items> <justify-items>;
align-items属性控制垂直位置,justify-items属性控制水平位置。这两个属性的值一致时,就可以合并写成一个值。所以,place-items: center;等同于place-items: center center;。
同理,左上角布局可以写成下面这样。
1place-items: start;
右下角布局。
1place-items ...
谷歌浏览器书签同步到码云
在我们更换电脑、或者重新安装谷歌浏览器的情况下,如果书签没有备份,原来收藏的网页就找不到了,我们需要一种手段来保存、同步书签,这时我们可以通过浏览器扩展程序配合码云来实现这个功能。
准备一、在码云上创建一个仓库,用来保存书签。
二、在仓库里新建一个名为bookmarks.html的空文件。
必须要创建bookmarks.html文件,不然推送到仓库的时候会失败。
三、创建私人令牌,用来推送书签文件到仓库。
四、下载使用扩展程序。
下载扩展程序
下载扩展程序后解压,导入到谷歌浏览器扩展程序里。
点击程序,向下依次填入私人令牌、用户名、仓库名、文件路径(bookmarks.html)、分支(master),如下图所示:
填完后,我们就可以通过点击Upload按钮把书签同步到码云上,当更换电脑、重新安装浏览器后可通过点击Download按钮同步书签到本地了。
patch-package的使用
patch-package的使用在vue实际项目中,有时候会涉及到修改node_modules里面的代码,但是如果直接在本地修改node_modules里面的代码,会带来很大的麻烦,比如更换电脑拉取项目后,执行npm install安装项目依赖,会恢复到没改之前的代码,这时我们可以使用patch-package这个库来解决这类问题。
1、安装patch-package1npm i patch-package --save-dev
2、修改完依赖后,运行patch-package创建patch文件12npx patch-package 依赖名称例子: npx patch-package wangeditor
3、修改package.json的内容,在scripts中加入"postinstall": "patch-package",这个是为了npm install的时候自动为依赖包打上我们改过的依赖1234"scripts": { ... "postinstall": "patch- ...