前言 pinia的作者最近在博客上放出了一篇pinia的使用文章：《My Top 5 Tips for using Pinia》，里面讲述了5个一般不怎么知道的使用技巧，但是由于讲的很浅，我这边自己理解了一下，做了一些解释，顺带记个笔记。 不要创建无用的 getter 这点我感同身受，在最初学习vuex的时候，前辈们总是会说，getter有缓存，性能会更好，于是，在大多数的教程中，我们总是能看到这种示例写法： export default Vuex.Store({ state: () => ({ counter: 0 }), getters:...
前言 最近新学到一招，利用原生css实现首屏骨架，这样即可以省去在Home.vue组件中单独创建骨架，而且对html结构是0添加。 先看看预览图： 效果还是可以的。 教程 原理就是利用background-image的多重渐变实现骨架占位，配合background-size和background-position进行精准定位，如果你的骨架是大量重复内容，还可以配置background-repeat: repeat-y;进行y轴重复渲染，效果更佳。 然后通过动画控制整体的透明度变化实现动效。 再通过:empty伪类实现对#app是否渲染的判断。:empty会在对应的元素内部没有任何内容时...
前言 多页面其实可以理解为多个独立的业务之间共享部分代码逻辑的实现。业务之间是相对独立的，只是小部分或者大部分的代码是可以共用的，常见的一个场景就是：改头换面形式的换肤。 不同的皮肤之间毫无可复用组件代码的情况下，我们只能将通用的业务逻辑抽离成可复用的部分，简单点来说就是将数据与ui分离，数据是共用部分，ui是各自独立。 最终衍生出的多页面结构大体如下： pages ├── pageA │ ├── App.vue │ ├── index.html │ ├── main.ts └── pageB ├── App.vue ├── index.html └─...
前言 在pinia中使用setup语法是非常舒服的一件事情，但是也会有一些坑点，其中就是当我们使用store.$reset()进行重置的时候会发生报错： Store "xxxx" is built using the setup syntax and does not implement $reset() 意思是$reset并没有实现，我们需要自己手动实现这个。 教程 解决办法我是从stackoverflow看到的，这里放出出处： 《Pinia: $reset alternative when using setup syntax》 我们需要创建一个插件去实现这个功能： stores/p...
前言 通过vite官方的多页面打包示例，我发现它不会将html文件进行压缩处理，使用了一些第三方插件处理多页面，也都无法对html文件进行压缩处理，于是只能自己想办法了。 效果图 教程 [hide] 依赖安装 pnpm i posthtml htmlnano cssnano terser svgo -D 其中主力是posthtml和htmlnano，其它依赖都是他们的子依赖。 编写插件 创建文件：vite-plugin-html.ts import type { Plugin } from "vite"; import posthtml from "posthtml"; import ...
依赖 { "scripts": { "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.2", "@vue/eslint-config-pret...
前言 最近有一个想法，就是在使用rem适配大小的时候，往往我们会引入一个用于设置根元素大小的js脚本文件，但是对于这个脚本的处理根据不同情况会有不同的调用方式。 以插件：amfe-flexible为例： 比如我们是一个纯spa项目，一般就会在main.ts中import引入这个脚本： import "amfe-flexible"; 一般来说，这种做法没什么问题，因为spa的html渲染是js操作的，我们在渲染之前就引入了这个脚本，所以体验上会先通过amfe-flexible设置根元素大小，再进行html渲染，用户体验良好。 随着业务的变化，我们可能会有SSR的需求，首屏loading的需...
前言 unplugin-auto-import这个插件用于解决在书写组件时，总是需要从vue中import引入相同依赖的重复劳动。 import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) 使用自动引入后就不需要手动一个个import const count = ref(0) const doubled = computed(() => count.value * 2) 对于想偷懒的人来说，还是挺不错的。 插件会在代码被vi...
最近碰到一个巨奇葩的问题，项目中采用了unplugin-vue-components，但是vant的组件引入又是import手动按需引入，加上一些很奇怪的配置，导致项目配置变得复杂了，于是抽空将项目的配置全部梳理了一遍，并将import手动按需去除，全部采用自动引入的方式，通过分析打包后的包体，可以看到减少了100kb左右的大小，效果非常可观。 但是问题也出在这了，当我使用自动引入的时候，vant的Dialog组件出现了问题，表现为：当我通过组件的形式使用时，弹窗会自动打开，显示还有问题，但是查看v-model:show变量是false；我开始以为是样式问题，单独引入dialog样式无效...
前言 实现一个自定义的置入按钮，然后实现置入html代码的功能，比如我们在使用外部iframe标签时，如果直接粘贴，会被识别为string值，从而导致无法正确展示内容，所以我们需要一个置入功能。 我一开始想通过控制options的方式来实现，发现不太行，最后转用：先声明html结构，然后options关联的方式。 教程 自定义工具栏 目前个人觉得最方便的方式就是先写html结构，然后options中通过container进行关联。 <div id="quill-edit-toolbar" class="ql-toolbar ql-snow"> <span class...
前言 上一篇是修改官方的图片上传行为，这次是修改官方视频按钮默认行为，你会发现官方的视频默认行为，总是采用iframe的形式，如果我们希望是原生video元素，就没办法了，于是就有了本篇教程。 这次自定义和图片就略有不同了，我们不能直接这么插入： editor.insertEmbed(range.index, 'video', src, Quill.sources.USER); 如果采用这种方式，会导致和官方的行为一致，变成插入的是iframe元素了。 为此，我们需要了解一个新知识：Blot 官方文档对于Blot的介绍很少，我们可以理解是一种行为扩展的方式，可以对用户输入的内容进行转换，...
前言 quill默认图片上传是将图片转为base64字符串，这个主意很不错，但是如果考虑后端存储的大小，就不太美丽了，因为base64的字符串大小往往比实际图片大小占用还要大一些，所以一般的做法是自定义文件上传，后端返回外链地址，用链地址来代替base64，以减少富文本的内容大小。 我目前的做法是将官方默认图片上传的行为改变，这样按钮样式啥的就不用自己操心了。 教程 修改默认按钮行为 我们在初始化quill实例的时候，会传入一个options来控制样式和顶部菜单功能。 import type { QuillOptionsStatic } from 'quill'; const edit...
前言 最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示： vue router SyntaxError: Unexpected token '?' 我开始以为是路由出现问题了，结果查了半天发现是es的新特性??语法导致的。 由于vite使用的是esbuild打包，所以我在esbuild的文档上查询到，??语法最低只支持Chrome 80版本，我一看安装的版本v78，两眼一黑。 看来要做一个低版本的兼容处理了。 教程 vite的配置选项中有一个build选项，里面有一个target目标，表示你需要打包...
前言 今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。 超级尴尬，导致静态loading的样式会大小变化一下，很难受。 解决的思路还是很简单的，有两种方式： 添加class黑名单，这样对应的class就不会转换了； 排除指定文件，该文件不会被转换； 我项目使用的是rem转换，vw的转换其实配置也差不多。 解决办法 rem插件postcss-pxtorem 配置postcss.config.js中postcss-pxtorem的配置： module.exports = { plugins: { ...
全局方法挂载和类型声明 全局挂载还是很简单的，照着官方的例子写就可以了，我的做法是创建了一个单独ts文件，通过app.use()的方式来进行批量挂载，代码如下： import type { App } from "vue"; /** * @description: 获取assets文件 * @param {string} path * @Date: 2023-05-05 10:05:18 * @Author: mulingyuer */ export function getAssetsFile(path: string): string { return new U...
看了下vant的tab组件源码，当开启swipeable功能后，其实会对容器监听touch事件，这就导致我们在内容部分存在横向的滚动的时候，会导致同时触发touch事件，从而产生了冲突。 解决办法就是二选一，要不在这个横向scroll的时候不触发swipeable，要不放弃swipeable。 如果是第一种方案，我们需要对存在横向scroll的容器元素，做一个事件冒泡阻断，问题就解决了。 <div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>
服务器返的时间是一个utc的时间字符串2022-12-01 03:00:30，我们需要将其转为我们本地时区，以东八区为准，正确的时间应该是2022-12-01 11:00:30。 我当时这么写的： moment(new Date(time)).local(); 其实这是有问题的，首先我其实是为了防止time这个变量错误，所以使用了new Date，但其实是不对的，new Date会导致时间被转为本地时间且不会加上本地时区的8个小时。 new Date("2022-12-01 03:00:30"); //Thu Dec 01 2022 03:00:30 GMT+0800 (中国标准时间)...
typescript import type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(target)) {...
eslint校验的一些问题（暂时无解） 在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0" 具体的一些可以参考官方提供的2.7升级指南：2.7日志 官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。 虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这个目前找不到办法解决，只能等后续...
对象扁平化 其中objectDit表示的是对象的分割符 /** * @description: 对象扁平化 * @param {object} data * @Date: 2022-06-01 17:41:13 * @Author: mulingyuer */ export function objectFlat(data: object, options = { objectDit: "." }): object { let newObj = {}; let process = (key: string, value: any) => { if (Ob...
概述 一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。 但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。 所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。 api了解 vuex官方提供了几个api： registerModule动态注册模块api unregisterModule卸载一个动态模块 ...
安装 vue2版需要安装8.x版本的，9.x的是vue3版本 使用上大同小异。 vue2安装： yarn add vue-i18n@8 vue3安装： yarn add vue-i18n 封装 官方虽然支持很不错的用法，但是自定义处理是难免的。 vue3 文件目录结构 ├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts...
原理 全局存在一个弹窗管理器，他管理着一个数组，所有的弹窗触发全部包成一个函数，交给管理器，管理器去查看队列是否有内容，如果有内容就不触发，无内容就将本次函数push进数组中，然后触发next方法弹出下一个弹窗。 当弹窗关闭后，触发管理器的remove方法，数组首位出栈，触发next方法，弹出下一个弹窗 示意图 源码 四个文件： dialogMap.ts 弹窗数据，可能这个弹窗这次需要队列，下次就不需要，通过这个配置 index.ts 入口文件 queueManager.ts 管理器 types.ts 类型声明 types.ts /* * @Author: mulingyue...
引入组件的方式 传统模式 import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') 这种方式在vue组件中使...
最近评论