- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 hometown-h5-template 一个开箱即用的前端H5解决方案 【无标题】
hh5t 基于Vue3+TS+Pinia+Vite+UnoCSS等技术栈。是一个干净、开箱即用的前端H5解决方案。 提供完善的前端H5开发环境，为专注业务实现与开发，提高开发效率而生，也可用于学习参考
2023-03-02 14:01:26
445
原创 【 干货】前端开发 需要注意的事项❗️Be Careful❗️
从 代码 到 人生 再到 爱情，17个角度分享工作5年，我觉得作为一个职业前端开发应该注意的一些注意事项，全文干货，没有废话，别问我为什么要分享给你们，问就是想开了。
2022-11-01 18:19:05
860
原创 使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！
大家好，我是HoMeTown，最近在搭建一个公司与某一线大厂有合作，需要做一个性能极其优化的微信小程序，我们组正好刚从企微项目里抽出身来，所以这个艰巨的任务就交给我们来完成了，首先开了一天会，跟合作方的前端经理PM 确定好了技术选型以及规范，分工细则下来以后，得到项目架构&少许业务开发的任务，优化交给合作方去做，因此这个项目会有很多人参与进来，一个强有力的项目约束是十分重要的！
2022-11-01 11:21:50
854
原创 【VUE】从源码角度说清楚MVVM！实现v-model！真的很简单！
大家好，我是HoMeTown，今天聊一聊老生长谈的Vue之双向数据绑定。observe 进行数据劫持，getter时添加Watcher，setter时通知Dep类实现依赖收集与通知执行Watcher类实现订阅者执行更新compile 进行模板编译，解析v-model，给input添加事件完结~
2022-11-01 11:21:00
279
原创 【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别
大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。众所周知，在CSS中我们通常是使用pxcss中的像素就是设备的物理像素。其实不然，css中的像素只是一个抽象的单位，在不同的设备与环境中，css中的1px所代表的设备物理像素是不同的，以移动端为🌰，在做移动端开发时，就会出现1px的问题，在不同机型的移动设备上，显示的效果却又很大的差异。这就涉及到设备像素、css像素、设备独立像素、dpr、ppi的概念。
2022-11-01 11:20:37
445
原创 【小程序】爆肝 3 天总结的微信小程序优化指南（收藏夹吃灰吧！）
大家好，我是HoMeTown，最近要做一个小程序的项目，项目启动之前，回顾自己之前做过的小程序，感觉做的还是不够好，最近学习了一下小程序优化方案，这块总结一份个人笔记，以便参考，同时分享给大家，共勉。
2022-11-01 11:19:56
1091
原创 前端老司机 70+ 实用工具网站分享（建议收藏！）
大家好，我是HoMeTown，好的工具，可以帮助我们大幅提高编程效率，今天给大家分享一下我平时收集到的一些工具，目录已经分好了。
2022-11-01 11:00:25
474
原创 【CSS】一文搞懂 em、px、rem、vh、vw 的区别！
大家好，我是HoMeTown，今天聊一下CSS中em、px、rem、vh、vw这些单位都有什么区别，什么时候该用什么单位，如何正确使用。px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单。
2022-11-01 10:40:36
690
原创 【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！
很多朋友应该都听过这个名词，搞懂BFC可以让我们理解CSS中一些很诡异的地方，话不多说，直奔主题！BFC是什么？引用MDN块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。大白话讲，我理解BFC其实就是CSS中的块级作用域，包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，也就是但是A。
2022-11-01 10:35:56
161
原创 【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型
大家好，我是HoMeTown，CSS是作为前端必有技术栈之一，但是有很多同学其实对CSS的盒模型都不是很了解，今天想聊一下Css盒子模型。
2022-07-27 19:14:59
359
原创 【Github】手把手教你美化Github主页
theme: github前言最近工作比较忙，Golang暂时没有更新学习，接到朋友的邀请，准备做一个有意思的开源项目，借此契机，整理一下自己的Github主页「默认的实在是太丑了…」创建登录Github账号，然后点击右上角的+创建一个新的，与自己的用户名同名的仓库，具体设置如下图：填写仓库的Description 设置为Public，并添加一个README文件点击Create repository创建！美化创建完仓库之后添加的README文件默认内容为：Hi There接下来点击.
2022-05-29 09:00:00
721
原创 【Vite】Vite设置好了Proxy接口却404...解决方案来了
前言最近在做一个ERP的项目，里面涉及到了很多的计算，尤其特别是有很多关于浮点数的计算，然后就碰到了下面的问题。问题描述 & 解决方案1.使用toFixed or Math.round进行四舍五入&保留两位小数会有5不进1的情况举个🌰，我在开发的过程中遇到了321201.595这个数字…然后我想对他进行四舍五入 & 保留两位小数，一开始不太了解 toFixed有那么多坑，所以直接用的.toFixed(2)，结果如下：const number = 321201.595;c
2022-05-28 15:30:00
2459
1
原创 【JavaScript】关于解决JS 计算精度问题（toFixed, Math.round, 运算表达式）
前言最近在做一个ERP的项目，里面涉及到了很多的计算，尤其特别是有很多关于浮点数的计算，然后就碰到了下面的问题。问题描述 & 解决方案1.使用toFixed or Math.round进行四舍五入&保留两位小数会有5不进1的情况举个🌰，我在开发的过程中遇到了321201.595这个数字…然后我想对他进行四舍五入 & 保留两位小数，一开始不太了解 toFixed有那么多坑，所以直接用的.toFixed(2)，结果如下：const number = 321201.595;c
2022-05-28 09:00:00
522
原创 【npm】package-lock.json冲突及问题排查思路
前言今天合并同事们的代码的时候，其中一个同事的代码合并到我本地的时候出现了package.lock.json冲突的问题，在这记录一下排查问题的过程。问题出现的现象我们一共是四个前端同学开发，我是项目的Owner，合并过来代码之后，发现package.lock.json有冲突，这个冲突确实好久没见了，基本上保持本地依赖同步，一般不会出现这个问题，合并过来之后的改动如下图：没错，多了一个"package"的key，因为我们几个同事的lock都是在dependencies里的。这个同事吧，比较喜欢用w
2022-05-27 17:47:54
1876
原创 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】
前言聊一下自己使用这些技术的一些体会与心得，不做具体的搭建过程了，说一下工程的设计思想与遇到了哪些问题。项目背景最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2 + Js + Webpack + Vuex 上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架，因为我觉得先把自己手头的技术掌握扎实才是重中之重，团队的同学绝大多数是一些基本的开发程序员，初级较多。但是学习还是有必要的，那么学习后就需要一个成熟的项目，体系完整的项目来巩固一下自
2022-05-27 17:46:43
903
原创 一道有趣Js面试题，你有几种办法解决？
引子：今天写了手撕instanceof，以我的风格来说，再写一篇今天已经算是高产了~但是，我真的忍不住想把这个题给大家分享一下，特别有意思，e.g. 说 var 一个 a 等于什么的时候，它即1，又2，还==3 ？正文var a = ?????if( a == 1 && a == 2 && a == 3 ) { console.log('amazing!')}晚点更~欢迎评论区留言...
2020-11-30 15:57:08
145
原创 用最简单的方式手撕Js中的call & bind
前言好久没有更新过博客了，最近项目进度比较紧张，每天都在加班，学习的时间少之又少，目前这家公司的技术栈以尤大大的Vue+饿了吗的elementui为主导，项目中很少会用到 call & bind，昨天复习了一下原型链的知识，感觉比之前的理解又深入了一个层次，两大基类（Function & Object）的概念愈发强烈，今天抛开原型链，来说一说，call & bind。Call首先我们先来了解一下他的使用场景在这里插入代码片...
2020-11-26 12:00:07
189
2
原创 落魄前端，整理给自己的前端知识体系复习大纲（第一篇，上百知识点，2W字+）
声明：文章转载至 前百度高级前端开发的公众号 “老王聊前端”，如有侵权。立即删除。需要的同学可以移步至其公众号阅读，贴出二维码：阅读前言转眼间9月的到来，十分感慨这时光的飞逝。9月对程序员有着十分重要的意义，想在这个优胜劣汰的代码世界活下去，金3银4，金9银10，都属于选择的机会。在这优势略汰且经济回陇的状态下，笔者身处央企都无法安稳，如今也要考虑工作的问题（有广州 内推 ，欢迎联系），我们可以选择的只能是，逐步的打好自己的基础，才能在不安稳的社会形态下，逆行保持自己的安稳。笔者也该复习复习，在此
2020-09-14 10:24:41
445
转载 如何在WP Mail SMTP中设置Gmail Mailer
您想使用Gmail或G Suite帐户解决网站上的投放问题吗？WP Mail SMTP的Google邮件程序选项使用Google的API来对您网站的电子邮件进行安全身份验证，并帮助它们成功发送。在本教程中，我们将向您展示如何使用带有Gmail或G Suite电子邮件地址的Google邮件程序设置WP Mail SMTP。1.安装WP Mail SMTP插件首先，您需要安装并激活WP Mail SMTP插件。从电子邮件和从名称安装并激活插件后，转到 WP Mail SMTP»设置。在“设置”页面的
2020-06-23 11:17:04
2113
原创 微信小程序 Canvas导出图片模糊？（已解决）
首先确定 userInfo 的 avatar 不是 132，原图是 0；其次确定你的 destWidth 和 destHeight 不是 width 和 height; width: 200, height: 200, destWidth: 200 * wx.getSystemInfo().pixelRatio, destHeight: 200 * wx.getSystemInfo().pixelRatio, canvasId: 'shareImg', quality: 1,重点：get
2020-06-17 15:31:32
2366
2
原创 Google Analytics 追踪代码申请
GA？GA的作用就是获取你的应用程序的用户使用量，用户的点击行为，事件，地点等，还可以统计应用崩溃的详情等。申请步骤1.进入谷歌的GA网址 www.google.com/analytics/2. 注册账号3. 按照步骤一步一步来4. 拿到 GA 代码5. 插入代码到项目全局...
2020-05-29 17:58:05
491
原创 WoldPress Goole Analytics追踪和网站预告
Goole Analytics 追踪代码安装：安装插件 Insert Headers and FootersWordPress 网站预告安装插件 Coming Soon Page, Under Construction & Maintenance Mode by SeedProd
2020-05-29 17:27:24
146
原创 【震惊】WordPress的安装原来是这样...（附赠宝塔Linux安装教程）
WordPress 安装WordPress的系统要求数据库 - MySql 5.0Web 服务器 - 此处推荐 LAMP(Linux) + 宝塔操作系统 - 跨平台浏览器支持 - IE, Firefox, Google Chrome, Safari, OperaPHP 兼容性 - PHP 5.2 & amp; plus我先安装了 宝塔Linux控制面板然后往下翻：根据教程傻瓜式安装即可；默认的宝塔端口应该是 :8888，进去之后可以自己改的，账号密码的话你在服务器上安装
2020-05-29 11:06:10
429
原创 你可能没有遵循的Git提交规范
- feat ：新功能- fix ：修复 bug- chore ：对构建或者辅助工具的更改- refactor ：既不是修复 bug 也不是添加新功能的代码更改- style ：不影响代码含义的更改 (例如空格、格式化、少了分号)- docs ： 只是文档的更改- perf ：提高性能的代码更改- revert ：撤回提交- test ：添加或修正测试栗子：git commit-m'feat: add list'...
2020-05-29 10:18:41
164
原创 知识总结，弥补知识遗漏（超长文）（一）
1.原型和原型链：：说到原型和原型链，很多人都是一知半解，今天特地去重温了一下概念，在这做一下总结，以备不时之需；首先说原型，在js中每个函数都有一个prototype属性，这个属性返回的东西就是这个函数的原型，这个原型上面所挂在的方法，属性，他的实例也可以取到，实例是怎么来的呢，通过new 关键字，new 一个函数，用一个变量接收，这就是这个函数的实例对象，然后，这个函数也被称之为构造函数...
2019-11-08 16:55:42
568
1
原创 高效率Js防抖和节流
防抖：函数 fn 在不再触发事件后，过 delay 秒才会执行，在出发期间从来没有执行过let debounce = function( fn,delay) { let timerId; return function (...args) { if (timerId) { clearTimeout(tim...
2019-11-06 20:47:53
164
转载 React路由过度动画
解决React路由过渡效果的问题下载三个包：1.npm install react-animated-router --save2.npm install react-transition-group@2.3.0 --save3.npm install –save-dev prop-types页面引用：import AnimatedRouter from 'react-animated...
2019-10-24 14:29:47
602
原创 nuxt.js打包上线流程
项目完毕后运行 npm run build把 static nuxt.config package.json .nuxt 拷贝到服务器执行npm i执行npm run start后台：(egg)把egg文件夹拖到服务器npm inpm run devpackage.json配置：{ "name": "ksproduct", "version": "1.0.0",...
2019-10-22 14:59:19
3934
原创 nodejs egg-jwt 生成token
//下载 插件npm install egg-jwt --save// {app_root}/config/plugin.js 配置插件exports.jwt = { enable: true, package: "egg-jwt"};// {app_root}/config/config.default.js 设置密钥exports.jwt = { secret: ...
2019-09-24 11:36:22
1253
原创 线性动画背景
cnpm i vue-canvas-nestimport vueCanvasNest from 'vue-canvas-nest'export default { components: { vueCanvasNest }}<vue-canvas-nest></vue-canvas-nest>color: the canvas line color,...
2019-09-23 15:05:04
249
原创 node.js 爬虫
'use strict';const Controller = require('egg').Controller;const superagent = require('superagent')const cheerio = require('cheerio')function format3Mooc(html) { let $ = cheerio.load(html);...
2019-09-18 23:48:47
207
原创 Socket.io +react + egg聊天室
技术栈：前端：react后端：egg通信手段：socket.io官方API: https://socket.io/get-started/chat/socket.io的工作流程：客户端 =》服务端 =》客户端socket.io: 通俗易懂的来讲，比如说你喜欢隔壁班的李小花，你想一下让全学校的人都知道，怎么办？当让是去广播站，然后让他帮你广播一下，然后全学校的人收到消息，哦，张全蛋喜...
2019-09-18 23:41:07
1030
2
原创 node.js 加密 (crypto)
官方介绍：crypto模块提供了加密功能，包含对 OpenSSL 的哈希、HMAC、加密、解密、签名、以及验证功能的一整套封装。 https://www.nodeapp.cn/crypto.html所以为什么加密？加密是什么？怎么才能进行加密？(3W原则)Why?一句话--为了安全。。。What?加密就是对数据的操作，通过加密算法，将数据进行...
2019-09-07 00:06:28
1656
原创 react-create-app中设置proxy 代理
我遇到的问题："proxy" in package.json must be a string. //提示仅支持string 类型，不支持object类型在reate-react-app v2升级版(webpack4.0)中，如果proxy不是字符串，直接报错解决方案：安装http-proxy-middleware管理包，cnpm http-proxy-middleware --sav...
2019-09-05 15:54:47
2301
1
原创 nodejs 解决3000端口被占用问题，只需要两步
npm 安装 killport2npm install killport2 -gkillport 3000搞定！
2019-09-03 19:11:03
3579
转载 js 输出计算机cpu信息
const os = require('os'); var dealTime = (seconds)=>{ var seconds = seconds|0; var day = (seconds/(3600*24))|0; var hours = ((seconds-day*3600)/3600)|0; var minutes = ((seconds-da...
2019-09-02 19:33:24
950
原创 vue 自己封装插件上传npm (npm发包) 流程
Vue 封装一个组件上传npm 流程：一、把需要上传的组件放到一个lib文件夹里：二、paganation.vue<template> <div> 这是我的组件 </div></template><script> export default { name:"pagati...
2019-09-02 14:29:45
1726
原创 node+express 后台连接MySQL
server/db/index.jsvar mysql = require('mysql');var conn = mysql.createConnection({ host : 'localhost', user : 'root', password : 'rootroot', database : 'test'});conn.connect(...
2019-08-09 16:09:17
278
你不知道的GIT命令这里都有！
2020-11-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人