![](https://img-blog.csdnimg.cn/20190906174939145.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
工具
文章平均质量分 56
李小苶
相信不屈不挠的努力,相信战胜死亡的年轻!
展开
-
多个项目使用的node版本不一致?vscode dev container + docker 真香
遇到这种情况,多数情况会使用 nvm 进行 node 版本管理,具体使用方法可戳。但若要并行开发两个不同环境下的项目,不停切换node版本,也难免有些繁琐。此时,使用 docker + vscode 可以实现多个不同环境的并行开发。原创 2023-08-14 18:45:00 · 1151 阅读 · 0 评论 -
使用docker模拟生产环境-复现生产环境bug
在build项目时,production模式下打包出的项目文件与其他模式略有不同,导致生产环境与开发环境运行差异。1、安装docker(本文不赘述docker安装过程,可自行参考其他文章),在项目根目录创建docker文件夹。执行成功后,可在docker中看到创建的应用,点击按钮,即可在浏览器中打开。4、创建docker镜像,imagesName 为创建的镜像名称(注意命令后面的点.)6、创建docker应用,appName 为创建的应用名称。执行成功后,可在docker中看到创建的镜像。原创 2023-04-01 13:14:41 · 511 阅读 · 1 评论 -
Definition for rule ‘vue/script-setup-uses-vars‘ was not found.eslint(vue/script-setup-uses-vars)
项目增加了几个依赖包,npm i执行完后,每个文件的开头都出现了eslint报错,如下图 官网中有对 vue/script-setup-uses-vars 规则的说明,其对该规则的描述为Prevent<script setup>variables used in<template>to be marked as unused 即,防止将定义在< script setup >标签中,但在template...原创 2021-11-13 19:25:50 · 3804 阅读 · 0 评论 -
Git:Terminal is dumb, but EDITOR unset
一、问题出现背景(重现步骤) 使用 vscode 执行 pull rebase 后有冲突,解决完冲突后,执行 commit 时,弹出报错弹框。二、解决方案在网上找了很多解决方案,但都没解决自己的问题,可能是每人出现问题的背景不一样,虽然报错信息是一样的。自己摸索的解决方案,解决了自己的问题。不一定适合所有人,但可以试试。以下操作都通过在 terminal 中输入命令执行,暂时不使用 vscode 的可视化操作。1、先查看一下git当前的状态git s...原创 2021-10-16 09:53:32 · 2834 阅读 · 0 评论 -
git命令及vscode中的git操作
最近用 git 协作开发比较多,遇到冲突和各种问题的概率也增加了,特此记录一下 git 的命令行操作以及 vscode 中对应的部分可视化操作。一、查看操作1、查看当前git状态,可查看当前是否有修改待提交的文件。git status2、查看操作记录,可查看最近几条操作记录,包括操作的时间、作者、注释信息等。git loggit log --author 'Liyn' // 查询某个作者的提交记录3、查看修改差异git diff4、...原创 2021-09-12 17:16:44 · 2409 阅读 · 0 评论 -
element-plus中带快捷选项的日期时间范围选择器,按官方demo日期范围错误
最近用到element-plus中带快捷选项的日期时间范围选择器,如上图,官方案例左侧提供了最近一周、最近一个月、最近三个月快捷选项。 但当我按照官方示例用法放到自己项目中时,输入框中显示的时间范围却是错误的,起始时间与终止时间永远只显示当前时间。 一度怀疑自己用法不对,直到将官方demo代码完全复制到项目中,发现还是错误。最终将demo 中的 shortcuts 定义,改为如下即可。shortcuts: [ { text: '最近7...原创 2021-08-15 11:13:44 · 1915 阅读 · 5 评论 -
一个项目同时用svn和git进行版本控制
总是能遇到奇奇怪怪的需求,但总要耐耐心心的寻找出路。还好在踩完坑后,整理出来一套不太复杂的解决方案。1、将svn项目检出到本地svn checkout 'http://...'注意事项:1、尽量在空文件夹中进行操作,避免被其他项目的svn或git污染,导致不必要的麻烦。2、git仓库地址尽量是空的,尽量避免出现readme文件,否则push时还需要合并代码。...原创 2021-06-17 08:54:58 · 2537 阅读 · 0 评论 -
使用Sentry监控前端错误日志
最近给客户部署的项目中,偶尔会出现一些非必现的bug,调试起来很不方便。于是在项目中引入Sentry,来记录错误日志。Sentry是一款用于应用监控和错误追踪日志平台,支持vue、react等多种语言框架。分为客户端和服务端,客户端嵌入需要被监控的项目中,程序出现异常就会向服务端发送消息,服务端可以查看到日志详情。使用时可以直接使用线上服务,也可在本地部署。下面介绍一下本地部署的步骤和使用方式。官方推荐的是使用docker部署(官方文档),这里也以docker为例,搭建Sentry服务。docker原创 2020-12-04 17:13:56 · 955 阅读 · 1 评论 -
使用npm快速搭建demo演示环境
在工作和学习中,有时需要研究、调试或演示一些小组件或小功能,并不需要完整或复杂的项目,但却需要一个运行环境。这时,可以通过npm创建一个极简的运行环境。下面以JSONPath的使用为例,进行说明。1、初始化项目npm init因为只是demo,执行命令后,一路回车选择默认项即可,默认入口文件为index.js。2、可以看到执行命令的目录下,生成了一个package.json文件,文件内容即为刚刚选择的默认项设置,手动添加一条启动命令。{ "name": "demo", "原创 2020-11-28 16:18:44 · 1300 阅读 · 0 评论 -
创建并使用npm发布一个vue组件
一、创建vue组件1、使用webpack-simple构建一个简洁项目,项目名称以arc-tabs为例。vue init webpack-simple arc-tabs2、删掉不需要的代码,在src目录下,新建lib文件夹,在lib下新建一个vue文件,用于编写组件模板和逻辑。vue文件的name一定要设置你想要的组件的名字,方便用于后面的导出。3、在src同级目录下新建一个index.js,用作入口文件。import arcTabs from './lib/index';ar原创 2020-10-23 20:42:24 · 701 阅读 · 0 评论 -
使用element-ui模拟Mac OS滚动条
同样是滚动条,Mac上的就比Windows上的美观很多。但通过css修改滚动条样式,有很多局限,并且兼容性很差。通常情况下的解决方案是将默认滚动条隐藏,再通过样式模拟一个滚动条,并通过js计算滚动条的长度和位置。 而如果在项目中对每个可能出现滚动条的div都模拟滚动条并计算位置,是很庞大的工程,所以出现了很多美化滚动条的组件。其实,在很多项目中引入的element-ui组件库中就有封装好的滚动条,只是在官网上并没有相关文档,所以可能被大部分同学忽略了。 细心的同学可以...原创 2020-08-24 19:48:21 · 852 阅读 · 0 评论 -
Chrome DevTools之命令(Command)菜单和动画检查
之前介绍过很多Chrome的调试技巧,如Chrome DevTools之Elements、Chrome DevTools之Console&Sources调试、Chrome DevTools调试技巧之Network。今天再来介绍一下Command菜单的使用。一、打开方式Windows快捷键 Ctrl+Shift+P;Mac快捷键command+shift+P二、常用命令1、截图DOM元素 a. 截图某个DOM结点:选中需要截图的DOM结点,使用快捷键打开命令菜...原创 2020-07-21 19:44:07 · 763 阅读 · 0 评论 -
树形结构数据的处理——JsonPath在前端的使用
先来看一下我的数据结构,每个数据都可能存在children属性,每个children属性中都可能有一个或多个对象。要求找出所有的id,并进行相应的操作。let data = { name:'grandparents', children:[{ id:0, name:'parents', children:[{ id:1, name:'son', sex:'...原创 2020-07-07 19:23:48 · 1459 阅读 · 0 评论 -
iconfont动态加载不转义的问题
数据返回iconfont编码格式为:将编码格式改为:\ue601原创 2020-05-10 11:13:06 · 1479 阅读 · 0 评论 -
sublime配置vue语法高亮
1、下载vue语法高亮插件,下载地址:https://github.com/vuejs/vue-syntax-highlight,直接下载zip包解压即可。2、按下图所示路径,打开packages文件夹3、在packages文件夹中新建vue文件夹,并把下载的zip包解压后的文件全部粘贴到vue文件夹中4、通过以下路径,或快捷键command+shift+p,打开命令面板...原创 2020-03-09 13:26:52 · 692 阅读 · 0 评论 -
nvm的安装与使用
上篇介绍了nrm的使用,这次来介绍一下另一个好用的工具——nvm,用于nodejs的版本管理。nodejs版本升级较快,可能一次开发未完成,node就已经升级了,当开发周期比较长,用到的npm包依赖的node版本不一样时,就需要对node版本进行管理。一、安装 nvm的安装比较复杂,window和Mac OS的安装方法也不相同,具体可参考https://github....原创 2020-02-08 22:29:07 · 2984 阅读 · 0 评论 -
npm 与 nrm
npm大家已经很熟悉了,但可能很多人并没有听说过nrm。nrm的全称是npm registry manager,即npm的镜像源管理工具。我们大多数人应该在使用npm时,使用过淘宝镜像来进行npm包的安装,但当有多个源时,切换并不方便,这时就可以使用nrm来管理镜像源。安装npm install nrm -g 在Mac OS下,全局安装时,可能会报错提示没有权限,...原创 2020-02-01 11:43:55 · 1400 阅读 · 0 评论 -
Cannot run program "svn" (in directory "..."): CreateProcess error=2, 系统找不到指定的文件
最近公司整体换了新机,安装完SVN和idea之后,发现项目无法check,报错“Cannot run program "svn" (in directory "..."): CreateProcess error=2, 系统找不到指定的文件”,如下图。 在命令行中输入svn,提示不是内部或外部命令。这是因为环境变量没有配置好,可以手动在设置中修改配置。但是,如果正确安...原创 2019-11-04 19:44:55 · 11542 阅读 · 0 评论 -
Chrome DevTools调试技巧之Network
以CSDN首页为例,来列举Network面板的功能,我将Network面板的功能总结为三个方面。一、查看静态资源请求和分布 切换到Network面板,打开CSDN首页,资源加载情况如下,调节时间轴,可以筛选出某个时间段内的请求。 菜单栏最左侧的红色圆点表示是否记录网络log,默认开启记录,当关闭时将不再记录页面中的网络请求。 第二个图标...原创 2019-10-21 10:28:15 · 2813 阅读 · 0 评论 -
webpack配置优化
前面学习了在项目中使用webpack对各种类型的文件进行处理和打包,但是在开发过程中,不停的build并不友好,我们需要区分正式环境和开发环境。使用webpack-dev-server可以提升开发过程中体验和效率。首先也需要在package.json中进行配置:'script':{ 'build': 'webpack --config webpack.config.js', //用于正...原创 2018-07-02 15:27:55 · 417 阅读 · 0 评论 -
使用webpack处理项目中的资源文件
上周学习了从0开始搭建项目,并用webpack进行打包。然而实际项目中,我们需要处理的不仅仅是简单的js和css文件,可能还需要处理ES6、CoffeeScript、less、Sass以及图片等其他资源文件。这时就需要引入各种Loader了。 先来按照常用的项目结构新建几个目录及文件,layer为项目中自定义的组件,我们的目标是使用webpack来处理组件中的less文件及使用ES6...原创 2018-06-26 16:52:10 · 869 阅读 · 0 评论 -
使用webpack打包你的项目
上周了解了gulp,不得不再来了解一下应用更多的webpack,毕竟现在vue项目中使用的是webpack。先来了解一些webpack在命令行中的简单操作。 首先在项目目录中安装webpack。npm install webpack --save-dev 安装完成后,项目中增加了node_modules文件夹和package.json文件。在项目目录中新建inde...原创 2018-06-22 23:03:37 · 2252 阅读 · 0 评论 -
Gulp和Browserify了解和简单使用
终于抓住了本周的尾巴,来完成每周一篇的学习记录。这周的身体状况依旧不太良好,在看视频学习时不能边学边实践,只能把不容易理解的地方翻来覆去多看几遍。但是本周的学习感觉还是收获颇丰,因为了解了一个之前不曾了解过的内容——自动化构建。 回想之前做过的项目,在使用vue之前,用seajs实现模块化开发,几乎不存在前端构建的问题。使用vue后,直接用cli脚手架初始化项目,发布项目时也不过一个...原创 2018-06-17 22:42:16 · 2022 阅读 · 0 评论 -
如何使用GitBook书写和管理文档
在项目开发中,文档是必不可少的一部分,使用gitbook可以更好的书写和管理文档。安装npm install gitbook-cli -g新建.md文件,并使用markdown编写文档(语法教程很多,此处不是文章重点)# Summary* [项目介绍](README.md)* [使用文档](doc/use/README.md)* [二次开发](doc/dev/REA...原创 2018-07-16 20:21:41 · 454 阅读 · 0 评论 -
SVN分支合并与创建
一、分支合并到主干1、在分支目录下update,确保与repository同步;2、在trunk目录下右击,选择TortoiseSVN→Merge…,出现如下弹框;3、点击next,出现如下弹框; URL to merge from是需要合并的分支目录;Revision range to merge是想要合并的修改内容,可以选择全部修改或部分修改。4、点击next...原创 2018-08-21 09:06:32 · 337 阅读 · 0 评论 -
常用操作快捷键
平时用到的快捷键记录下来,持续更新~MacOS打开一个新窗口command+n 强制退出程序option+command+esc 显示隐藏文件command+shift+. 强制退出某个程序,在程序坞中右击程序,按住option,即显示强制退出选项 切换输入法Ctrl+space 全屏command+Ctrl+F 显示隐藏文件shift+command+. 打开fin...原创 2018-10-15 11:51:12 · 204 阅读 · 0 评论 -
使用Photoshop记录切图动作
作为前端,切图是繁琐费事又必不可少的工作,但可以将复杂的操作记录下来,再次切图时,可以实现一键切图的功能。一、使用Photoshop打开一个PSD文件,打开动作窗口。二、在打开的动作窗口新建动作,输入名称,点击记录,接下来你要进行的操作,都将被记录下来,包括错误操作。三、接下来进行切图操作,在图层模块中想要切图的图层上右键,选择复制图层...,文档选择新建。点击确定,该...原创 2018-09-03 09:00:19 · 1280 阅读 · 0 评论 -
如何将本地项目上传到码云
一、在码云上新建一个项目,项目名以Demo为例,新建后复制项目地址(后面用得到)。二、在终端打开项目的根目录。三、执行git init命令,此时项目目录中会出现.git文件夹。如果看不到隐藏文件,可以使用shift+command+.显示隐藏文件。四、添加到远程仓库。git remote add origin https://gitee.com/lixiaonie/D...原创 2018-09-10 09:13:59 · 324 阅读 · 0 评论 -
将码云上的项目clone到本地
这篇文章是写给小白弟弟的,适用于所有初学者。一、首先打开想要checkout的项目,点击克隆/下载。二、可以直接点击下载ZIP,下载到本地,这里重点讲解第二种方式。三、点击复制,复制项目地址。1、使用idea等第三方工具checkout到本地依次点击VCS->Checkout from Version Control->Git,打开弹窗。在URL中输...原创 2018-12-05 10:54:50 · 2914 阅读 · 0 评论 -
Cannot checkout from svn:svn:E170013:Unable to connect to a repository at URL '' svn:E230001:Server.
前几天公司服务器被黑了,运维部门重新建立了svn账号,重新分配了项目地址。当使用IntelliJ IDEA checkout项目时,弹出如下错误提示: 因为IDEA保存的还是之前svn账号信息,所以check新项目是没有权限的。可以在终端通过以下步骤来修改svn账号信息1、输入checkout命令,回车svn checkout https://...2、...原创 2019-07-02 10:35:25 · 23465 阅读 · 16 评论 -
IntelliJ IDEA全局搜索Find in Path搜索不到任何结果
一、现象 如下图,不管搜索任何内容,都是Nothing to show。偶尔会遇到这个问题,重启编辑器也不生效,但切换到其他项目可以正常搜索到结果,隔段时间又正常了,一直百思不得其解。二、结果 今天又遇到这种情况,但又急需使用这个功能,于是向大神求助,于是发现了这里。。。 原来是不知道误触了哪里把Regex勾选上了,而隔段时间恢复正常也是因为...原创 2019-07-19 17:15:18 · 6880 阅读 · 0 评论 -
Chrome DevTools之Elements
DevTools中的调试面板有很多,将在后面的文章中分别进行介绍,本篇重点介绍Elements-元素面板原创 2019-10-03 10:33:21 · 1015 阅读 · 0 评论 -
Chrome DevTools之Console&Sources调试
Console控制台面板和Sources资源面板常在一起被用于调试js代码。一、查看代码中输出的log 进入百度首页时,我们可以看到如下log输出 点击log后面的行数,可以查看输出这段log的源代码 源代码是被压缩过的,点击左下角的“{}”,可以将代码格式化显示 同理,还可以使用console的warn、erro...原创 2019-10-09 14:33:16 · 2262 阅读 · 0 评论 -
如何使用github创建并管理开源项目
通过github了解与使用各种开源项目已经很久了,但如何创建一个自己的开源项目呢? 1、注册账号。 2、登录github,点击新建项目的链接。 3、填写项目信息,点击create repository。 4、打开设置SSH key页面5、生成ssh key(以mac os系统为例)首先在命令行中运行ssh-...原创 2018-07-11 22:20:20 · 1915 阅读 · 0 评论