Annie的博客

使用nvm安装了node 12/16/18都没有问题，到14就报错了。对于m1芯片的MacBook，需要执行以下命令。

3、在根目录下执行[shift+command+. ]，显示隐藏文件夹，此时在.ssh文件夹下可看到新生成的两个文件。3、修改 remote url ，将原来的http链接改为ssh链接后就可以正常 pull 和 push了。4、使用编辑器打开id_rsa.pub文件，复制全部内容，即为 public key。按下图所示顺序，找到添加 key 的入口，进行复制添加。2、在根文件夹（非项目文件夹）执行以下命令后。二、将 public key 添加到项目中。2、找到项目中隐藏的git配置文件。

遇到这种情况，多数情况会使用 nvm 进行 node 版本管理，具体使用方法可戳。但若要并行开发两个不同环境下的项目，不停切换node版本，也难免有些繁琐。此时，使用 docker + vscode 可以实现多个不同环境的并行开发。

在build项目时，production模式下打包出的项目文件与其他模式略有不同，导致生产环境与开发环境运行差异。1、安装docker（本文不赘述docker安装过程，可自行参考其他文章），在项目根目录创建docker文件夹。执行成功后，可在docker中看到创建的应用，点击按钮，即可在浏览器中打开。4、创建docker镜像，imagesName 为创建的镜像名称（注意命令后面的点.)6、创建docker应用，appName 为创建的应用名称。执行成功后，可在docker中看到创建的镜像。

项目增加了几个依赖包，npm i执行完后，每个文件的开头都出现了eslint报错，如下图 官网中有对 vue/script-setup-uses-vars 规则的说明，其对该规则的描述为Prevent<script setup>variables used in<template>to be marked as unused 即，防止将定义在< script setup >标签中，但在template...

一、问题出现背景（重现步骤） 使用 vscode 执行 pull rebase 后有冲突，解决完冲突后，执行 commit 时，弹出报错弹框。二、解决方案在网上找了很多解决方案，但都没解决自己的问题，可能是每人出现问题的背景不一样，虽然报错信息是一样的。自己摸索的解决方案，解决了自己的问题。不一定适合所有人，但可以试试。以下操作都通过在 terminal 中输入命令执行，暂时不使用 vscode 的可视化操作。1、先查看一下git当前的状态git s...

最近用 git 协作开发比较多，遇到冲突和各种问题的概率也增加了，特此记录一下 git 的命令行操作以及 vscode 中对应的部分可视化操作。一、查看操作1、查看当前git状态，可查看当前是否有修改待提交的文件。git status2、查看操作记录，可查看最近几条操作记录，包括操作的时间、作者、注释信息等。git loggit log --author 'Liyn' // 查询某个作者的提交记录3、查看修改差异git diff4、...

