探讨nuxt3采用了Hydration水合这样一个概念，用于处理服务端生成静态html与客户端js脚本的结合，实现一个可动态交互的页面应用，这个过程被称之为水合。水合的过程可能会相对复杂一些，需要考虑到脚本加载、DOM的匹配、交互的激活（事件）、状态管理等等。其中状态的管理，我目前使用的时候，发现它并不是理想中的那种状态。理想中可能是：服务端渲染时发起了一个api请求，获得了用户的数据，此时我们会将其存储到状态管理中，比如pinia之类的，然后客户端获取到服务端返回的数据，然后自己将pinia的数据恢复到内存中，如果使用了持久化存储，应该会自己将其存储到local之中。但是，实际情况是，...
前言配置站点地图 sitemap.xml和robots.txt有利于SEO的快速抓取，对于一些站点工具来讲，站点地图可以帮助快速分析整个站点的内容，robots则更好的控制爬虫的抓取。准备工作安装nuxt的seo整合模块：@nuxtjs/seopnpm i @nuxtjs/seo -Dnuxt.config.ts中加入该模块：export default defineNuxtConfig({ modules: ['@nuxtjs/seo'] })配置站点链接事实上我们还应该配置一下站点的链接，站点链接用于在站点地图中拼接出完整的访问链接，但是在开发模式下站点地图的...
前言一般情况下确实用不到这种极端处理方案，因为有名的插件依赖，基本上能碰到的bug情况是非常少见的。这篇文章解决的问题是：将 node_modules 中的模块自己修改后，又不想影响全局引入方式，或者说不方便去修改该模块的引入的时候使用的。教程中使用的是pnpm方式，如果你使用npm或者yarn，原理是一样的，可以参考完再自己去看对应的命令使用方式，大差不差的。[hide]教程假设我们已经将模块自己改好并打包好了，此时我们一般会得到一个dist目录，这个是模块打包后的产物，假设这个模块在node_modules中的文件夹夹名字是test，那么你就需要将dist放置在自己新创建的test目...
前言需要注意的是，我们的pinia仓库持久化操作只有在客户端渲染时操作才能触发，比如当第一次访问页面时，你可能直接在setup中给仓库存储内容，这是无效的，我们需要保证在客户端渲染时触发才行，比较好的办法就是在onMounted生命钩子中触发。究其原因就是服务端是没法操作local、cookie这些浏览器配置，而在setup中的代码，是会在服务端也运行的，这就可能导致部分代码到了客户端不再运行。教程安装依赖pnpm i @pinia/nuxt @pinia-plugin-persistedstate/nuxt安装成功后在nuxt.config.ts中配置模块：// nuxt.config...
前言Nuxt3的环境变量配置有点和平时vue项目的不同，它为了考虑服务端渲染和客户端渲染两种情况，以及安全相关的考量，它的环境变量用起来会有点繁琐。在官方的预设中，你可以使用.env这个文件名的环境变量文件，但是它只会在开发中使用，并不会在构建生产的时候使用，所以我的建议就是放弃使用.env文件名，转而使用指定具体文件的形式。但是即便我们指定了环境变量文件，它也不会出现在Nuxt提供的useRuntimeConfig配置composable中，考虑到安全，我们在服务器渲染时可能有部分环境变量不能出现在客户端中，以防有人恶意获取从而产生破坏。所以nuxt并没有一股脑的把环境变量挂载上去，而...
前言最近发现这个很有意思的配置，可以让项目中强制使用指定的包管理器，其他人瞎鸡儿用的话就会报错阻止，这个配置其实在pnpm的官方文档里就有，只是一直都没发现。这里贴一下出处：Only allow pnpm下面开始教程。教程在开始之前我们需要了解一下，npm在安装包的时候其实是有一些预设的生命周期脚本的，当然这些脚本其实就是package.json中的scripts定义的命令，官方预设了一些名字，当你添加对应的脚本名字和内容的时候，npm会在install的生命周期中去运行对应时机的脚本命令。生命周期文档：npm-install示例：{ "scripts": {...
前言最近发现动态去拼接资源路径还是挺常用的，于是把我之前封装的hooks单独分享出来。教程useAssets.tsexport function useAssets() { /** 前缀补路径斜杠 */ // eslint-disable-next-line @typescript-eslint/no-unused-vars function addPrefixSlash(path: string) { return path.startsWith("/") ? path : `/${path}`; } /** ...
前言项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。默认情况vite的兼容目标是支持原生ES模块，原生ESM动态导入和import.meta的浏览器，官方预设的兼容目标如下：es2020edge 88firefox 78chrome 87safari 14而我们的可选链正是es2020版本才有的，所以vite在打包后不会做任何兼容处理，这就导致了一些浏览器版本低一点的设备，打开网站就会出现白屏的情况。显然这么新的...
前言这段时间对接了下web版的谷歌登录，总体来说坑非常多，即便到现在，我都感觉这个教程都只能算是一个应急处理方案，并不完美，缺点如下：文档稀少，官方提供的教程自由度很差ui不可控，前端无法自定义触发按钮不多说，开搞！教程官方文档和流程官方文档：web谷歌登录流程：我们需要先去将需要web登录的域名去向谷歌申请一个客户端id，用于在客户端登录处理。申请地址：开发者后台创建凭据 --- 选择OAuth 客户端ID --- 应用类型选择 web应用 --- 自己填写一个名称已获授权的 JavaScript 来源这个选项意思就是你允许使用这个客户端id对应的网站域名，添加对应的网站地址，个人测试...
前言在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...
前言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 └── ma...
前言最近遇到这么一个头疼的需求，第三方提供了两份sdk，一个是针对安卓端使用的，一个是针对ios端使用的，但是他们都会在全局window上挂载同名属性对象，这就让我很难受了。<script src="/sdk/sdk.min.js"></script> <script src="/sdk/ios_sdk.min.js"></script>前端如果想要使用这个sdk就必须在head引入它，但是它又有两个脚本，后来的脚本又会覆盖上一个脚本在全局挂载的对象。理论上一个优秀的sdk不应该出现这种问题，它应该自...
前言通过vite官方的多页面打包示例，我发现它不会将html文件进行压缩处理，使用了一些第三方插件处理多页面，也都无法对html文件进行压缩处理，于是只能自己想办法了。效果图教程[hide]依赖安装pnpm i posthtml htmlnano cssnano terser svgo -D其中主力是posthtml和htmlnano，其它依赖都是他们的子依赖。编写插件创建文件：vite-plugin-html.tsimport type { Plugin } from "vite"; import posthtml from "posthtml"...
依赖{ "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": { "...
vite中环境变量获取方式vite在处理环境变量时和之前webpack并不一样，它只会将环境变量文件中VITE_为前缀的变量加载到import.meta.env对象上去，而且并不支持动态key的形式：import.meta.env[key] //无效的因为import.meta.env.xxx打包时会被替换成字符串，比如有这么一个环境变量：VITE_NAME="aaa"；const name = import.meta.env.VITE_NAME; //打包后 const name = "aaa";所以如果你是一个动态的key，那就没法进行正确...
前言移动端开发的时候，总是会遇到编写全局浮动组件的情况，比如客服图标啦，消息通知啦，但是浮动就会产生一个问题：阻挡了下层内容展示，常见的做法就是让这个浮动的内容支持拖拽功能，用户将浮动组件拖拽到其他位置即可。这里我参考了vConsole组件，自己根据实际情况编写了一个拖拽指令。代码指令文件：drag.tsimport type { Directive } from "vue"; /** 指令接收的参数 */ interface BindingValue { /** 出现位置的偏移量 [x,y] */ offset?: [number, number]...
前言最近有一个想法，就是在使用rem适配大小的时候，往往我们会引入一个用于设置根元素大小的js脚本文件，但是对于这个脚本的处理根据不同情况会有不同的调用方式。以插件：amfe-flexible为例：比如我们是一个纯spa项目，一般就会在main.ts中import引入这个脚本：import "amfe-flexible";一般来说，这种做法没什么问题，因为spa的html渲染是js操作的，我们在渲染之前就引入了这个脚本，所以体验上会先通过amfe-flexible设置根元素大小，再进行html渲染，用户体验良好。随着业务的变化，我们可能会有SSR的需求，首屏loadi...
前言unplugin-auto-import这个插件用于解决在书写组件时，总是需要从vue中import引入相同依赖的重复劳动。import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2)使用自动引入后就不需要手动一个个importconst count = ref(0) const doubled = computed(() => count.value * 2)对于想偷懒的人来说，还是挺不错的。插件会在代...
最近评论