- 博客(91)
- 收藏
- 关注
RSS订阅原创 03-雾化
/ 让三维物体 产生阴影，使用平面接收阴影。// 创建一个地面用于接收阴影。// 使用平面接收阴影。// 设置灯光开启阴影。// 创建一个立方体。
2023-06-30 14:32:21
142
原创 02-阴影
1.给立方体添加castShadow，让立方体产生阴影。// 让三维物体 产生阴影，使用平面接收阴影。4.渲染器添加可以使用阴影的能力。// 创建一个地面用于接收阴影。2.创建一个地面用于接收阴影。// 使用平面接收阴影。// 设置灯光开启阴影。3.设置灯光开启阴影。// 创建一个立方体。
2023-06-30 12:23:47
107
原创 04-Buffer的使用
2.使用 Buffer.allocUnsafe() 方法创建指定大小的 Buffer，该方法不会清空 Buffer 中的数据，因此创建的 Buffer 可能包含敏感信息。1.使用 Buffer.alloc() 方法创建指定大小的 Buffer，该方法会将 Buffer 中的所有字节都设置为 0。这个例子中，创建了一个大小为 10 字节的未初始化的 Buffer 对象，然后使用 fill() 方法将所有字节都设置为 0。将字符串转成对应的ascall码的16进制，Buffer中存储的是其对应的16进制。
2023-06-23 08:39:22
179
原创 03-包管理工具
我们可以直接设置npm的镜像：npm config set registry https://registry.npm.taobao.org。npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令。查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中。配置后我们可以通过 npm run 命令的key来执行这个命令。这个时候，我们可以使用cnpm，并且将cnpm设置为淘宝的镜像。npm start和npm run start的区别是什么。
2023-06-23 08:17:07
170
原创 02-常用内置模块
借助于Node帮我们封装的文件系统，我们可以在任何的操作系统（window、Mac OS、Linux）上面直接去操作文件。为了简化用户的工作，Node.js 抽象出操作系统之间的特定差异，并为所有打开的文件分配一个数字型的文件描述符。encoding选项：https://www.jianshu.com/p/899e749be47c。并且我们知道在Mac OS、Linux和window上的路径时不一样的。path模块用于对路径和文件进行处理，提供了很多好用的方法。将文件和某个文件夹拼接。
2023-06-22 22:12:03
403
原创 15-压缩
HTTP压缩是一种内置在服务器和客户端 之间的，以改进传输速度和带宽利用率的方式；HTTP压缩的流程什么呢？HTTP数据在服务器发送前就已经被压缩了兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器。
2023-06-22 16:08:39
249
原创 14-代码分离
代码分离（Code Splitting）是webpack一个非常重要的特性。它主要的目的是将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件。比如默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载， 就会影响首页的加载速度。代码分离可以分出出更小的bundle，以及控制资源加载优先级，提供代码的加载性能Webpack中常用的代码分离有三种模式：配置一个index.js和main.js的入口；他们分别有自己的代码逻辑。Entry
2023-06-22 15:45:25
116
原创 13-环境区分
注意babel的配置文件，由于需要判断环境，所以我们在webpack.common.js进行process.env.NODE_ENV的挂载，在babel.config.js拿到进行判断不同环境，babel不同的配置。编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可。在不同的配置文件中使用变量来说明环境，也可以通过配置脚本带上–env production来表明开发环境，这样就可以在webpack.config.js中导出的函数中通过参数判断环境，当然最终返回的还是对象。
2023-06-21 17:04:18
58
原创 11-historyApiFallback
historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新 时，返回404的错误。如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容；可以配置from来匹配路径，决定要跳转到哪一个页面。boolean值：默认是false。
2023-06-21 16:59:30
36
原创 10-devServer与watch
webpack-dev-middleware 是一个封装器(wrapper)，它可以把 webpack 处理过的文件发送到一个 server。安装加载vue所需要的依赖:npm install vue-loader vue-template-compiler -D。比如在index.html中，我们需要依赖一个 abc.js 文件，这个文件我们存放在 public文件 中；Vue的加载我们需要使用vue-loader，而vue-loader加载的组件默认会帮助我们进行HMR的处理。host设置主机地址。
2023-06-21 16:55:39
387
原创 09-ESlint
ESLint是一个静态代码分析工具（Static program analysis，在没有任何程序执行的情况下，对代码进行分析）；ESLint可以帮助我们在项目中建立统一的团队代码规范，保持正确、统一的代码风格，提高代码的可读性、可维护 性；并且ESLint的规则是可配置的，我们可以自定义属于自己的规则；
2023-06-21 16:44:59
373
原创 08-babel
babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。那么我们就需要去安装相关的依赖：npm install babel-loader @babel/core。在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件。如果我们希望在命令行尝试使用babel，需要安装如下库。使用babel来处理我们的源代码。
2023-06-21 16:41:34
679
原创 07-source-map
浏览器会根据我们的注释，查找响应的source-map，并且根据source-map还原我们的代码，方便进行调试。source-map是从已转换的代码，映射到原始的源文件。根据源文件，生成source-map文件，webpack在打包时，可以通过配置生成source-map；在Chrome中，我们可以按照如下的方式打开source-map,默认是打开的（浏览器小齿轮设置）在转换后的代码，最后添加一个注释，它指向sourcemap；目前的source-map长什么样子呢？
2023-06-21 16:23:05
187
原创 05-Browserslist
浏览器市场占有率：https://caniuse.com/usage-table。就是当我们设置了一个条件：> 1%；我们表达的意思是css要兼容市场占有率大于1%的浏览器，js也要兼容市场占有率大于1%的浏览器；如果我们是通过工具来达到这种兼容性的，比如后面我们会讲到的postcss-prest-env、babel、autoprefixer等如何可以让他们共享我们的配置呢？Browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置。
2023-06-21 14:27:41
574
原创 04-webpack中使用plugin
loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。
2023-06-20 22:16:30
454
原创 02-通过webpack搭建一个基础的项目
经过上述操作，我们进行打包就可以看到dist文件夹下帮除了帮我们生成bundle.js之后，还生成了index.html文件，此时我们通过浏览器打开生成后的html就可以看到效果了。在经过上述操作之后我们的项目还是需要通过open live server来打开html，此时我们可以通过webpack-dev-server来提供服务。对项目进行打包，并在dist文件夹下可以看到打包后的代码。在webpack.config.js中加入下面的代码。文件夹用来存放项目的逻辑代码，并在src文件夹下新建。
2023-06-20 20:15:24
1536
1
原创 01-初识webpack
每找到一个 Module ，就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后， 再解析出当前 Module 依赖的 Module 这些模块会以 Entry为单位进行分组，Entry及其 所有依赖的 Module 被分到一个组也就是 Chunk。1.webpack的安裝目前分为两个：webpack、webpack-cli（非必须安装，webpack-cli会读取webpack.config.js的内 容然后进行解析，再传入webpack，vue有自己的实现）。
2023-06-20 20:04:13
1090
原创 echarts使用tree悬浮高亮树枝
监听悬浮事件，echarts中dataIndex是可以作为标识的，如果使用id配合层级，则可能出现不同组件控制相同的页面，此时悬浮就会有问题。
2023-05-04 15:23:04
303
1
原创 el-table合计功能滚动条层级问题
当使用了合计功能的时候滚动条的区域在el-table__body-wrapper会导致固定列区域下的滚动条被挡住，当固定区域较大数据量较多的情况下存在滚动条全部滚动到固定区域无法回滚的问题。1.当使用了合计功能把对el-table__body-wrapper进行超出隐藏，将滚动条加到合计区域el-table__footer-wrapper，此时通过监听合计区域的滚动事件来触发el-table__body-wrapper的滚动。2.使用虚拟滚动条：为el-table添加虚拟滚动条。版本：2.15.13。
2023-04-21 11:25:28
954
原创 移动端树形结构
该组件依据需求来做，当前包含三种选择状态，选中，未选中，半选。由于不需要做树形的收缩展开故没有写相关内容。树形展开与收缩与选中类似，只需要在节点上挂载相关字段即可实现。由于需求需要增加不限的功能，所以改组件内部实现不限的勾选。
2023-04-10 16:34:14
1598
原创 canvas绘制环形进度条及进度条
编写的一个canvas工具类，CanvasUtils。目前包含九宫格图片绘制，环形绘制，线条绘制，文本绘制，进度条绘制。使用主要关注传参就好。
2022-11-25 14:29:30
364
原创 CodeMirror(代码编辑器)vue使用及placeholder实现
CodeMirror(代码编辑器)vue使用及placeholder实现。
2022-09-28 14:51:01
1379
原创 循环组件动态创建样式
vue可以使用v-bind：style绑定样式，但是权重层级比较高。在一些场景使用CSS写class样式更好，但是某些场景生成更多的元素，针对与每个都有特定的样式，比如低代码平台写table组件对于每一列都可以设置自己的样式，此时我们可以创建动态类，但是如何去绑定那就不能写死了，所以下面这种方式动态创建style标签可以使用，当然下面的方式中，注意参数的使用。以下是通过原始模拟了组件创建和销毁，在vue中对应mounted和unmounted两个生命周期。...
2022-08-17 19:00:00
302
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人