最近用到element-plus中带快捷选项的日期时间范围选择器，如上图，官方案例左侧提供了最近一周、最近一个月、最近三个月快捷选项。 但当我按照官方示例用法放到自己项目中时，输入框中显示的时间范围却是错误的，起始时间与终止时间永远只显示当前时间。 一度怀疑自己用法不对，直到将官方demo代码完全复制到项目中，发现还是错误。最终将demo 中的 shortcuts 定义，改为如下即可。shortcuts: [ { text: '最近7...

总是能遇到奇奇怪怪的需求，但总要耐耐心心的寻找出路。还好在踩完坑后，整理出来一套不太复杂的解决方案。1、将svn项目检出到本地svn checkout 'http://...'注意事项：1、尽量在空文件夹中进行操作，避免被其他项目的svn或git污染，导致不必要的麻烦。2、git仓库地址尽量是空的，尽量避免出现readme文件，否则push时还需要合并代码。...

最近给客户部署的项目中，偶尔会出现一些非必现的bug，调试起来很不方便。于是在项目中引入Sentry，来记录错误日志。Sentry是一款用于应用监控和错误追踪日志平台，支持vue、react等多种语言框架。分为客户端和服务端，客户端嵌入需要被监控的项目中，程序出现异常就会向服务端发送消息，服务端可以查看到日志详情。使用时可以直接使用线上服务，也可在本地部署。下面介绍一下本地部署的步骤和使用方式。官方推荐的是使用docker部署（官方文档），这里也以docker为例，搭建Sentry服务。docker

在工作和学习中，有时需要研究、调试或演示一些小组件或小功能，并不需要完整或复杂的项目，但却需要一个运行环境。这时，可以通过npm创建一个极简的运行环境。下面以JSONPath的使用为例，进行说明。1、初始化项目npm init因为只是demo，执行命令后，一路回车选择默认项即可，默认入口文件为index.js。2、可以看到执行命令的目录下，生成了一个package.json文件，文件内容即为刚刚选择的默认项设置，手动添加一条启动命令。{ "name": "demo", "

一、创建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

同样是滚动条，Mac上的就比Windows上的美观很多。但通过css修改滚动条样式，有很多局限，并且兼容性很差。通常情况下的解决方案是将默认滚动条隐藏，再通过样式模拟一个滚动条，并通过js计算滚动条的长度和位置。 而如果在项目中对每个可能出现滚动条的div都模拟滚动条并计算位置，是很庞大的工程，所以出现了很多美化滚动条的组件。其实，在很多项目中引入的element-ui组件库中就有封装好的滚动条，只是在官网上并没有相关文档，所以可能被大部分同学忽略了。 细心的同学可以...

之前介绍过很多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结点，使用快捷键打开命令菜...

先来看一下我的数据结构，每个数据都可能存在children属性，每个children属性中都可能有一个或多个对象。要求找出所有的id，并进行相应的操作。let data = { name:'grandparents', children:[{ id:0, name:'parents', children:[{ id:1, name:'son', sex:'...

数据返回iconfont编码格式为：&#xe601;将编码格式改为：\ue601

1、下载vue语法高亮插件，下载地址：https://github.com/vuejs/vue-syntax-highlight，直接下载zip包解压即可。2、按下图所示路径，打开packages文件夹3、在packages文件夹中新建vue文件夹，并把下载的zip包解压后的文件全部粘贴到vue文件夹中4、通过以下路径，或快捷键command+shift+p，打开命令面板...

上篇介绍了nrm的使用，这次来介绍一下另一个好用的工具——nvm，用于nodejs的版本管理。nodejs版本升级较快，可能一次开发未完成，node就已经升级了，当开发周期比较长，用到的npm包依赖的node版本不一样时，就需要对node版本进行管理。一、安装 nvm的安装比较复杂，window和Mac OS的安装方法也不相同，具体可参考https://github....

npm大家已经很熟悉了，但可能很多人并没有听说过nrm。nrm的全称是npm registry manager，即npm的镜像源管理工具。我们大多数人应该在使用npm时，使用过淘宝镜像来进行npm包的安装，但当有多个源时，切换并不方便，这时就可以使用nrm来管理镜像源。安装npm install nrm -g 在Mac OS下，全局安装时，可能会报错提示没有权限，...

最近公司整体换了新机，安装完SVN和idea之后，发现项目无法check，报错“Cannot run program "svn" (in directory "..."): CreateProcess error=2, 系统找不到指定的文件”，如下图。 在命令行中输入svn，提示不是内部或外部命令。这是因为环境变量没有配置好，可以手动在设置中修改配置。但是，如果正确安...

    前面学习了在项目中使用webpack对各种类型的文件进行处理和打包，但是在开发过程中，不停的build并不友好，我们需要区分正式环境和开发环境。使用webpack-dev-server可以提升开发过程中体验和效率。首先也需要在package.json中进行配置：'script':{ 'build': 'webpack --config webpack.config.js', //用于正...

    上周学习了从0开始搭建项目，并用webpack进行打包。然而实际项目中，我们需要处理的不仅仅是简单的js和css文件，可能还需要处理ES6、CoffeeScript、less、Sass以及图片等其他资源文件。这时就需要引入各种Loader了。    先来按照常用的项目结构新建几个目录及文件，layer为项目中自定义的组件，我们的目标是使用webpack来处理组件中的less文件及使用ES6...

    上周了解了gulp，不得不再来了解一下应用更多的webpack，毕竟现在vue项目中使用的是webpack。先来了解一些webpack在命令行中的简单操作。    首先在项目目录中安装webpack。npm install webpack --save-dev    安装完成后，项目中增加了node_modules文件夹和package.json文件。在项目目录中新建inde...

    终于抓住了本周的尾巴，来完成每周一篇的学习记录。这周的身体状况依旧不太良好，在看视频学习时不能边学边实践，只能把不容易理解的地方翻来覆去多看几遍。但是本周的学习感觉还是收获颇丰，因为了解了一个之前不曾了解过的内容——自动化构建。    回想之前做过的项目，在使用vue之前，用seajs实现模块化开发，几乎不存在前端构建的问题。使用vue后，直接用cli脚手架初始化项目，发布项目时也不过一个...

在项目开发中，文档是必不可少的一部分，使用gitbook可以更好的书写和管理文档。安装npm install gitbook-cli -g新建.md文件，并使用markdown编写文档（语法教程很多，此处不是文章重点）# Summary* [项目介绍](README.md)* [使用文档](doc/use/README.md)* [二次开发](doc/dev/REA...

一、分支合并到主干1、在分支目录下update，确保与repository同步；2、在trunk目录下右击，选择TortoiseSVN→Merge…，出现如下弹框；3、点击next，出现如下弹框；    URL to merge from是需要合并的分支目录；Revision range to merge是想要合并的修改内容，可以选择全部修改或部分修改。4、点击next...

平时用到的快捷键记录下来，持续更新~MacOS打开一个新窗口command+n 强制退出程序option+command+esc 显示隐藏文件command+shift+. 强制退出某个程序，在程序坞中右击程序，按住option，即显示强制退出选项 切换输入法Ctrl+space 全屏command+Ctrl+F 显示隐藏文件shift+command+. 打开fin...

作为前端，切图是繁琐费事又必不可少的工作，但可以将复杂的操作记录下来，再次切图时，可以实现一键切图的功能。一、使用Photoshop打开一个PSD文件，打开动作窗口。二、在打开的动作窗口新建动作，输入名称，点击记录，接下来你要进行的操作，都将被记录下来，包括错误操作。三、接下来进行切图操作，在图层模块中想要切图的图层上右键，选择复制图层...，文档选择新建。点击确定，该...

一、在码云上新建一个项目，项目名以Demo为例，新建后复制项目地址（后面用得到）。二、在终端打开项目的根目录。三、执行git init命令，此时项目目录中会出现.git文件夹。如果看不到隐藏文件，可以使用shift+command+.显示隐藏文件。四、添加到远程仓库。git remote add origin https://gitee.com/lixiaonie/D...

    这篇文章是写给小白弟弟的，适用于所有初学者。一、首先打开想要checkout的项目，点击克隆/下载。二、可以直接点击下载ZIP，下载到本地，这里重点讲解第二种方式。三、点击复制，复制项目地址。1、使用idea等第三方工具checkout到本地依次点击VCS-&gt;Checkout from Version Control-&gt;Git，打开弹窗。在URL中输...

前几天公司服务器被黑了，运维部门重新建立了svn账号，重新分配了项目地址。当使用IntelliJ IDEA checkout项目时，弹出如下错误提示： 因为IDEA保存的还是之前svn账号信息，所以check新项目是没有权限的。可以在终端通过以下步骤来修改svn账号信息1、输入checkout命令，回车svn checkout https://...2、...

一、现象 如下图，不管搜索任何内容，都是Nothing to show。偶尔会遇到这个问题，重启编辑器也不生效，但切换到其他项目可以正常搜索到结果，隔段时间又正常了，一直百思不得其解。二、结果 今天又遇到这种情况，但又急需使用这个功能，于是向大神求助，于是发现了这里。。。 原来是不知道误触了哪里把Regex勾选上了，而隔段时间恢复正常也是因为...

DevTools中的调试面板有很多，将在后面的文章中分别进行介绍，本篇重点介绍Elements-元素面板

Console控制台面板和Sources资源面板常在一起被用于调试js代码。一、查看代码中输出的log 进入百度首页时，我们可以看到如下log输出 点击log后面的行数，可以查看输出这段log的源代码 源代码是被压缩过的，点击左下角的“{}”，可以将代码格式化显示 同理，还可以使用console的warn、erro...

以优快云首页为例，来列举Network面板的功能，我将Network面板的功能总结为三个方面。一、查看静态资源请求和分布 切换到Network面板，打开优快云首页，资源加载情况如下，调节时间轴，可以筛选出某个时间段内的请求。 菜单栏最左侧的红色圆点表示是否记录网络log，默认开启记录，当关闭时将不再记录页面中的网络请求。 第二个图标...

通过github了解与使用各种开源项目已经很久了，但如何创建一个自己的开源项目呢？ 1、注册账号。 2、登录github，点击新建项目的链接。 3、填写项目信息，点击create repository。 4、打开设置SSH key页面5、生成ssh key（以mac os系统为例）首先在命令行中运行ssh-...