sayUonly的博客

首先需要在.vscode文件夹下面创建launch.json配置文件。没想到这个配置我搞了一上午，网上很多的配置方案都没有效果。总算搞定了，特此记录一下。会启动一个chrome测试浏览器，这个浏览器不要关闭，监听仅在这个浏览器上有效。现在可以愉快的进行断点调试了！

本文章是我自己搭建node环境开发服务器的过程记录，不一定完全适用所有人。根据个人情况，按需取用。

本文章长期汇总Canvas的使用技巧，并长期更新。

本学习笔记不会全部记录所有JestJs知识，偏重于学习中的个人总结。

由于现在身兼数职，工作上增加了出差的特性，我选择了一台商务本作为自己的新设备。但是这样的话，在开发的时候性能上就有些捉襟见肘了。为了兼顾商务和开发的需求，我将之前的开发本做成了一台linux开发服务器，用于支持我的开发工作。是一个高级选项，只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。抓取错误发现，是vite的websocket服务端口号不对。因此这里需要调整一下hmr的配置。但是在运行基于vite的开发服务过程中，我发现vite一直在不断重新链接。

解析html文件的时候，出现了“You may need an appropriate loader to handle this file type.”问题。意思是我需要添加一些loader来解析html，网上基本上的解决方案是用。最后，我决定还是回归本源问题，最好减少引入的插件。，配置的地方和文件都需要修改。重新运行一下，问题已经解决了。有冲突，导致html中的类似。的变量不能够正确解析了。这里的描述可以看出，

其实这也是一个NestJS环境变量配置的过程记录。在开发过程中我产生了这样一个需求，我需要通过不同的脚本命令启动不同的环境。mock环境中，我要为前端提供虚拟数据；staging环境中，我要作为BFF为前端提供后台传输过来的数据。在返回数据之前，我需要对数据进行统一格式化。于是我制作了一个拦截器。现在我要对拦截器中的数据进行处理，确保无论哪个环境下，我返回的数据结构都是统一的。...

