- 博客(23)
- 收藏
- 关注
RSS订阅原创 与es6的不期而遇 - 解构赋值
es6 是 javascript 的下一代标准，相较于上一代的 es5，es6 提出了很多新的特性，能够帮助我们更优雅的编写代码
2022-07-13 14:09:08
173
原创 webpack踩坑五：js处理
一：js代码检查使用eslint来检查js代码，需要安装eslint和eslint-loader,eslint的规则配置使用airbnb规则，而使用它需要安装eslint-config-airbnb-base、eslint-plugin-import然后在package.json中配置eslintConfig选项最后在webpack.config.js中配置eslint检查首先要排除掉node_modules文件夹下的所有文件，防止eslint检查，在选项里面配置fix:true，表示检查到的
2021-05-08 12:44:15
299
2
原创 webpack踩坑四：css处理
一：提取css成单独文件使用插件mini-css-extract-plugin，安装插件，在webpack plugins配置中使用，这里的filename配置项就是输出的css的名称并且在使用css-loader之后，使用MiniCssExtractPlugin.loader,而不是使用style-loader。（loader解析都是自下而上，从左往右）简单介绍下几个loader的意思：css-loader: 将css放到js中；style-loader: 创建style标签，将css
2021-05-08 10:16:38
1231
原创 webpack踩坑三：打包其他资源
错误经历：打包其他资源的时候，漏掉了一些其他的文件，导致打包失败还有其他的图片资源，在exclude中没有排除掉，导致图片不能正常加载解决方案：exclude中排除掉所有需要参与打包的文件类型**ps:切记排除掉所有的参与打包的文件类型！**...
2021-05-07 11:28:06
152
原创 webpack踩坑二：解析html中的图片
错误经历：安装了html-loader,html-webpack-plugin，使用了html模板，导致html图片不能解析这里的img不能在页面中正确的解析出现解决方案：1.去掉配置中的html-loader2.html模板中图片路径采用ejs引入页面成功显示图片...
2021-05-07 10:43:35
389
原创 webpack踩坑一：webpack-dev-server启动报错
问题：启动webpack-dev-server的时候报错此前已经全局安装过了，继续安装，再启动webpack-dev-server报错解决方法：webpack和webpack-cli 版本不一致，降低webpack-cli版本，重新指定版本安装webpack-cli启动webpack-dev-serve，成功打开。附上我的包版本...
2021-05-07 10:01:13
1384
原创 和cool一起学前端----第十一天
弹性布局-flex(part2)上节咱们说到了弹性布局父容器的一些属性，今天和大家分享一下子元素的一些属性orderflex-growflex-shrinkflex-basisalign-selforder表示子元素的排列顺序，默认值为0，越小越靠前，看代码效果一眼就能明了，第二个属性flex-grow,如果父容器空间足够的话，该子元素会不会放大，如果是1的话就表示不会放大，...
2019-11-21 17:25:14
143
原创 和cool一起学前端----第十天
弹性布局-flexflex布局，因为是css3提出的，在移动端表现比较好，因为移动设备更新太快了，所以对css3支持比较友好，所以在移动端布局的时候，建议大家用这种布局方式，会少写很多代码的，接下来和...
2019-11-20 22:42:24
123
原创 和cool一起学前端----第九天
移动端开发我们开始第一个html的时候，不知道大家还记不记得,head标签里有一行这个代码，<meta name="viewport" content="width=device-width, initial-scale=1.0">解释下，这个就是设置页面的宽度=设备的默认宽度，同时设置页面比例为1，也就是不缩放，当然了，这就是所谓的响应式开发，多数都是针对移动端的，不然的，反...
2019-11-19 09:33:35
129
原创 和cool一起学前端----第八天
div+css 布局–清除浮动今天和大家分享下，页面的布局，首先我们来分析以下网页的基本机构，我们来分析下李宁官网，企业官网，结构都很相似。看第一部分导航，分为俩个部分，第1部分和第2部分，面对这样的结构，我们通常会用到float,俩个div,一个向左浮动，一个向右浮动通常我们都会先会把页面结构写出来，然后再写对应的样式，要重点提一下，子元素使用float的时候，父元素要加上clear...
2019-11-18 11:48:59
181
原创 和cool一起学前端----第七天
css3详解之animation动画和过渡表现出来的状态基本差不多，但是过渡需要事件触发，上一节我们通过伪类hover触发的过渡效果，而动画就不需要事件触发，自己就动起来了，当然我们还是根据需求来制作我们需要的，那接下来就来讲讲动画。animation:name 3s ease 1s infiniteanimation第一个属性值name是动画的名称animation第二个属性值3s是动画...
2019-11-18 08:49:48
120
原创 和cool一起学前端----第六天
css3详解之transition这个厉害了，有一种动画的效果，指的是当元素css改变的时候，用一定的时间完成从一个css样式到另一个css样式的变化。transition:transform 2s ease 1s第一个属性值是你的css样式名称，给这个样式变化加上过渡效果，比如是width,当元素width变化的时候就会有过渡效果。第二个属性值2s代表过渡时间第三个属性值是过渡变化的曲...
2019-11-15 16:01:35
235
原创 和cool一起学前端----第五天
css3详解之transform上一节就简单介绍了下2d转化的基本变化，平移，旋转，缩放，今天就给大家详细介绍下，css3的知识，每个点都作为一篇文章，着重介绍，也是给自己复习了。对于2d转化，有一个样式叫做transform-origin,这个就是设置中心点的位置的，默认的就是元素的中间的位置，默认值也就是50% 50%；比如说旋转变化，我们旋转的时候是按照我们设置的这个点将元素进行旋转相应...
2019-11-15 14:36:00
145
原创 和cool一起学前端----第四天
继续奋战css伪类:hover 鼠标悬停时候:visited 鼠标点击之后:first-child 父元素的第一个子元素:last-child 父元素的最后一个子元素列表样式&&初始化样式ul,ol会有默认的一些样式，包括一些其他的标签，都可能有一些自带的样式，例如a标签默认会有一个下划线，还有p标签默认会有边距，这些都不利于我们页面的布局，所以我们需要初始化一下...
2019-11-15 11:14:02
155
原创 和cool一起学前端----第一天
前端开发第一天—敲黑板，划重点啦前提概要毕业快四年了，日月如梭，码代码的日子简直有一种山中方一日，世上已千年的感觉，所以，作为程序员，需要有足够的耐心与毅力，有对新技术的执着与追求（没办法，必须得与时俱进，不然就淘汰了）。好，鸡汤已灌输，接下来就和cool一起，历经从前端小白到前端菜鸟的蜕变吧（本人也还是一枚菜鸟，博客仅供大家一起交流学习，有写的不对的地方，欢迎大家指正，保证每天一更，双休除外...
2019-11-13 11:06:41
370
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人