自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

主要领域:前端开发

2019年年度博客之星;微信公众号:前端历劫之路;个人微信:maomin9761

  • 博客(300)
  • 收藏
  • 关注

原创 每个前端开发者都可以开发一个属于自己的库或框架「Strve.js生态初步建成」

前言从3个月之前,就想自己开发一个库,从而提高一下自己的能力。庆幸的是在年前就开发出来了,并且生态也初步建成。这里提到的生态包括:Create Strve App、Strve Router以及其他辅助Strve.js开发的工具。说实话,这段时间是挺难熬的,这也算是今年给自己一个礼物吧!我开发Strve.js的初衷是之前接触过JSX语法,一直觉的JSX语法非常酷,可以在JS中写HTML标签,于是就想开发一款类似JSX语法的库。刚开始也开发了一段时间,搭配Babel可以简单实现JSX语法。但是到后来觉得并

2021-12-22 23:49:54 986 17

原创 「create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

前端项目命令行工具

2021-12-19 16:22:14 734

原创 文档如何自动化部署到线上环境「每个前端都可以拥有自己的博客」

前言说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。那么,作为开发者的我们,怎么不也搞一个类似于技术文档的网站作为自己的博客呢?现在有很多开源的项目可以做博客,比如基于Vue.js开发的Vuepress以及同一家的Vitepress,还有基于React.js开发的Docusaurus。这么多方案,我们今天就拿Vuepress为例来搞一下线上可以访问的博客。在开始实战之前呢!透露一下最近在搞得开源库Strve

2021-12-16 23:51:48 1213 2

原创 浅析Vue响应系统原理与搭建vue2.x迷你版

Vue2.x响应式原理怎么实现的?Vue 最独特的特性之一,是其非侵入性的响应式系统。那么什么是响应式原理?数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率。简言之,在改变数据的时候,视图会跟着更新。了解概念之后,那么它是怎么实现的呢?其实是利用Object.defineProperty()中的getter 和setter方法和设计模式中的观察者模式。那么,我们先来看下Object.defineProperty()。MDN中它是

2021-06-24 00:30:59 218 2

原创 Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?

为什么使用Virtual DOM手动操作DOM比较麻烦。还需要考虑浏览器兼容性问题,虽然有JQuery等库简化DOM操作,但是随着项目的复杂DOM操作复杂提升。为了简化DOM的复杂操作于是出现了各种MVVM框架,MVVM框架解决了视图和状态的同步问题为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题,于是Virtual DOM出现了Virtual DOM的好处是当状态改变时不需要立即更新DOM,只需要创建一个虚拟树来描述DOM,Virtual DOM内部将

2021-06-21 21:08:57 177

原创 关于Virtual DOM理解和Snabbdom源码浅析

什么是Virtual DOMVirtual DOM(虚拟DOM),在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象,因为不是真实的DOM对象,所以叫虚拟DOM。<div></div>{ sel: 'div', data: {}, chidren:undefined, elm:undefined, key:undefined,}Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我

2021-05-25 21:19:26 235 5

原创 从给Vite2官方提了一个issues并已被认可为Bug,我学到了什么?

缘起我打算使用自己搭建的V3项目脚手架parcel-vue-app搞一搞项目,毕竟是刚出来,很多东西都不完善,只能自己不断尝试。于是,使用parcel-vue-cli开始初始化项目(如果有小伙伴对parcel-vue-app感兴趣的,文末有源码地址)。…项目搭建完毕启动地址是http://localhost:3000/,一顿操作之后,页面也能很快地更新数据。不得不觉得Parcel在这方面做得还是很不错的。于是这时,想到了尤大大开发的Vite,决定比较一下。于是进入vite官方网站,下载了vite@2.

2021-05-14 00:55:22 494

原创 尤大都说了,别用parcel了。但我还是整出了一款Vue3项目搭建工具parcel-vue-app

先放图弱弱的说一句,我真的错了。不该用parcel~前几天,尤大开直播说了造轮子的好处,主要还是锻炼自己。所以自己还是义无反顾地把这个项目搭建工具慢慢地造起来。这次升级这次版本是v1.0.5。我们来看下这次版本的预装依赖,我们的项目UI框架预先安装上了ant-design-vue@2.1.4,默认是按需加载。为什么这次是引入它,而不是element-plus,主要是考虑到parcel2针对babel.config.js这样的JS文件对组件样式引入实时检测不是很好,你必须手动刷新才能获取最新状态

2021-05-11 23:59:15 356 7

原创 【前端自动化】如何使用Node.js实现热重载页面

前言前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面。那么,我今天就总结一下吧,以防止大家也跟我一样。热重载所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新。热更新浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。目的:加快开发速度,所以只适用于开发环境下使用。思路:保留在完全

