- 博客(58)
- 收藏
- 关注
RSS订阅原创 手写vite-alias插件
手写vite-alias其实就是抢在vite.config.js配置文件执行之前，去改写vite.config.js配置文件。
2024-05-14 20:33:45
203
原创 vite环境变量配置
dotenv会自动读取.env文件，并解析这个文件中的对应环境变量，并将其注入到process中，vite 会将对应的环境变量注入到import.meta.env里去，如.env 里配置 VITE_APP_KEY 就可读取出来。客户端通过import.meta.env 获取配置内容。.env.development 配置。vite.config.js 配置。
2024-05-13 09:40:28
183
原创 vite依赖预构建与配置文件
建议建立vite.base.config.js 基础配置，vite.dev.config.js 开发环境配置，vite.prod.config.js 生产环境配置 vite.config.js 项目配置入口。首先vite会找到对应的依赖，然后调用esbuild（对js语法进行处理的一个库），将其它规范代码转换成esmodule代码，然后放到当前目录下的node_modlues/.vite/deps。vite 在处理过程中会把非绝对路径或者相对路径的引用，会尝试进行路径补全操作。
2024-05-11 17:03:55
376
原创 sso单点登录
单点登录（Single Sign-On，简称SSO）是一种身份认证和访问控制的机制，允许用户使用一组凭据（如用户名和密码）登录后，其它多个系统项目可直接访问。
2024-05-11 08:45:29
1347
原创 pnpm包管理工具的理解
a: 如果你对同一依赖包需要使用不同的版本，则仅有 版本之间不同的文件会被存储起来。例如，如果某个依赖包包含 100 个文件，其发布了一个新 版本，并且新版本中只有一个文件有修改，则 pnpm update 只需要添加一个 新文件到存储中，而不会因为一个文件的修改而保存依赖包的 所有文件。b: 所有文件都保存在硬盘上的统一的位置。当安装软件包时， 其包含的所有文件都会硬链接自此位置，而不会占用 额外的硬盘空间。c: 最终结果就是以项目和依赖包的比例来看，你节省了大量的硬盘空间， 并且安装速度也大大提高了！
2024-05-10 11:24:13
238
原创 nuxt2导航守卫
router.js 文件，与vue-router写法一致，可写路由前，也可写路由后处理逻辑。若是如上配置，则需要在根目录下建立plugins/router.js文件。auth.js 文件。
2024-05-07 08:52:42
131
原创 nuxt2路由，以及重构以前项目，路由使用
/ 若是记不清name对应的是params，path对应分query的话，就想26个英语单词pq连在一起就行。注意：运行启动若是报错，缺少nuxtjs/builder模块的话，则npm安装下此模块即可。list.vue 接收参数，与vue之前是一样的。需改成如下的返回结果，返回一个函数。需要修改成现在的js方式。
2024-05-06 15:36:34
903
原创 nuxt2生命周期执行顺序
/ 判断路由传参对不对，若是不符合规范，则可让页面跳转到404页面，不至于页面出现空白情况。接下来是vue中生命周期，比较常用，就不做解释里。'middleware list 局部'// 使用局部的中间件。// 第二种写法如下。
2024-05-06 11:05:18
1214
原创 安装nuxt3环境
安装nuxt3，按照nuxt官网，node版本需在18以上执行 npx nuxi@latest init ‘xxx’终端控制台可能会报错： ERROR Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed可在命令窗口输
2024-04-30 16:41:58
277
原创 http协商缓存和强缓存
若是不存在强缓存，则在协商缓存中，客户端会发送带有缓存数据标识的请求头部字段，向服务器验证资源的有效性。Last-Modified 和 If-Modified-Since：服务器通过 Last-Modified 响应头告知客户端资源的最后修改时间。Expires的判断机制是：当客户端请求资源时，会获取本地时间戳，然后拿本地时间戳与Expires设置的时间做对比，如果对比成功，则走强缓存，对比失败，则向服务器发送请求。协商缓存（Last-Modified）需与If-Modified-Since配合。
2024-04-26 17:23:30
708
原创 vue-router v4.x命名路由，编程式跳转
问题：name方式传参有如下警告：[Vue Router warn]: Discarded invalid param(s) “username” when navigating，各位大佬有解决办法麻烦告知一声。
2024-04-07 17:36:15
342
原创 vue3 中使用web components
/ 使用vue 提供的defineCustomElement， 将其变成web component。// 引用类型传参，需要使用JSON.stringify。// 传递的参数是object，因此需要转换。
2024-04-02 17:24:45
441
原创 vue3.3优化了defineProps和defineEmits写法
/ 为 unkonw 缺少类型提示 为了解决这个问题 vue 提供了一个 propType 类型。// 添加了 PropType 后 props.child 会推断成 string类型数组。
2024-04-02 10:14:02
240
原创 vuejs 设计与实现（嵌套的effect与effect栈）
问题：希望当修改obj.foo时会触发effectFn1执行。由于effectFn2嵌套在effectFn1里，所以会间接触发effectFn2执行，而当修改obj.bar时，只会触发俄effectFn2。原因：发生嵌套时activeEffect会存储内层副作用函数，不会恢复到原来的值。
2024-03-30 13:39:37
269
原创 vue3项目 引入unocss原子化
安装unocss在vite.config.ts 中进行引入plugins: [unoCss({rules:[// 定义了flex，red 即可直接使用})],})main.ts 中引入App.vue 中 使用</</在vite.config.ts 中也可以增加一些预设/*** presetIcons: 加载icon图标* presetAttributify： 代码中如m-1可以直接写m="1"* presetUno： 兼容了tailwindcss，可以直接使用里面的class。
2024-03-29 11:18:07
875
原创 手写promise 中then catch finally以及静态方法resolve，reject，all，allSettled，race
原因：再执行非setTimeout中promise后，status会变成fulfilled状态，status成了一种已确认的状态。解决办法：在代码函数调用中增加try catch 处理。
2024-03-19 15:42:22
448
1原创 js 深拷贝和浅拷贝的理解
区别：简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，如果B没变，那就是深拷贝。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。例如：let a=[0,1,2,3,4], b=a;console.log(a===b); // truea[0]=1;cons...
2019-12-19 14:14:54
596
转载 Vue实现数据双向绑定的原理：Object.defineProperty（）
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 gette...
2019-12-06 09:46:08
312
原创 3D 转换常用的技术api
1.CSS3 3D 转换的常用API介绍首先先上一张css 3D的坐标系：接下来我们来介绍几个常用的api：旋转 rotateX() rotateY() rotateZ() 以上几个api分别代表绕x，y，z轴旋转，如下例子为绕x轴旋转的例子：<style>.d3-wrap { position: relative;...
2019-11-21 09:53:26
238
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人