唯之为之

自用 vscode 插件 1. EditorConfig for VS Codeeditorconfig 用来定义编辑器的编码格式规范，编辑器的行为会与 .editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高。简单说明：在项目根目录下创建 .editorconfi 文件，然后设置好内容，则其他人更新后同步到本地，你们的代码规范就会保持一致。我的 .editorconfi 文件内容： root = true # 根目录的配置文件，编辑器会由当前目录向上查找，如果找到`roor = true` 的文件，则不再查找[*]indent_style = space # 空格缩进,可选"space"、"tab"indent_size = 4 # 缩进空格为4个end_of_line = lf # 结尾换行符，可选"lf"、"cr"、&q ...

马上就要过年了，看着我这毫无生气的博客，感觉有点亏待它。博客过年，马上安排！本博客基于 hexo 和主题 Butterfly 修改。 先上预览图 修改Butterfly配置文件修改文件 _config.butterfly.yml修改主页图片 index_img: /img/banner/lantern_banner.pngdefault_top_img: /img/banner/lantern_banner.png 修改背景色 background: "#fff6f6" 修改主题色 theme_color: enable: true main: "#ff0000" paginator: "#ff0000" button_hover: "#fb5050" text_selection: "#fb5050" toc_color: "#fb5050" blockquote_padding_color: "#ff0000" blockq ...

个人一直在用的浏览器插件。好用的浏览器插件，总会提升你的工作效率 1. Tab Session Manager强烈推荐这是一款自动保存你的浏览器所有打开页面的插件，可以做到定期（周期支持自定义）保存。很多时候，当我们电脑没电了，或者误操作关闭了浏览器，当你想要找回之前打开的界面，你需要从历史记录里一个一个找，这款插件让你从此告别这种烦恼。打开此插件，选择记录，回到某一时间，打开那时所有打开的界面。 edge浏览器插件地址chrome浏览器插件地址 2. MONKNOW 新标签页 - 个性化面板新标签页插件，图标描述大小支持自定义，壁纸支持自定义或者官方库自动切换，超多自定义功能满足你的需求，同时支持云同步，可以跨浏览器同步你的标签页。 edge浏览器插件地址chrome浏览器插件地址 3. Adblock Plus - 免费的广告拦截器如题，这个大家都懂，支持白名单网站。 edge浏览器插件地址chrome浏览器插件地址 4. StylusStylus 是一个调整网页外观的用户样式管理器。如下图，我主要用来解除CSDN登录不能复制的限制，当然你也可以美化其他界面，甚至达 ...

开源字体整理，主要是为了使用方便。一般来说，开源字体大多都是可以免费商用的，具体使用请查看对应的开源协议，禁止售卖 开源字体1. 得意黑得意黑是一款在人文观感和几何特征中寻找平衡的中文黑体。整体字身窄而斜，细节融入了取法手绘美术字的特殊造型。字体支持简体中文常用字（覆盖 GB 2312 编码字符集）、拉丁字母、日文假名、阿拉伯数字和各类标点符号。 下载：https://github.com/atelier-anchor/smiley-sans 2. 思源黑体思源黑体是一套 OpenType/CFF 泛中日韩字体。这个开源项目不仅提供了可用的 OpenType 字体，还提供了利用 AFDKO 工具创建这些 OpenType 字体时的所有源文件。 下载：https://github.com/adobe-fonts/source-han-sans 3. 思源宋体思源宋体是一套 OpenType/CFF 泛中日韩字体。这个开源项目不仅提供了可用的 OpenType 字体，还提供了利用 AFDKO 工具创建这些 OpenType 字体时的所有源文件。 下载：https://gith ...

之前通过 nvm 来管理了 nodejs 版本，结果安装 pnpm 之后，安装全局依赖报错，如下： PS C:\Users\Administrator> pnpm i -g commitizen ERROR  Unable to find the global bin directoryRun "pnpm setup" to create it automatically, or set the global-bin-dir setting, or the PNPM_HOME env variable. The global bin directory should be in the PATH.运行 pnpm setup 之后还是报这个错，看提示应该是配置问题，故做此纪录。 安装通过 npm 安装即可。 PS C:\Users\Administrator> npm i -g pnpmD:\node\nodejs\pnpm -> D:\node\nodejs\node_modules\pnpm\bin\pnpm.cjsD:\node\nodej ...

一、准备工作1. GitHub + Hexo 的优势Hexo 提供现成的模板和模块；github 的 pages 功能提供免费的服务器，零成本搭建属于自己的博客。 2. 需要了解的网站 github，开源代码托管网站，需要我们去注册一个账号。 hexo，一个快速、简洁且高效的博客框架，需要我们去提前了解一些搭建文档。 git，本地安装 git 工具，实现代码提交和推送。 nodejs，本地安装 nodejs，Hexo 基于 nodejs 编写的。 以上安装软件操作，请自行搜索 二、github 上创建仓库1. 新建仓库 2. 填写地址仓库名称为 <用户名>.github.io，勾上 Add a README file。 提示，用户名为你自己的 github 帐号，见下图。 3. 访问访问地址 https://<用户名>.github.io，如图则说明创建成功。 三、本地安装 Hexo，生成博客模板1. 安装 Hexo打开cmd，执行 npm install -g hexo-cli 查看 Hexo 版本 hexo -v 执行结果如下 PS C:\User ...

本地生成 sshkey 打开git命令工具 cd ~/.sshssh-keygen -t rsa -C "实际的eamil地址"···// 一路回车，出现以下则说明成功Your identification has been saved in C:\Users\Administrator/.ssh/id_rsaYour public key has been saved in C:\Users\Administrator/.ssh/id_rsa.pub··· 复制 id_rsa.pub 内的内容，粘贴至远程 git 网站设置。 本地切换远程仓库地址 git remote -v 查看本地远程仓库地址 git remote rm origin 删除本地仓库地址 git remote -v 查看本地仓库地址是否删除 git remote add origin xxx 添加新的远程仓库地址，xxx为新的远程仓库地址 git remote -v 查看本地更新的仓库地址是否已经生效 将本地项目关联到远程仓库有两种办法：一. clone 项目到本地，然后将本地项目内的文件复制 ...

简介Clash Verge 是一个上网工具，详情可查看 github 地址。目前本人在用的 协议，可先试用。 npm 相关1. 修改 npm 代理使用 Clash Verge 时会自动开启系统代理服务器，此时使用 npm 会导致不能正常连接网络，需要为 npm 也配置此代理。打开 cmd 或 powershell，通过命令行为 npm 设置代理 npm config set proxy http://127.0.0.1:7890npm config set https-proxy http://127.0.0.1:7890 如果要取消代理 npm config delete proxynpm config delete https-proxy git 相关1. 修改 git 代理同 npm，使用 Clash Verge 后，git 连接 github 时，也出现了连接网络的问题，需要给 git 设置代理。 git config --global http.proxy http://127.0.0.1:7890git config --global https.proxy http:// ...

1. 安装 vue-cli，已有的请跳过这一步npm install -g @vue/cli 若已安装旧版 vue-cli 则需要先卸载 vue-cli npm uninstall -g vue-cli 2. 创建项目vue create project-name// 提示Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)> Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features// 选择vue2，稍等一会提示创建成功，如下🎉 Successfully created project demo.👉 Get started with the following commands: $ cd demo $ npm run serve 创建成功后，目录如下： 3. 修改多界面配置参考 官方文档。修改 vue.config.js 文件，在 pages 里增加界面 const { defin ...

简介vue数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。实现方式：数据劫持 结合 发布者-订阅者 模式。数据劫持通过 Object.defineProperty()方法。 对对象的劫持 构造一个监听器 Observer ，用来劫持并监听所有属性，添加到收集器 Dep 中，当数据发生变化的时候发出一个 notice（通知）。 添加一个发布者 Dep , 用来收集订阅者 Watcher 和发布更新通知 。 视图中会用到 data 中的 key ，这称为依赖。同⼀个 key 可能出现多次，每次都需要收集出来用⼀个 Watcher 来维护它们，此过程称为依赖收集多个 Watcher 需要⼀个 Dep 来管理，需要更新时由 Dep 统⼀通知。 构造一个订阅者 Watcher ，一方面接收监听器 Observer 通过 Dep 传递过来的数据变化，一方面执行自身绑定的回调函数（update）进行界面更新。 实现一个解析器 Compile ，实现指令解析，初始化视图，并订阅数据变化，绑定好更新函数。 值得注意的是，解析器在解析DOM的时候，是用的 DocumentFragme ...