2021-05-04 20:18:48 657 2

原创 正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp

前言今天,篇幅可能比较短,主要介绍最近这段时间开发的一款脚手架——FastReactApp。这是一款基于Parcel2 开发的React.js项目脚手架。虽然比不上正在前端界火爆的Vite以及占据稳定地位的CreateReactApp,但是基本的项目开发还是可以的。下面我将介绍FastReactApp几点特征:对JS、CSS、HTML、文件资产等的现成支持—不需要插件。使用dynamic import()语法,它分割输出包,以便您只在初始加载时加载所需的内容。当您在开发过程中进行更改时,它会自动

2021-04-24 22:38:29 266

原创 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?

浏览文章前这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的。被反复使用的代码这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习。穿越时间的代码如果一段代码10年甚至15年,都还在使用。说明它的设计思想一定很棒。好调试的代码一个程序的代码很容易就调试成功,说明作者的项目结构能力很强,值得学习。前言今天,我们来搞一个新东西,名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说,这个名字我想了很久。最终,还是以这个名字作为文章标题。我先拆分解释下:全栈的意思

2021-04-11 18:54:59 196

原创 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具

前言一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的。言归正传,我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么,今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么?怎么以前没有听说过。有这样的疑问其实并不奇怪,因为这个构建工具是我自己开发的。你可能会这样问:“你自己开发的?这么厉害吗”?是的,豆哥其实就这么厉害。开玩笑啦!其实没有你想得那么厉害。都是搬砖人,主要看思路。好,不扯了!本篇文章我将带大家如何从0到

2021-03-30 01:22:57 480

原创 SimpleMarkDown编辑器离线版以及桌面应用版上线

之前,我们开发了Web版本SimpleMarkDown编辑器。今天,我们又推出了离线版和桌面应用版。主要功能:页面简约;实时保存;一键清空内容;支持微信公众号、知乎、稀土掘金、CSDN等多个平台;可复制HTMl格式文本;可复制MarkDown格式文本;可下载为MarkDown文件;获取链接请尊重原创~关注公众号,可以进学习交流群哦,这里有大厂大佬精心解答,另外还有分享最新技术动向。公众号:前端历劫之路...

2021-03-21 23:21:07 273

原创 我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)

前言之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器,都很优秀。不为超过他们,主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。完成项目一览调研Markdown编辑器国内、国外关于Markdown编辑器有很多。editor.md网址:https://pandao.github.io/editor

2021-03-07 23:28:38 3680 18

原创 日常js工具函数整理

