木子聊前端
码龄9年
关注
提问 私信
  • 博客:91,738
    社区:8
    问答:147
    91,893
    总访问量
  • 57
    原创
  • 332,268
    排名
  • 16
    粉丝
  • 0
    铁粉

个人简介:一起探究前端的那些坑坑,用故事讲写代码

IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:广东省
  • 加入CSDN时间: 2016-07-15
博客简介:

木子聊前端

博客描述:
提供匠心精神一起学习
查看详细资料
个人成就
  • 获得57次点赞
  • 内容获得30次评论
  • 获得83次收藏
  • 代码片获得507次分享
创作历程
  • 3篇
    2023年
  • 11篇
    2021年
  • 44篇
    2020年
成就勋章
TA的专栏
  • typescript
    付费
    4篇
  • 前端工程化
    付费
    1篇
  • GIT系列
    1篇
  • HTML5实用
    2篇
  • css3 常用操作
    4篇
  • webpack实操
    8篇
  • javascript
    17篇
  • 前端错误信息
    5篇
  • 效果应用
  • vue
    7篇
  • mysql
    2篇
  • python-Django
    7篇
兴趣领域 设置
  • 前端
    javascriptcssvue.jsreact.jses6webpackxhtml前端框架
  • 后端
    node.js
  • 移动开发
    flutter
  • 网络与通信
    https
  • 微软技术
    typescript
  • 学习和成长
    面试
创作活动更多

超级创作者激励计划

万元现金补贴,高额收益分成,专属VIP内容创作者流量扶持,等你加入!

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

fdsafdsaf

gfdsgdfsg
原创
发布博客 2023.02.09 ·
393 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vite.config.ts 基本通用配置

vite配置 基本满足日常大型开发,vite本身也默认支持很多。
原创
发布博客 2023.02.03 ·
2717 阅读 ·
1 点赞 ·
0 评论 ·
3 收藏

ESLint 的一些理解

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
原创
发布博客 2023.02.02 ·
584 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

ts 移动端h5 拍照预览

通过typescript实现一个简单版本 移动端 拍照 和预览功能1. 需求列表点击拍照唤起手机后置摄像头拍照完成在页面预览照片2. 技术实现2.1 布局和唤起后置摄像头唤起摄像头采用 input 里面 type=‘file’ 类型,为了调用后置摄像头,需要一些组合属性:这段是整个拍照端核心<input type="file" class="take-picture" id="take-event" accept="image/*,camera" capture="camera"
原创
发布博客 2021.04.21 ·
536 阅读 ·
0 点赞 ·
2 评论 ·
0 收藏

JavaScript 之this的使用场景和理解

JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在 运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。而在 es6 中 箭头函数 中得到来改善,在定义的时候确定,多数情况是一个比较灵活,还是需要依据执行的环境推理判断从四个大的方向去推理this指向的具体对象作为对象的方法调用作为普通函数调用作为构造函数调用函数的 call 或 apply 方法调用1. 作为对象的方法调用当函数作为对象的方法被调用时,this 指向该对象let obj={ a:
原创
发布博客 2021.04.15 ·
141 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

有趣的setTimeout--节流和防抖的实现

1. setTimeoutsetTimeout() 是一个默认是全局方法,用来设置一个定时器,该方法在定时器到期后执行一个函数或指定的一段代码语法:let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)参数说明:func|code想要执行的函数或代码字符串。 一般传入的都是函数。由于某些历史原因,支持传入代码字符串,但是不建议这样做。delay执行前的延时,以毫秒为单位(1000 毫秒 = 1 秒),默认值是 0;
原创
发布博客 2021.04.13 ·
1178 阅读 ·
0 点赞 ·
1 评论 ·
5 收藏

proxy 基础-实现响应性和双向数据绑定

proxy 基础用法Proxy 是一个包含另一个对象或函数并允许你对其进行拦截的对象。可以理解为‘代理’;使用proxy,就可以不再操作源数据而实现效果;语法:new Proxy(target,handle)target:监听的目标对象或者方法handle: 参数也是一个对象,用来定制拦截行为,即需要对源对象操作对操作一个完整基础写法:const target={name:'王麻子'}; const handle={ get:function(target,key,receiver){
原创
发布博客 2021.03.30 ·
185 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

那位前辈告知下怎么能让vscode支持es6的扩展运算符

答:

https://blog.csdn.net/qq_35617751/article/details/115163164?spm=1001.2014.3001.5501

回答问题 2021.03.25

webpack5.0使用HtmlWebpackPlugin在配置template时会报错

答:

HtmlWebpackPlugin 的基础使用
 

var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    ... 省略
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
        })
    ]
}

其中filename 默认是index.html,可以自定义名字

template 默认支持类型可以是html、jade、ejs等,如果是自定义模版需要安装对应的loader,然后配置。

template 配置如果是支持默认的,就是模版找不到,如果是自定义的,就需要查看loader配置和模版路径

 

回答问题 2021.03.25

ES6 扩展运算符 三点 ... rest 知识点记录和运用

1. 扩展运算符含义:(狭义)将一个数组转化为用逗号隔开的参数序列,用三个点(...)表示翻译成代码:// 直接输出数组console.log([1,2]); // [1,2]// 输出参数序列console.log(...[1,2]); // 1,2再看来一个例子 … 后面用字符串和对象看看效果// 字符串console.log(...'sfsaf'); // s f s a f// 对象console.log(...{a:'s'}); // Uncaught TypeE
原创
发布博客 2021.03.24 ·
486 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ 升级 webpack 5.0 以后遇到

