会员
周边
捐助
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
自强不息 厚德载物
博客园
首页
新随笔
新文章
联系
订阅
管理
[置顶]
eslint+prettier+husky+lint-staged 统一前端代码规范
摘要: eslint+prettier+husky+lint-staged 统一前端代码规范 遵循编码规范和使用语法检测,可以很好的提高代码的可读性,可维护性,并有效的减少一些编码错误。 1、终极目标 团队中的所有开发人员用一套代码规范规则,并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具,帮
阅读全文
posted @ 2021-08-14 22:32 Lisong
阅读(1369)
评论(0)
推荐(1)
编辑
2022年8月11日
基于vue2.0原理-自己实现MVVM框架之computed计算属性
摘要: 基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性。 一、先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body> <div id="app"> <input type="text" v-model="name"><b
阅读全文
posted @ 2022-08-11 10:42 Lisong
阅读(666)
评论(3)
推荐(3)
编辑
2022年7月4日
vue2.0 双向绑定原理分析及简单实现
摘要: Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈😄。 一、首先介绍Object.defineProperty()方法 //直接在一个对象上定义一个新属性,或者修改一个已经
阅读全文
posted @ 2022-07-04 10:55 Lisong
阅读(1692)
评论(0)
推荐(3)
编辑
2021年8月13日
React Class组件生命周期
摘要: 一、react组件的两种定义方式 1、函数组件,简单的函数组件像下面这样,接收Props,渲染DOM,而不关注其他逻辑 function Welcome(props) { return <h1>Hello, {props.name}</h1>;} 函数组件无法使用State,也无法使用组件的生命周期
阅读全文
posted @ 2021-08-13 22:34 Lisong
阅读(780)
评论(0)
推荐(1)
编辑
2019年12月13日
基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用
摘要: 一、解决什么问题 1、html中img引入的图片地址没有被替换,找不到图片 2、html公共部分复用问题,如头部、底部、浮动层等 二、html中img引入图片问题解决 1、在index.html插入img,引用图片<img src="../../assets/img/test.jpeg"> 2、np
阅读全文
posted @ 2019-12-13 14:24 Lisong
阅读(1413)
评论(2)
推荐(1)
编辑
2019年12月11日
基于webpack实现多html页面开发框架七 引入第三方库如jquery
摘要: 一、解决什么问题 1、如何引入第三方库,如jquery等 二、引入jquery方法 1、下载jquery.min.js放到assets/lib下面 2、安装copy-webpack-plugin,将已经存在的单个文件或整个目录复制到构建目录。命令:npm install copy-webpack-p
阅读全文
posted @ 2019-12-11 09:39 Lisong
阅读(772)
评论(0)
推荐(1)
编辑
2019年12月10日
基于webpack实现多html页面开发框架六 提取公共代码
摘要: 一、解决什么问题 1、如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2、单独打包common.js对性能有帮助,浏览器下载一次后会缓存下来,不会重复下载 二、未抽取公共代码的状况 基于之前代码,测试如下: 1、在as
阅读全文
posted @ 2019-12-10 14:24 Lisong
阅读(661)
评论(0)
推荐(0)
编辑
2019年12月4日
基于webpack实现多html页面开发框架五 开发环境配置 babel配置
摘要: 一、解决什么问题 1、开发环境js、css不压缩,可在浏览器选中代码调试 2、开发环境运行http服务指向打包后的文件夹 3、babel输出浏览器兼容的js代码 二、需要安装的包 babel-loader:输出浏览器兼容的js代码;命令:<!--?xml version="1.0" encoding
阅读全文
posted @ 2019-12-04 16:43 Lisong
阅读(545)
评论(0)
推荐(0)
编辑
2019年12月3日
基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件
摘要: 一、解决什么问题 1、手写页面多入口,一个一个输入太麻烦,通过代码实现 2、手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二、多入口代码实现 修改module.exports的入口entry,注释掉原来手写的代码,改成上面的方法如下: 三、多htmlWebpackPlugin插
阅读全文
posted @ 2019-12-03 20:17 Lisong
阅读(676)
评论(1)
推荐(1)
编辑
2019年11月22日
基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录
摘要: 一、解决什么问题 1、图片路径替换、并输出到打包目录 2、输出目录清理 二、需要安装的包 file-loader:html、css中图片路径替换,图片输出到打包目录;命令:npm install --save-dev file-loader url-loader:<!--?xml version="
阅读全文
posted @ 2019-11-22 16:52 Lisong
阅读(710)
评论(0)
推荐(0)
编辑
下一页