# WebGL

简介：WebGL（全写 Web Graphics Library）是一种 3D 绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL 嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。

# Three.js

简介：Three.js 是 WebGL 的 JavaScript 3D 库，其对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，成为前端开发者完成 3D 绘图的得力工具。

three.js 官方文档 ：threejs.org/

three.js 中文文档 ： techbrood.com/threejs/doc…

Three.js 整体认知（附：Three.js 功能概览）

# 获取数据时遇到 Proxy 包裹的数据

在日常使用命令 npm install / npm install XX 下载依赖的操作中，我经常会遇到无法解析依赖树的问题（依赖冲突）：

但是每当遇到这种情况的时候，我用命令 npm install --legacy-peer-deps 就可以顺利进行下载操作：

这是为什么呢？带着好奇心，我去研究学习了一番 npm install xxxx --legacy-peer-deps 命令是什么？为什么可以解决下载时候产生的依赖冲突呢？（注：我本地当前正在使用的 npm 版本是 8.6.0）

# 前言

作为前端开发我们可能了解到 Hooks 最多都是在 React 或者 Vue 中，但是在编程领域， Hooks 是一个通用术语，通常指的是允许开发者在特定时刻插入自定义代码或逻辑的一种机制。 Hooks 的概念广泛应用于多种场景和技术中，比如在前端框架、后端框架、操作系统、游戏开发引擎等。

但是 Hooks 在我们前端开发领域中还是赋予了一些特定的意义，它是一种更灵活和模块化的方式来编写组件逻辑，可以更好地复用和组织代码。它们使得组件的逻辑更加简洁、模块化和易于维护。

官方文档：https://www.tslang.cn/docs/handbook/decorators.html

这个东西在 java 里叫注解，不过在 ts 中，一个装饰器对应一个方法

# 背景

随着 vue3 的逐渐成熟，公司项目逐渐会存在 vue2 和 vue3 项目共存的情况，兼容 vue2 和 vue3 的公共组件开发能让老项目较好地过渡到 vue3。研究了 vue-demi 的源码和 demo，发现 vue-demi 只是简单地根据 vue 版本生成对应的类似中间件的东西，而且 render 函数也只是做了简单的中转处理；

国外大佬写了一个 vue-demi 解决了 vue2/vue3 的 render 函数 attrs 属性的问题，这里我就直接贴 issue 链接，不做过多说明了： github.com/vueuse/vue-…

虽然 vue-demi 没有提供 sfc 的兼容方案，但是其实仔细想一下，sfc 的解析处理也不应该是由 vue-demi 来解决，应该是交给打包工具将 template 转成 render，而 vue-demi 只需要关注 composition-api 就行；于是往着这个思路，花了几天时间研究一下 vue2.6、vue2.7 和 vue3 的 sfc-compiler，得到以下开发方案。

# 一、pinia 详细用法

# （1）安装 pinia

yarn add pinia

# 或者

npm install pinia

# （2）创建状态仓库

• 先得知道 pinia 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字
• defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

# 介绍

nvm 允许你通过命令行快速安装和使用不同版本的 node。

# 安装

# 快速安装

通过运行 curl 命令进行安装：

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash