- 博客(35)
- 收藏
- 关注
RSS订阅原创 使用lerna搭建monorep
由于项目越来越多，前端项目越来越零散，管理起来越来越难，便于统一管理前端项目，打通项目之间的壁垒，组件更通用化，达到高内聚低耦合的目的；为了更符合实际场景，需要对组件库，utils，config，tools，docs等进行拆分，拆分后的目录结构如下。初始化之后的项目结构。......
2022-08-01 15:34:04
403
原创 架构图技巧
架构图分类常见架构图业务架构定义：描述系统对用户提供了什么业务功能场景：产品人员规划业务给高P汇报业务给新员工培训业务技巧：通过不同颜色识别业务业务分组管理示例客户端架构图 PPT定义： 客户端和前端领域逻辑架构场景：整体架构设计架构培训技巧：通过不同颜色表示角色通过连接链来表示关系自顶向下分层示例：系统架构图 PPT定义：后端逻辑架构图，又叫“后端架构”，“技
2021-12-24 17:16:40
7499
原创 用户为中心的性能指标以及优化方向
从4个角度，评估用户体验当用户访问一个页面的时候，通常会从视觉上去感知是不是页面已经如预期地加载完成可以正常使用了。主题说明发生了吗？页面是否开始跳转？服务器有没有响应？内容重要吗?重要的内容是否已经渲染？可以使用吗?页面可交互了吗？或者还在加载中吗？体验好吗？交互是否平滑自然，没有卡顿？发生了吗？FCP ⾸次内容绘制时间 (First contentful paint)内容重要吗?LCP 最⼤内容绘制时间 (Largest conten
2021-01-23 19:43:43
304
原创 消息队列和事件循环学习流程图
总结如果其他进程想发送给浏览器任务，必须先发给IO线程，再发送到消息队列，最后在渲染页面主线程消息队列机制并不是太灵活，为了适应效率和时效性加上了微任务消息队列事件当接收到 HTML 文档数据，渲染引擎就会将“解析 DOM”事件添加到消息队列中当用户改变了 Web 页面的窗口大小，渲染引擎就会将“重新布局”的事件添加到消息队列中。当触发了 JavaScript 引擎垃圾回收机制，渲染引擎会将“垃圾回收”任务添加到消息队列中。同样，如果要执行一段异步 JavaScript .
2020-12-03 22:18:37
841
原创 webpack5 文档 自定义loader遇到stats.toJson().modules[0].source 为undefined
先去webpack5 英文官网找到对应示例文档， 拷贝完发现还是报undefined然后去看了stats文档，默认为false不显示…加上source: true测试成功
2020-12-03 21:56:08
310
原创 windows电脑c盘快满了，找不到原因？看看是不是微信文件WeChat Files在C盘
windows装完系统没多久C盘就快满了1. 使用腾讯管家C盘瘦身工具检测结果好像没啥用…2. 使用原始办法，查看文件大小从C盘根目录开始查看每个文件大小定位问题下面是占用空间比较大的文件夹可以发现微信默认文件夹占用20G…3. 解决方案点击微信-设置-文件管理，更改文件位置，等待文件自动迁移完毕...
2020-09-22 09:18:31
6846
原创 Nuxt主要功能介绍
什么是服务器端渲染 (SSR)？Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。为什么使用服务器端渲染 (SSR)？更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。更快的内容到达时间 (time-to-content)Nuxt.js 是什么？Nuxt 是一个基
2020-09-11 15:48:39
1450
原创 撸个toyVue
响应式reactive和副作用函数effects<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>toy-vue</title></head><body> <div id="app"> <p>{{message}}</p> </d
2020-09-07 16:55:08
448
原创 node-crawler爬虫实践
安装node 插件cnpm i axios crawler代码function decode(str) { // 一般可以先转换为标准 unicode 格式（有需要就添加：当返回的数据呈现太多\\\u 之类的时） str = unescape(str.replace(/\\u/g, "%u")); // 再对实体符进行转义 // 有 x 则表示是16进制，$1 就是匹配是否有 x，$2 就是匹配出的第二个括号捕获到的内容，将 $2 以对应进制表示转换 str
2020-08-12 13:04:12
386
原创 nodejs生成项目目录树
记录一个项目目录生成代码，方便写文档// 递归目录树（只能用同步，用异步会出现后面的文件比前面的文件先输出，顺序会乱。）// 默认按照ASCII码的顺序，例如js里面的sort()函数。 // 先写一层的情况// 抽象递归参数// 找到突破点（避免死循环）// 自己调自己，某种情况（肯定会存在的）不调用 const fs = require('fs');const path = require('path'); // 获取当前有没有传入目标路径var target = pa
2020-08-12 09:37:38
726
原创 git子模块实践
git子模块实践遇到的问题A，B两个项目中有很多公用静态资源静态资源包括 js插件，基础组件，业务组件，图片，文档…使用npm管理 会使项目复杂化 ，新增组件调试流程复杂，静态资源上传到npm后下载安装包会很慢准备工作打开github新建仓库 gittest3新建仓库 gittest3child[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZYK3PmO-1589529444297)(C:\Users\Administrator\App
2020-05-15 15:58:02
331
原创 分享一个Vue前端代码质量检查方案
质量降低导致的问题开发效率会降低出问题难以调试维护体验差项目不能保证足够的稳定什么导致的代码质量降低不在意代码质量, 只关注业务的产出破窗效应对好代码没概念初步方案从oms bms项目开始初步尝试代码风格要遵循Vue风格指南（主要规范）引入Ts技术栈(待定)引入单元测试，保证组件稳定性(待定)编辑器使用EditorConfig编辑器插件来统一控制代码风格引入...
2020-05-05 10:30:00
2227
原创 超实用 vue2 项目代码风格统一 搭配eslint pretter配置
安装vscode插件 Vetur ESlint EditorConfig for VS Code安装node插件cnpm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue项目配置文件EditorConfig for VS Code# .editorcon...
2020-05-05 10:25:56
937
原创 macOs配置远程办公
初次使用会遇到的坑“IPSec 共享密钥”丢失。请验证您的设置并尝试重新连接。在etc/ppp下面创建文件optionscd /etc/pppsudo vi options使用vim在文件中写入下面的内容plugin L2TP.pppl2tpnoipsecvpn连接上之后无法通过vpn访问的解决办法...
2020-02-15 10:14:05
676
原创 dependencies和devDependencies正确打开方式
正确的打开方式当开发的package作为另外一个package的插件时，开发的package中的dependencies列表才会对用户可见
2020-02-14 10:23:22
396
原创 gitflow工作流 在实际使用中遇到的一些问题
gitflow工作流分支develop 分支（主分支） 开发分支master 分支 （主分支） 测试版本修复好bug合并到这里并打上tag 生产环境版本管理分支release 分支 （主分支） 测试版本分支（用于测试环境修复bug 不容许新增需求）feature分支 新任务开发分支（用完即删）hotfix分支 修复发布到master分支的bug，修复完成后用cherry-pick合并...
2019-11-02 11:11:55
839
原创 babel6下使用jest单元测试
背景：项目中后端api地址虽然做了环境变量配置，但是还是有同学随意更改配置导致测试环境地址发布到生产环境为了避免这种情况出现决定引入单元测试，在提交代码之前做一次测试校验坑：erp项目使用babel6，jest的babel配置需要babel7, 且无法屏蔽.babelrc配置，哭解决方案： jest项目作为一个小项目引入有单独的package.json文件文件结构：...
2019-10-09 16:59:13
2631
原创 撸一个webpack基础配置
在模块化的开发过程中我们经常会使用webpack来帮助我们搭建一个良好的开发环境，提升开发效率；很多人对webpack的那么多配置项感到无从下手，下面是我总结的如何构建一个简单的webpack配置。准备工作先看一下我们一个简单的webpack配置大概需要的目录结构，暂时我们只处理核心的build和config部分build目录基础配置<!--webpack.base.conf.j...
2019-08-31 20:39:21
200
原创 webpack通过hash控制文件缓存
常用hash的种类hash 每次编译都会改变 output: { filename: '[name].[hash:8].js', },chunkhash chunk文件的hash变动 output: { path: path.resolve(__dirname, '../dist'), filename: '[name]...
2019-08-01 20:24:44
300
原创 node脚本， 封装git命令
最近有个需求每次提交版本都需要改变项目login页面的版本号，但是执行起来总是会忘记；于是写了个node脚本，顺便学习了下shelljs, 代码如下// require('shelljs/global'); 全局执行的shelljs const shell = require("shelljs"); // 执行文件操作const a...
2019-07-23 22:40:40
4206
原创 前端实现简单的搜索功能
最近做了个有意思的需求， 前端实现简单的产品搜索并排序class SearchList { constructor() { // 展示的列表数据 this.showList = [] // 全部的列表数据 this.list = [] } // 执行搜索 search(key...
2019-06-29 23:13:32
11147
原创 使用闭包优化防抖函数
如何使用闭包优化防抖函数？优化之前 let timer = null const 防抖 = (函数名, 时间, 参数) => { clearTimeout(timer) timer = setTimeout(() => { 函数名.call(this, ...arguments) }, 时间) } const 函数名 = (函数名, 时间, ...
2019-06-29 23:02:16
564
原创 extenals 与 dllplugin 该用哪一个？
extenals使用方式extenals(外部扩展) 能够使用cdn引入的都是用cdn引入, 然后在 这里配置，引入库暴露的在全局的方法，并自定义一个名称； 在项目中使用时，使用这个名称，就可以引入库；dllplugin使用方式dllplugin 新建一个配置文件先打包部分 变动较少的第三方库， 然后在base配置里面使用DllReferencePlugin引用， webpack会根据man...
2019-06-06 15:15:56
483
原创 webpack优化项目总结
简述webpackwebpack是用来做什么的？本质上，webpack是一个现代化javascript应用程序的静态模块打包器（module bundler），是一种实现前端模块化的构建工具， 在前端模块化进程上有着重要的地位webpack是怎么工作的？当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）， 其中包含应用程序需要的每个模块，然后将...
2019-06-06 15:09:28
1241
原创 多个项目公用组件库设计
项目背景**A 项目在开发过程中需要独立一部分业务出去用作内网访问（财务模块，库存等模块）， 于是在A项目的基础上分割出B项目（Vue， Element-ui）C项目在开发完成后暂时搁置， D项目作为C项目的另一条业务线，部分业务逻辑， 组件和C项目重叠(React, Dva, Ant-ui)遇到的问题A项目和B项目有很大一部分公用文件Js（校验js， 业务数据处理的js...
2019-06-06 11:11:08
2347
原创 分享下工作中使用的git提交规范
遇到的问题版本回退时无法快速定位到指定版本无法知道项目中封版操作是哪一个commit无法清晰的知道每次提交的记录####以下是commit提交规范每次提交，Commit message 都包括三个部分：Header，Body 和 Footer。其中，Header 是必需的，Body 和 Footer 可以省略。[<type>]: (<scope>): &l...
2019-05-17 18:48:40
26697
原创 window powerShell简化git提交
用脚本文件来简化工作流程，现在写个简单的例子定义变量# 未输入commit提示$noCommit = '未输入commit，请重新执行脚本'定义函数# 代码更新流程function update() { if ($commitInfo) { git commit -m $commitInfo git pull git push ...
2019-05-07 15:31:33
581
原创 window powerShell改变权限， 解决window上无法运行powerShell脚本的问题
默认执行策略Restricted //不允许任何脚本运行查询当前执行策略get-executionpolicy# Unrestricted# RemoteSigned# AllSigned# Restricted# Default# Bypass# Undefined在默认情况下，我们是无法执行powershell脚本的执行一下这个命令，双击回车, 会显示可选的执...
2019-05-07 14:32:12
7015
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人