防抖方法/** * 防抖 * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */let timeout;export default function Debounce(func, wait = 3000, immediate = true) { // 清除定时器 if (timeout !== null)

2021-01-18 11:03:40 294

原创 Vscode个性化设置:让一个小萌妹陪你敲代码

前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点:开源,免费;自定义配置集成git智能提示强大支持各种文件格式(html/jade/css/less/sass/xml)调试功能强大各种方便的快捷键强大的插件扩展对前端这么友好,没理由不用。偷偷告诉你下载网址:https://code.visualstudio.com/效果图先上图,注意下图是动态的。是不是很萌萌哒~配置这么萌的效果,怎么实现呢?配置如下,Windows环境和Mac环境

2020-12-03 14:16:57 23468 127

原创 手把手教你做一个华为鸿蒙系统Demo级项目(JS角度)

系统定位HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终端设备。对消费者而言,HarmonyOS能够将生活场景中的各类终端进行能力整合,可以实现不同的终端设备之间的快速连接、能力互助、资源共享,匹配合适的设备、提供流畅的全场景体验。对应用开发者而言,HarmonyOS采用了多种分布式技术,使得应用程序的开发实现与不同终端

2020-11-21 23:51:31 3756 3

原创 React与Koa一起打造一个仿稀土掘金全栈个人博客(技术篇)

前言我的个人博客样式是仿的稀土掘金 ,本篇将分为前台角度与后台角度来分析是怎么开发的。前台角度主要资源react.jsant Designfor-editoraxioscraco-lessimmutablereact-loadablereact-reduxreact-router-domreact-transition-groupreduxredux-immutableredux-thunkstyled-components模块页面首页登录注册文章.

2020-06-16 17:33:11 3516 1

原创 你要的几个JS实用工具函数(持续更新)

你要的几个JS实用工具函数(持续更新)1、封装fetch源码:/** * 封装fetch函数,用Promise做回调 * @type {{get: (function(*=)), post: (function(*=, *=))}} */const fetchUtil = { get: (url) => { return new Promise((resolve, reject) => { fetch(url, {

2020-05-15 14:10:23 3266 3

原创 【免费开源】2020年独家全球疫情大数据接口(实时获取)

武汉加油,中国加油!!!为了做点贡献,特此免费开源接口,供大家在各平台使用。接口:https://www.maomin.club/fy/get/有了接口,还需要进一步处理。需要将获取到的res通过eval方法处理,接着将V.conf.component[0]就是我们要获取的数据,可以传给一个变量data。success: function (res) { eval(...

2020-02-08 20:41:41 25329 37

原创 Strve.js实现简单的数据双向绑定

用过Vue的小伙伴都知道,v-model指令可以实现数据双向绑定。双向绑定除了数据驱动 DOM 外, DOM 的变化反过来影响数据,是一个双向关系。那么我们今天来用Strve.js来实现一下,不到30行代码。源码:效果:Githubhttps://github.com/maomincoding/strve...

2022-05-23 22:30:57 60 2

原创 Vite2 + Strve3:从 0 到 1 实现一款 Web 聊天室应用

前几天Strve.js@3.1.0正式发布,所以想借此机会用它来实操一下。Vite 与 Strve3 到底怎么从 0 到 1 实现一款 Web 聊天室应用的。

2022-04-26 21:14:14 138 1

原创 # 每个前端同学都可以拥有自己的框架,然后去完善它——Strvejs@3.1.0正式发布 #

从 Strve.js 正式发布到现在已经将近半年了,收到很多建议,也收到很多赞扬,谢谢大家!平时抽空的时候,我也在不断地完善这个框架,希望可以更加的健壮。

2022-04-19 22:55:06 217 1

原创 基于Vite构建工具,用Strve.js开发一个简版TodoList

文件目录是不是觉得特别清爽,然后又是基于Vite搭建的,所以开发体验也是不错的。Strve底层是全面拥抱Es Modules,使用Vite搭建项目是不二之选。

2022-02-23 13:10:05 522 2

原创 Strve.js这样写法像不像React?

上周自己抽时间把Strve.js升级了一下,现在目前版本是2.3.3。有兴趣的朋友可以去官方文档查阅一下。说到官方文档,之前有位朋友说我的文档缺乏可视化界面,就是那种在线编辑插件。这位朋友提的建议很不错,就去网上调研了一下,最后选定了Codepen。选定它的原因是我只是单独的页面展示,这样简单就足够了。其次,最近连续更新了两个版本:2.3.3和2.3.2,下面我们来看看这两个版本的更新日志。v2.3.3StrveAPI的参数调整;v2.3.2HTML标签内容支持显示非字符串类型;数据绑定统

2022-02-22 00:09:14 707

原创 Strve.js@2.x正式发布与做open source的一些感受

尤雨溪同学近期的两段分享和Strve.js新版本更新。从90%到100%这个过程其实是很困难的,你就会发现把一个玩具做成真的能用的东西就需要投入很多。

2022-01-31 20:04:06 1116

原创 Strve.js,一个可以将字符串转换为视图的JS库

前言好久没有写原创了,今天就发一篇关于自己研发的JS库——Strve.js的文章。终于体验了一把自己写JS库或框架,自己写文档,自己写工具的乐趣。如果想了解一下Strve.js,可以根据文档上手一下。官方文档:https://www.maomin.club/site/strvejs/NPM:https://www.npmjs.com/package/strvejsGithub:https://github.com/maomincoding/strveStrve.js一个可.

2021-11-29 00:05:59 602 3

原创 canvas 立体图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style></head><body&gt

2021-11-22 14:47:00 434

原创 IIS服务器设置代理实现Node接口转发

前言最近,遇到了一个坑,碰了很多壁,才得以解决所以这里记录一下。也方便大家以后如果遇到的话少踩坑。​是这样的,之前搞过Nginx服务器转发Node接口,大体是这样的。​比如,我在云服务器上使用Node开发了一个/api/getList的接口,并且监听的端口是6600,** **那我们使用Nginx就可以这样来转发。​http { include mime.types; default_type application/octet-stream; sendf

2021-11-14 19:56:05 2803

原创 【JS专栏】JS对象的浅拷贝与深拷贝

浅拷贝自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。​1. object.assignobject.assign 是 ES6 中 object 的一个方法,该方法可以用于JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象,后面的参数是拷贝的来源对象(也可以是多个来源)。

2021-11-04 20:51:52 373

原创 怎样使 git clone 更快

使用国内镜像,目前已知Github国内镜像网站有github.com.cnpmjs.org和git.sdut.me。在clone某个项目的时候将github.com替换为github.com.cnpmjs.org或git.sdut.me即可。

2021-10-13 22:04:40 332 1

原创 Vite+Vue2+Composition-api+<script setup>+TypeScript搭配如何开发项目?

好久没写文章了,今天终于有时间可以安安静静写文章了。前言Vite相信大家都用过,它是一种新型前端开发与构建工具,能够显著提升前端开发体验。我们在搭建Vite项目,选择Vue模板之后,默认会下载Vue3模板。如果你的公司现在还没有准备使用Vue3,而在使用Vue2,那么这篇文章值得你继续看下去。下面,我将带大家如何搭建一个 Vite+Vue2+Composition-api+<script setup>+TypeScript 搭配使用的项目。这篇文章很干,请大家点点赞哦!安装所需依赖又到

2021-09-26 21:55:14 500 3

原创 Vite@2.6.0-beta.0 is out!

2021/9/20 · 20:54 Vite官方在推特发送了关于发布2.6.0-beta.0版本的消息。 消息大概内容是:Vite@2.6.0-beta.0出来了!请帮助我们测试此测试版,并加入chat.vitejs.dev与他人合作。查看更改日志:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md我们打开这个更改日志网址。下面我们来看下到底更新了什么内容。Bug Fixes避免显式公共路径的错

2021-09-22 10:04:55 275

原创 如何高效二次封装Element UI弹窗

首先定义一个Element UI 组件,并且二次封装它。<template> <el-dialog :visible.sync="visible" width="30%" :show-close="false" :custom-class="'dialog-box'"> <slot name="header"> <p class="tit">{{ tit }}<span class="close" @click="closeVi

2021-09-09 09:24:38 417

原创 如何写成Strview.js之源码剖析

前言前段时间我自己开发了一款Strview.js,它是一个可以将字符串转换为视图的JS库。什么意思呢?就像下面这段代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

2021-09-05 17:44:28 149

原创 基于Strview.js项目脚手架StrviewApp是怎么搭建起来的?

前言前几天,因为借着看源码的热乎劲,搞了一个玩具Js库Strview.js。为什么会搞这么一个玩具库呢?其实也不全是因为晚上闲的没事,主要还是想通过实操来锻炼自己的开发能力。之前,我也写过一篇文章,那篇文章只是大体介绍了一下,没有深究。之前大家可能觉得它跟Vue.js差不多,是的,正是借鉴Vue.js的思想,但是有些地方还是不一样(个人觉得)。所以,今天,这篇文章介绍基于Strview.js搭建的项目脚手架工具StrviewApp。如果你觉得对自己有用,可以继续看下去。如果觉得这篇肯定是篇垃圾文章,你也可

2021-08-31 09:20:44 145

原创 git 命令日常积累

分支同步远程分支到本地git fetch查看本地分支git branch切换分支git checkout master合并分支git merge dev删除本地分支或者临时分支git branch -d dev推送分支git push origin master/dev

2021-08-27 09:18:23 162

原创 基于Vue实现跨表格(单选、多选表格项,单表格限制)相互拖拽

前言今天,我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢,也调研了网上很多解决方案,但个人感觉不太符合现在做的这个需求。所以,压根就自己再开发一套,方便以后维护。什么需求呢?就是多个表格之间可以实现相互拖拽,即A表格中的表格项可以拖拽到B表格,B表格的表格项可以拖拽到C表格,并且它们之间可以单选、多选表格项相互拖拽。然后,D表格加以限制,每次只能够拖入一项,需输入密码,密码正确后,被拖入的一项替换D表格中的表格项,被替换的D表格项放入A表格,只能被替换,不能被删除。文字太枯燥,我

2021-08-24 22:12:42 975 2

原创 2021.8.13起,Github要求使用基于令牌的身份验证

缘起昨天晚上提交代码到GitHub时遇到了这个错误。remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.字面大体意思就是你原先的密码凭证从2021年8月13日开始就不能用了,必须使用个人访问令牌(personal access token),就是把你的密码替换成token!之前,听说过有这种机制,GitHub经常也发

2021-08-20 23:43:36 897

原创 从零开始实现命令行工具自动初始化项目工程以及发布到NPM

前言这篇文章将带你从零实现一款命令行脚手架工具用于初始化项目以及如何发布到NPM。首先,我们所熟知的VueCLI就是采用命令行工具快速生成项目工程目录的,这样,我们每次开发项目前只需要在命令行中输入命令,然后就可以快速生成项目工程,非常方便。那么,这么方便的命令行工具是怎么实现的呢?下面我们就开始进入实战环节。实战我将会使用之前自己开发的一款脚手架工具strview-cli来介绍如何实现它的。这个脚手架工具的源码地址如下:https://github.com/maomincoding/strview

2021-08-18 14:16:20 216

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除