错误场景升级 webpack 以后 运行 npm run devError: Cannot find module 'webpack-cli/bin/config-yargs'查看 安装包版本"devDependencies": { "webpack": "^5.2.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0"}如果是这样的版本,那么问题是这样 的If you upgrade webpack
原创
发布博客 2021.03.08 ·
169 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

npm 一些常用操作记录

初始化npm init可以自动生成package.json 文件如果存在 package.json 文件 则可以自动安装相关的包npm i -D下载安装到开发环境使用,会自动分配到package.json 的 devDependencies 字段里面如npm i -D webpack安装成功之后,package.json 的 devDependencies 字段自动记录"devDependencies": { "webpack": "^5.24.3" }npm i
原创
发布博客 2021.03.04 ·
154 阅读 ·
0 点赞 ·
2 评论 ·
0 收藏

Syntax Error: TypeError: this.getOptions is not a function

场景重现通过vue-cli搭建一个vue3.0项目,在使用less 的时候报错,依据官方的安装:npm install -D less-loader less安装的都是最新的 其中less-loader 是今天最新的 8.0.0 版本。这时候运行npm run serve提下如下错误通常提示Syntax Error: TypeError: this.getOptions is not a function提示语法错误都是 版本问题解决1,通过降级版本号是最快捷的方法卸载 les
原创
发布博客 2021.02.25 ·
8715 阅读 ·
4 点赞 ·
5 评论 ·
9 收藏

npm 包发布与升级--拥有自己的npm包

npm 对于大多数前端开发来说早已经不在陌生,是否也想过拥有一个自己的npm 包,提供给自己或者别人使用;npm 本质和理解NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准npm 包的发布和管理,可以简单理解为上传代码和下载并使用它们。这样可以快速的发布代码哈哈前期准备1、需要有一个账户,毕竟是要传到别人的服务器上,注册地址:https://www.npmjs.com/记住注册账户的名字和密码,npm
原创
发布博客 2021.02.10 ·
660 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

写了多年的javascript在看 变量类型和类型检查突然明白了什么?

一个变量引发的提交数据bugA同学定义了一个提交对象 submitData ={name:‘xx’,sex:‘x’}, 同时这个对象要展示一个页面 给用户确认姓名:xx ,性别:x ,然后用户点击确认就提交服务端,同时限制了只能是两个属性,一切很美好,测试通过,这天A同学有事休息了。工作交接给B同学,恰好来了一个需求,需要在确认页面,添加一个展示字段,年龄,但是这个年龄不用提交,B同学一想,好简单,按照惯例,增加代码尽量不修改原来的逻辑,这个时候B同学定义了一个变量 showData = submi
原创
发布博客 2021.02.05 ·
162 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue3.0+cli 4 .0^ 单页面配置系列(三)-- 路由 vue-router4 基础使用

前言vue 升级到3.0以后,vue-router 也发布了配套到升级 4.0+,使用路由的逻辑还是一样的只是一些方法改变了而已;在vue开发单页面中,就算没有路由也一样可以正常使用组件完成工作,但是通常还是加入路由进行管理;路由执行:组件(映射到)== > 路由配置 == > 渲染页面项目目录分配一般在使用路由的时会按照,路由执行功能,建立不同文件夹方便管理,在src目录下面;...省略+stc +routes index.js // 存放路由配置 +vi
原创
发布博客 2020.12.31 ·
1166 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

vue3.0+cli 4 .0^ 单页面配置系列(二)--vue.config.js 基础配置

vue.config.js 是一个可选的配置文件,在安装cli的时候并不会自动生产,需要使用的时候自己手动编写,名字不能错,放在更目录下面,它会被 @vue/cli-service 自动加载,执行;详细的介绍见官网,初略使用看下面由于使用的官网cli很多都帮我们处理好了。以后在写自定义脚手架打包自动加入公用样式css在环境变量一节介绍分离不同的配置文件,自动加入公用样式比如定义变量和公用样式放到一个less文件comm.less, 这个文件生产和开发环境都需要,就配置在base.config.js
原创
发布博客 2020.12.30 ·
406 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue3.0+cli 4 .0^ 单页面配置系列(一)--环境变量

依据vue-cli 搭建一个 vue3.0 的项目通过这个命令// vue create 项目名称 vue create muzi然后通过 npm 命令,把项目启动npm run serve 查看项目启动成功,不成功找找原因。npm run serve 是如何启动要完全解释这个问题,需要另外一片文章,这里主要围绕vue3.0环境变量。那么在vue这个项目中,发生了什么事情?打开 项目的 package.json:找到如下代码"scripts": { "serve": "vue
原创
发布博客 2020.12.18 ·
283 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

vue 过滤器实现和使用场景举例

在生活中把一些含有我们需要的东西但是比较粗旷通过一定的装置过滤出更接近需要的产品,这个装置大概就是过滤器。比如:过滤沙子的纱网,经过纱网过滤可以得出精细的沙子;程序编写通常也会有很多类似的骚操作,在vue中提供自定义过滤器,得到更需要的精准数据,来了解一下需求:展示一个产品的价格price。解析需求:产品的价格可能包含小数点,可能该产品还未定义用‘–’来表示开发需求前端从后端获取一个价格数据字段price,这个字段可能包含的结果是null,‘ ’,或者是undefined ,这个时
转载
发布博客 2020.11.09 ·
1217 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

Mac系统下初始化MySQL密码--自用

第一步:关闭mysqlsudo /usr/local/mysql/support-files/mysql.server stop第二步:进入终端设置cd /usr/local/mysql/bin/输入(sudo su)回车以获取管理员权限sudo su输入(./mysqld_safe --skip-grant-tables &)回车以禁止mysql验证功能,mysql会自动重启./mysqld_safe --skip-grant-tables &输入命令(./mysq
原创
发布博客 2020.08.11 ·
170 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏
加载更多