element-plus主题配置先上官网：主题本篇文章会讲述，我是如何根据官方教程进行element-plus的主题配置的，以及遇到的坑，和坑的解决方法。首先，我们需要创建自己的主题文件，/src/styles/element.scss（文件名随意）根据官网，调整我们的主题：@forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( 'primary': ('base': #3A9BFF) ),

vite + ts + eslint全局变量配置在开发过程中，我们经常需要配置一些全局变量。下面我将记录，我全局变量的配置流程。我为了使用mock，所以增加了一个全局环境变量__USE_MOCK__来区分环境。首先，我需要安装cross-env插件包，并在package.json增加一条脚本：{... "scripts": { "dev:mock": "cross-env USE_MOCK=true vite", ... }...}这样，我就可以在vite.conf

vite-plugin-mock配置net::ERR_NAME_NOT_RESOLVED问题解决wsl的docker开发容器500或404问题

vite在WSL环境下热更新失效问题的解决方案，记录官方配置方案

我们为了省略冗长的路径，经常喜欢配置路径别名。但是在typescript下会遇到一些坑，比如导入路径不能以“.ts”扩展名结束，路径不识别等。下面我记录了我的处理方法。vite.config.js：export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') // 配置别名 } }})配置完之后，就可以在ide中使用别名了。但是这个时候我发现，路径下面报

从零开始搭建基于vite的react项目用vite创建react项目创建项目结构项目的环境配置用vite创建react项目这里我们默认已经安装好了vite环境，如有疑问，可以参考官网的安装流程。打开cmd，将目录指向你的代码仓库，然后输入一下命令。# npm 6.xnpm init vite@latest my-react-app --template react# npm 7+, 需要额外的双横线：npm init vite@latest my-react-app -- --templat

element-plus根据官网文档，推荐用户采用按需导入的方式进行导入。我的项目是使用vite进行构建的，根据官网的文档，利用unplugin-vue-components插件进行自动按需导入。当我们使用element的标签时，无需再使用import对组件进行导入。例如：<el-button>test</el-button>会自动引入ElButton组件。不过当我们想要使用命令的方式创建element组件时，样式会无法自动引入。我们以ElMessage为例。im

之前我总结过使用react-scripts如何通过env进行环境配置（原文），但是我们在打包的时候常用的是webpack。所以我针对webpack总结了一下如何使用env进行环境配置。安装首先我们需要安装相应的插件，我将我的package.json放在下面了，大家按需安装吧。{ "name": "react-remplate", "version": "0.1.0", "private": true, "dependencies": { "@babel/polyfill": "

当我们将标签<input>的type设置为number时，是无法输入除数字以外的字符串的，只有E,e,-,+除外。那么当输入E,e,-,+的时候实际上<input>的值变成了什么呢？我将那一刻的实际输入情况记录了下来。<input id="input" type="number" />document.getElementById('input').addEventListener("input", event => { var value = even

vue-route基于动态加载路由配置的权限管理清空原路由配置格式化后台路由配置添加路由配置刷新处理在路由权限管理的开发过程中，基于不将用户的配置信息保留在前端的考虑，我着重研究了关于路由配置的动态加载方法。记录如下：这里我从后端获取的路由配置如下：routes:[ { path: "/home", name: "home", componentPath: "views/Home", children: [ { path: "/homeChild", name:

Web Worker 可以为 JavaScript 创建多线程环境，可以将一部分任务分配给分线程处理，从而不阻塞主线程的运行。通过 Web Worker 创建的分线程和主线程是同时运行互不干扰的。具体的Web Worker的相关知识，大家可以参考阮一峰大神的博客。Web Worker 在使用过程中需要注意的是分线程创建之后，为了随时响应主线程的通信会始终运行在后台。所以 Worker 是比较消耗资源的，且不会自动关闭。当然为了解决这个问题 Web Worker 为我们提供了手动关闭的方法，那么怎么确定

ECMAScript的字符串可以通过+进行自加连接。let str1 = "";str1 += "str1 ";这个过程需要完成以下步骤：创建存储 "hello " 的字符串。创建存储 “world” 的字符串。创建存储连接结果的字符串。把 str的当前内容复制到结果中。把 “world” 复制到结果中。 更新 str，使它指向结果。每一次的字符串+都需要完成第2到第6个步骤，这种消耗在庞大的数据基数下是不可忽视的。我在复习W3school中ECMAScript 定义类或对象的内容

在实际开发过程中，我们需要在不同的环境下进行测试。我们可能需要使用 mock 或者灵活修改后端请求 IP 等。为了方便测试，我们需要创建不同的配置文件进行管理，以达到迅速切换运行环境的目的。React的NODE_ENV首先，我们来认识一下React常用的运行模式并输出他们的NODE_ENV来看一下。"scripts": { "start": "react-scripts start", // development "build": "react-scripts build", // prod

JavaScript三种事件绑定的方法和执行顺序JavaScript的三种事件绑定方法HTML标签DOM事件addEventListener三种绑定事件的执行顺序JavaScript的三种事件绑定方法事件就是指在HTML元素上发生的事情。例如，onchange元素发生了变化，onclick元素被点击了，onload元素加载完成等。那么如何绑定这些事件，让事件发生的时候可以按照用户的心意完成一些功能呢？目前常用的绑定方法有如下三种：HTML标签可以直接在HTML的标签上绑定事件，可以是直接的JavaS

将多个Promise实例包装成一个新的Promise实例的方法Promise.all()Promise.allSettled()Promise.race()Promise.any()Promise对象提供了很多方法来实现对多个Promise实例的统一处理，常用的方法我会在下面一一说明。Promise.all()Promise.all() 当所有的 Promise 都执行完成后返回所有数据组成的数组，如果任一 Promise 失败，则直接返回该 Promise 的错误信息。// Promise 传参封

Promise的catch（）和then（...,err）的执行顺序创建Promise的测试函数当then在catch之前then中没有err时then中有err时Promise测试函数有错误时then中有错误时当catch在then之前对于Promise如果你看过ES6的教程，应该就已经有所了解了。在Promise的回调中then(...,err)和catch()都是用来捕获错误的，那么这俩在实际应用上的执行顺序是怎样的呢，我个人做了点小测试。有兴趣的大家可以继续阅读本章，也可以提出你的想法。我会多做补

Symbol在对象中的应用什么是Symbol？概念使用方法特点如何利用Symbol安全地增加JavaScript对象的属性在合作开发或者使用别人做好的对象进行开发的时候，在对象中添加自己的属性有可能会和对象中的原属性重名，这样是不安全的。为了解决这样的矛盾，也为了节省不必要的代码阅读时间，ES6增加了Symbol类型。什么是Symbol？概念Symbol是ES6中引入的一种新的原始数据类型，和string、number等数据类型同等。使用方法let varSymbol = Symbol(); /

JavaScript更新到ES6，增加了新的let和const两种命令来声明变量。我结合var对这三个命令的作用域进行了比较。命令名作用域var全局let块级const块级为了更直接的看出区别，可以看如下代码：for (var var_i = 0; var_i < 3; var_i++) { { console.log(var_i); }}// 全局作用域console.log(var_i);for (let let_i =

在个人学习项目中，为了不依赖npm的插件库，可以在最小的包里练习代码，我尝试启用VSCode的插件库中的Eslint插件来进行代码检查和修复。如何配置插件呢？查看了插件介绍之后我得到了如下解决方案。首先，创建项目的工作区。工作区保存在自己的项目文件根目录即可。工作区的优势就是可以根据项目的需要配置插件，优化软件加载；也可以根据项目需要配置settings。接下来，我们先配置默认的settings.json。{ "eslint.run": "onSave", // 保存时运行 "es

开发需求制作调查问卷，问题为单选题。因此答案的数据绑定需要动态处理。<el-radio-group v-model="answers[index]"> <el-radio>...</el-radio></el-radio-group>data(){ return{ answers:{} }}methods:{ init: function(){ for(const key in questions){ this.answer

为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。安装插件在vscode的插件商店安装必要的插件“Debugger for Chrome”。调整webpack配置在webpack.dev.config.js文件中，增加source map的配置。module.exports = webpackMerge.merge(webpackBase, { devtool: 'eval-source-map'});配置启动项点击“菜

在不同的开发环境下，需要使用不同的插件和配置项。为了方便开发，对不同的环境采用不同的配置文件。这里我简单地做了如下分类：{ // 开发环境，数据来源于mocker。 development: 'webpack.dev.config.js', // 测试环境，数据来源于后台数据库。 production: 'webpack.pro.config.js'}都是基于webpack.config.js进行扩展的。具体项目文件可参考html-template。更多的配置可以根据环境进行区分，可以

基于NPM和webpack的HTML页面开发无法使用import的方法引入mockjs来实现虚拟数据服务，因此这里将会采用webpack-api-mocker来实现效果。安装webpack-api-mocker是需要额外安装的。npm i webpack-api-mocker -D为了测试效果，我们这里使用axios进行数据通信。npm i axios -S运用创建mock.js文件。// mock.jsconst delay = require('webpack-api-mocker

由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了NPM开发环境。amfe-flexible和postcss-pxtorem之前在Vue项目中经常使用。目的是不同大小屏幕下的页面自适应。这里我将这个方法引入到我的单个HTML页面开发中。这个文章是我个人开发的一个良好实践，基于我之前做的一个html开发模板html-template进行拓展的。安装首先安装重要的插件。amfe-flexible是用来计算根font-size。postcss-pxtorem是将css中的px单位转换为re

学习typeScript的最初教程，往往是安装typeScript。官网和许多人的博客在这块都是使用的全局安装，即-g的安装方式。但是我个人比较喜欢封闭的项目环境，尽可能避免全局安装插件。以下会提供我个人在封闭项目中引入typeScript的方法。初始化项目首先初始化项目，创建package.json。npm init -y安装typeScript给你的项目安装typeScript，由于只在项目编译时使用，所以我们将插件安装在开发环境里。npm i typescript -D初始化typ

为了方便工作中快速定位查找Sass语法，特做总结。

主要使用的插件是axios，将属性responseType设置为blob。数据流处理代码如下：const { data } = responcelet url = new Blob([data], { type: data.type}if (window.navigator && window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(url, 'fileName') } catch (e) {

准备的工具首先需要准备两个vue插件，amfe-flexible和postcss-pxtorem。引入方式如下：npm i amfe-flexible -Snpm i postcss-pxtorem -D配置工具在main.js文件引入amfe-flexible：import 'amfe-flexible'在package.json进行如下配置：{ "postcss": {...

开发过程中我们经常需要遍历数组和对象。for...of和for...in都可用于遍历，但是两者略有区别。for…of我们来输入一组代码：const array = ['a', 'b', 'c']const object = { 'o1': 'a', 'o2': 'b', 'o3': 'c'}for(const item of array){ console.log(...

Vue中animate.css的使用安装引入使用基本使用方法自定义播放属性通过Javascript动态添加动画附录动画库常用属性类名（会持续更新）延迟播放播放速度安装通过npm安装：$ npm install animate.css --save或者通过yarn安装：$ yarn add animate.css引入在main.js文件中引入animate.cssimport '...

Webstorm创建的空nodejs项目，手动引入express之后发现，express框架的函数无法自动代码提示，手动输入后会提示波浪线。const express = require('express');const app = express();// express 的函数都会出现波浪线app.listen(3000, () => { console.log('serv...

Nodejs项目开发过程中，对代码的修改并不是直接生效的，需要我们重启Nodejs的服务才可以。为了能简化开发过程中的操作步骤，可以使用nodemon对项目进行监听。即当项目发生改变的时候，实现项目的自动重启。安装这里我采用的是npm的方式进行安装。# nodemon仅用于开发阶段使用，因此这里需要加-Dnpm i nodemon -D启用如果需要使用nodemon的话，只需要在启动...

目录Nodejs的三大模块全局模块例一：process.env例二：process.argv例三：__dirname系统模块例一：path（路径）例二：fs（文件系统）自定义模块requireexportsmoduleNodejs的三大模块全局模块定义：何时何地都可以访问，无需引用。具体全局变量可参看官网 global 相关内容。例一：process.envprocess.env是...