wjnba的博客

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中如何通过锁定宽高比的方式来进行屏幕适配。 组件特点1.自动监听浏览器窗口变化,动态计算出高宽比,无视页面放大缩小 2.适用于各种屏幕,常用作项目最外层基础容器 3.突破浏览器中 font-size 最小 12px 限制 组件实现新增LargeScreenContainer.vue文件，在文件里面创建一个外层包裹容器，根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例，根据比例去对外层包裹容器进行缩放，以适应屏幕 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091 ...

前面在图片懒加载一文中讲到什么是图片懒加载和用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命名应遵循 简洁、语义化 的原则 一、变量命名方法: 小驼峰式命名法命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量） 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； 二、常量 某 ...

媒体查询（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 ...

从 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命令连接设备 四、验证

前段时间因为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 最重要的功能之一。 常用的页面布局，其实就那么几个。下面我会介绍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的使用在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- ...