- 博客(115)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 VSCode + vite + vue3断点调试配置
首先需要在.vscode文件夹下面创建launch.json配置文件。没想到这个配置我搞了一上午，网上很多的配置方案都没有效果。总算搞定了，特此记录一下。会启动一个chrome测试浏览器，这个浏览器不要关闭，监听仅在这个浏览器上有效。现在可以愉快的进行断点调试了！
2023-12-29 13:41:58
2061
原创 解决vite在远程开发服务器上的反复刷新问题
由于现在身兼数职，工作上增加了出差的特性，我选择了一台商务本作为自己的新设备。但是这样的话，在开发的时候性能上就有些捉襟见肘了。为了兼顾商务和开发的需求，我将之前的开发本做成了一台linux开发服务器，用于支持我的开发工作。是一个高级选项，只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。抓取错误发现，是vite的websocket服务端口号不对。因此这里需要调整一下hmr的配置。但是在运行基于vite的开发服务过程中，我发现vite一直在不断重新链接。
2023-02-03 16:50:37
1251
原创 解决html-webpack-plugin在解析html时的“You may need an appropriate loader to handle this file type.”问题
解析html文件的时候，出现了“You may need an appropriate loader to handle this file type.”问题。意思是我需要添加一些loader来解析html，网上基本上的解决方案是用。最后，我决定还是回归本源问题，最好减少引入的插件。，配置的地方和文件都需要修改。重新运行一下，问题已经解决了。有冲突，导致html中的类似。的变量不能够正确解析了。这里的描述可以看出，
2022-10-08 18:40:23
1825
原创 如何将变量用作typescript的类型注解
声明的变量，也只能在变量声明空间使用，不能用作类型注解。这样就可以直接使用已定义的变量作为类型注解了。那么在实际使用过程中，如果我们需要将。作为类型注解我们该怎么办呢？
2022-09-05 16:44:01
300
原创 NestJS环境变量配置，解决如何在拦截器（interceptor）注入服务（service）的问题
其实这也是一个NestJS环境变量配置的过程记录。在开发过程中我产生了这样一个需求，我需要通过不同的脚本命令启动不同的环境。mock环境中，我要为前端提供虚拟数据；staging环境中，我要作为BFF为前端提供后台传输过来的数据。在返回数据之前，我需要对数据进行统一格式化。于是我制作了一个拦截器。现在我要对拦截器中的数据进行处理，确保无论哪个环境下，我返回的数据结构都是统一的。...
2022-06-22 18:09:17
1402
原创 element-plus主题配置
element-plus主题配置先上官网：主题本篇文章会讲述，我是如何根据官方教程进行element-plus的主题配置的，以及遇到的坑，和坑的解决方法。首先，我们需要创建自己的主题文件，/src/styles/element.scss（文件名随意）根据官网，调整我们的主题：@forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( 'primary': ('base': #3A9BFF) ),
2022-03-16 17:56:18
8149
1
原创 unplugin-auto-import的配置和eslint报错解决
unplugin-auto-import的配置和eslint报错解决先上官网：unplugin-auto-importunplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个第三方插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。unplugin-auto-import常用的配置如下：AutoImport({ // 目标文件 include: [ /\.[tj]sx?$/, // .ts, .
2022-03-14 17:14:37
19646
15
原创 vite + ts + eslint全局变量配置
vite + ts + eslint全局变量配置在开发过程中，我们经常需要配置一些全局变量。下面我将记录，我全局变量的配置流程。我为了使用mock，所以增加了一个全局环境变量__USE_MOCK__来区分环境。首先，我需要安装cross-env插件包，并在package.json增加一条脚本：{... "scripts": { "dev:mock": "cross-env USE_MOCK=true vite", ... }...}这样，我就可以在vite.conf
2022-03-14 11:42:16
3229
1
原创 vite-plugin-mock配置和QA
vite-plugin-mock配置net::ERR_NAME_NOT_RESOLVED问题解决wsl的docker开发容器500或404问题
2022-03-13 20:31:50
3041
原创 typescript + vite 项目如何配置别名
我们为了省略冗长的路径，经常喜欢配置路径别名。但是在typescript下会遇到一些坑，比如导入路径不能以“.ts”扩展名结束，路径不识别等。下面我记录了我的处理方法。vite.config.js：export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') // 配置别名 } }})配置完之后，就可以在ide中使用别名了。但是这个时候我发现，路径下面报
2022-02-18 18:28:07
6267
原创 Node.js项目如何使用ES模块
Node.js项目如何使用ESModule参考文章先上参考：Node.js Setup With TypeScript, Nodemon andESM.Can’t run my Node.js Typescript project TypeError[ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension “.ts” for/app/src/App.tsNode.js 如何处理 ES6 模块应用环境在node.js项目中一般推荐使用co
2022-02-11 17:44:32
2658
原创 从零开始搭建基于vite的vue项目
从零开始搭建基于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
2021-11-08 18:16:10
3602
原创 element-plus的自动导入和按需导入
element-plus根据官网文档，推荐用户采用按需导入的方式进行导入。我的项目是使用vite进行构建的，根据官网的文档，利用unplugin-vue-components插件进行自动按需导入。当我们使用element的标签时，无需再使用import对组件进行导入。例如：<el-button>test</el-button>会自动引入ElButton组件。不过当我们想要使用命令的方式创建element组件时，样式会无法自动引入。我们以ElMessage为例。im
2021-11-02 15:15:45
15156
10
原创 React+webpack+env的环境配置
之前我总结过使用react-scripts如何通过env进行环境配置（原文），但是我们在打包的时候常用的是webpack。所以我针对webpack总结了一下如何使用env进行环境配置。安装首先我们需要安装相应的插件，我将我的package.json放在下面了，大家按需安装吧。{ "name": "react-remplate", "version": "0.1.0", "private": true, "dependencies": { "@babel/polyfill": "
2021-08-30 10:23:45
1545
原创 input标签type为number时，阻止E,e,-,+的输入
当我们将标签<input>的type设置为number时，是无法输入除数字以外的字符串的，只有E,e,-,+除外。那么当输入E,e,-,+的时候实际上<input>的值变成了什么呢？我将那一刻的实际输入情况记录了下来。<input id="input" type="number" />document.getElementById('input').addEventListener("input", event => { var value = even
2021-08-26 21:29:46
2138
原创 vue-route基于动态加载路由配置的权限管理
vue-route基于动态加载路由配置的权限管理清空原路由配置格式化后台路由配置添加路由配置刷新处理在路由权限管理的开发过程中，基于不将用户的配置信息保留在前端的考虑，我着重研究了关于路由配置的动态加载方法。记录如下：这里我从后端获取的路由配置如下：routes:[ { path: "/home", name: "home", componentPath: "views/Home", children: [ { path: "/homeChild", name:
2021-07-20 10:11:42
288
1
原创 如何确定Web Worker已经创建或关闭
Web Worker 可以为 JavaScript 创建多线程环境，可以将一部分任务分配给分线程处理，从而不阻塞主线程的运行。通过 Web Worker 创建的分线程和主线程是同时运行互不干扰的。具体的Web Worker的相关知识，大家可以参考阮一峰大神的博客。Web Worker 在使用过程中需要注意的是分线程创建之后，为了随时响应主线程的通信会始终运行在后台。所以 Worker 是比较消耗资源的，且不会自动关闭。当然为了解决这个问题 Web Worker 为我们提供了手动关闭的方法，那么怎么确定
2021-07-07 10:23:31
2981
1
转载 【笔记】JavaScript字符串连接性能的优化
ECMAScript的字符串可以通过+进行自加连接。let str1 = "";str1 += "str1 ";这个过程需要完成以下步骤：创建存储 "hello " 的字符串。创建存储 “world” 的字符串。创建存储连接结果的字符串。把 str的当前内容复制到结果中。把 “world” 复制到结果中。 更新 str，使它指向结果。每一次的字符串+都需要完成第2到第6个步骤，这种消耗在庞大的数据基数下是不可忽视的。我在复习W3school中ECMAScript 定义类或对象的内容
2021-06-30 17:06:48
379
原创 React使用.env.*进行环境部署
在实际开发过程中，我们需要在不同的环境下进行测试。我们可能需要使用 mock 或者灵活修改后端请求 IP 等。为了方便测试，我们需要创建不同的配置文件进行管理，以达到迅速切换运行环境的目的。React的NODE_ENV首先，我们来认识一下React常用的运行模式并输出他们的NODE_ENV来看一下。"scripts": { "start": "react-scripts start", // development "build": "react-scripts build", // prod
2021-06-25 18:18:04
3293
原创 JavaScript三种事件绑定的方法和执行顺序
JavaScript三种事件绑定的方法和执行顺序JavaScript的三种事件绑定方法HTML标签DOM事件addEventListener三种绑定事件的执行顺序JavaScript的三种事件绑定方法事件就是指在HTML元素上发生的事情。例如，onchange元素发生了变化，onclick元素被点击了，onload元素加载完成等。那么如何绑定这些事件，让事件发生的时候可以按照用户的心意完成一些功能呢？目前常用的绑定方法有如下三种：HTML标签可以直接在HTML的标签上绑定事件，可以是直接的JavaS
2021-06-22 11:49:53
1540
原创 将多个Promise实例包装成一个新的Promise实例的方法
将多个Promise实例包装成一个新的Promise实例的方法Promise.all()Promise.allSettled()Promise.race()Promise.any()Promise对象提供了很多方法来实现对多个Promise实例的统一处理，常用的方法我会在下面一一说明。Promise.all()Promise.all() 当所有的 Promise 都执行完成后返回所有数据组成的数组，如果任一 Promise 失败，则直接返回该 Promise 的错误信息。// Promise 传参封
2021-06-04 17:22:30
633
原创 Promise的catch()和then(...,err)的优先级
Promise的catch（）和then（...,err）的执行顺序创建Promise的测试函数当then在catch之前then中没有err时then中有err时Promise测试函数有错误时then中有错误时当catch在then之前对于Promise如果你看过ES6的教程，应该就已经有所了解了。在Promise的回调中then(...,err)和catch()都是用来捕获错误的，那么这俩在实际应用上的执行顺序是怎样的呢，我个人做了点小测试。有兴趣的大家可以继续阅读本章，也可以提出你的想法。我会多做补
2021-06-03 18:36:08
3662
原创 利用Symbol安全地增加JavaScript对象的属性
Symbol在对象中的应用什么是Symbol？概念使用方法特点如何利用Symbol安全地增加JavaScript对象的属性在合作开发或者使用别人做好的对象进行开发的时候，在对象中添加自己的属性有可能会和对象中的原属性重名，这样是不安全的。为了解决这样的矛盾，也为了节省不必要的代码阅读时间，ES6增加了Symbol类型。什么是Symbol？概念Symbol是ES6中引入的一种新的原始数据类型，和string、number等数据类型同等。使用方法let varSymbol = Symbol(); /
2021-06-01 13:50:38
184
3
原创 ES6变量的作用域
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 =
2021-05-31 10:40:47
185
1
原创 VSCode+Javascript+Eslint插件配置
在个人学习项目中，为了不依赖npm的插件库，可以在最小的包里练习代码，我尝试启用VSCode的插件库中的Eslint插件来进行代码检查和修复。如何配置插件呢？查看了插件介绍之后我得到了如下解决方案。首先，创建项目的工作区。工作区保存在自己的项目文件根目录即可。工作区的优势就是可以根据项目的需要配置插件，优化软件加载；也可以根据项目需要配置settings。接下来，我们先配置默认的settings.json。{ "eslint.run": "onSave", // 保存时运行 "es
2021-04-14 18:18:59
338
原创 解决 Element-UI 动态生成多个radio单选框时数据绑定失效问题
开发需求制作调查问卷，问题为单选题。因此答案的数据绑定需要动态处理。<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
2021-02-07 13:54:53
2686
原创 Unity如何让UI拦截点击事件
在Unity游戏开发时经常需要制作弹窗。弹窗被在创造Canvas里，有丰富的UI组件可以使用。在实际使用过程中发现，弹窗无法拦截鼠标点击事件。Canvas后面的GameObject如果有绑定碰撞器组件和触发器，点击事件就会穿透UI触发后面GameObject的点击事件。官方有提供检测方法，下面我会具体说明一下：首先需要在代码前引入命名空间。using UnityEngine.EventSystems;之后在GameObject的鼠标点击事件中添加一个判断：private void OnMous
2021-01-06 13:54:01
6164
2
原创 Unity项目的.gitignore配置
Unity项目只需要关注Assets、ProjectSettings、Packages三个文件夹的版本控制。最新版的Unity基本已经将设置默认为可版本管理状态。如果不放心，大家可以自行查看一下这两个配置的地方是否正确。Edit --> 项目设置 --> 编辑器确保如下图两项设置正确：最后让我们在项目中创建.gitignore文件：[Ll]ibrary/[Tt]emp/[Oo]bj/[Bb]uild/[Bb]uilds/Assets/AssetStoreTools*#
2020-11-06 10:54:48
1868
原创 macOS+VSCode+Unity的开发环境配置及调试
最新的Unity游戏引擎已经不支持JavaScript的开发了，所以我学习了一下在macOS环境下基于C#+Unity的游戏开发。本文主要包括两个方面，一个是开发环境的配置，一个是如何在VSCode进行调试。开发环境配置安装C#运行环境安装.Net Core。这里安装SDK就可以了，里面涵盖了所有的Runtime。这一步主要是为了让VSCode支持C#的智能提示，安装完成后记得重启VSCode。安装插件VSCode需要安装如下插件：C#（基础，必选）C# Snippets（代码块）C#
2020-10-22 10:26:57
4066
4
原创 vscode使用技巧——webpack项目的断点调试
为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。安装插件在vscode的插件商店安装必要的插件“Debugger for Chrome”。调整webpack配置在webpack.dev.config.js文件中，增加source map的配置。module.exports = webpackMerge.merge(webpackBase, { devtool: 'eval-source-map'});配置启动项点击“菜
2020-10-12 18:24:06
1835
原创 基于NPM和webpack的HTML页面开发——webpack多环境配置
在不同的开发环境下，需要使用不同的插件和配置项。为了方便开发，对不同的环境采用不同的配置文件。这里我简单地做了如下分类：{ // 开发环境，数据来源于mocker。 development: 'webpack.dev.config.js', // 测试环境，数据来源于后台数据库。 production: 'webpack.pro.config.js'}都是基于webpack.config.js进行扩展的。具体项目文件可参考html-template。更多的配置可以根据环境进行区分，可以
2020-09-22 14:23:07
239
原创 基于NPM和webpack的HTML页面开发——mock虚拟数据服务
基于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
2020-09-22 11:35:19
243
原创 基于NPM和webpack的HTML页面开发——amfe-flexible postcss-pxtorem页面自适应
由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了NPM开发环境。amfe-flexible和postcss-pxtorem之前在Vue项目中经常使用。目的是不同大小屏幕下的页面自适应。这里我将这个方法引入到我的单个HTML页面开发中。这个文章是我个人开发的一个良好实践，基于我之前做的一个html开发模板html-template进行拓展的。安装首先安装重要的插件。amfe-flexible是用来计算根font-size。postcss-pxtorem是将css中的px单位转换为re
2020-09-21 15:29:20
910
原创 拒绝全局安装，项目单独安装typeScript
学习typeScript的最初教程，往往是安装typeScript。官网和许多人的博客在这块都是使用的全局安装，即-g的安装方式。但是我个人比较喜欢封闭的项目环境，尽可能避免全局安装插件。以下会提供我个人在封闭项目中引入typeScript的方法。初始化项目首先初始化项目，创建package.json。npm init -y安装typeScript给你的项目安装typeScript，由于只在项目编译时使用，所以我们将插件安装在开发环境里。npm i typescript -D初始化typ
2020-09-03 15:14:37
2281
4
原创 基于sass/scss + typeScript + eslint多html页面webpack配置
工作中有一些单独页面开发，为了节省开发和打包时间，所以稍微研究了一下基于sass/scss的多html页面的webpack配置。项目包在这里。初始化项目通过初始化创建package.json文件。npm init -y安装webpacknpm i webpack webpack-cli -D安装后在项目根目录创建webpack的配置文件webpack.config.js。文件配置内容会在后面做说明。为了简化工作流程，可以安装clean-webpack-plugin，每一次打包都是全新的开
2020-09-02 10:39:01
460
vscode vue style中classname自动提示不生效？
2020-07-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人