点击阅读全文
my heart will go on
没有足够的数据
(゚∀゚ )
暂时没有任何数据
八月末 收藏了文章 · 2018-11-20
大家平时应该经常见到这种特效,很炫酷不是吗
这是谷歌Material Design
中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效。但是往往要引入一大堆js
和css
,其实在已有的项目中,可能只是想加一个这样的按钮,来增强用户体验,这些js
库就显得有些过于庞大了,同时由于是js
实现,很多时候还要注意加载问题。
那么,有没有办法用css
来实现这一特效呢?
其实就是一个动画,一个正圆从小变大,用css3
中的动画很容易实现
示例代码
@keyframes ripple{
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(1);
opacity: 0;
}
}
通常用js
来实现的方式很简单,就是给点击元素添加一个class
,然后再动画结束后移除该class
示例代码
var btn = document.getElementById('btn');
btn.addeventlistener('click',function(){
addClass(btn,'animate')
},false)
btn.addeventlistener('transitionend',function(){//监听css3动画结束
removeClass(btn,'animate')
},false)
那么如何通过css来实现动画的触发呢?
css
中与鼠标交互的伪类主要有
hover
鼠标经过:active
鼠标按下:focus
鼠标聚焦:checked
鼠标选中很多情况下,我们页面中的效果都是通过hover
来实现的,鼠标放上去触发一个效果,离开还原,但是如果放上去马上离开,那么动画也会马上结束。
我们先试一下。
这是我们写好的页面结构和样式
<style>
.btn{
display: block;
width: 300px;
outline: 0;
overflow: hidden;
position: relative;
transition: .3s;
cursor: pointer;
user-select: none;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 50px;
background: tomato;
color: #fff;
border-radius: 10px;
}
</style>
<a class="btn">button</a>
很简单,就是一个普通的按钮样式
下面我们在按钮中添加我们需要的正圆。
我们用伪元素来实现
.btn:after{
content: '';
position: absolute;
width: 100%;
padding-top: 100%;
background: transparent;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
我们把上面的overflow: hidden
去掉,把这个圆缩小一点看看效果
然后,我们写个缩放的动画
@keyframes ripple{
from {
transform:translate(-50%,-50%) scale(0);
/**由于我们默认写了变换属性,所以这里要补上translate(-50%,-50%),不然就会被替换了**/
background: rgba(0,0,0,.25);
}
to {
transform:translate(-50%,-50%) scale(1);
background: transparent;
}
}
鼠标经过试试?
.btn:hover:after{
animation: ripple 1s;
}
效果还是不错的,就是如果鼠标离开的太快,那么刚刚扩大的圆马上就缩回去了,有点违和
但是这不是我们想要的效果呀。我们希望的是点击一次触发一次,而不是这样放上去就完了,再也不会触发了。
平时工作中,active
用到的也比较多,通常是用在点击的效果上,那么拿来试试?
.btn:active:after{
animation: ripple 1s;
}
效果也是差强人意,有点类似鼠标按住的意思,你必须一直按住鼠标,才能完整的触发,比如说上面的例子,动画的运行实现是1s
,那么你必须点在那个按钮上持续1s
才能看到完整的动画效果,否则,就像上面鼠标离开一样,动画马上就缩回去了
如果需要让任意一个元素获焦,你可以给太指定一个tabindex
属性
<a class="btn" tabindex="1">button</a>
.btn:focus:after{
animation: ripple 1s;
}
foucs
也可以触发,只是触发以后只有等失去焦点之后才能再次触发,实际的操作表现就是,点过一次以后,再点一下外面的空白
难道就没有办法了吗?
当然还是有的,放在最后的肯定就是解决方式,haha
checked
并不能直接触发,这是表单元素选中后触发的,为此,我们需要改造一下页面结构
<label class="btn">
<input type="checkbox"><span>button</span>
</label>
我们这里换成了lable
并计入了input[type=checkbox]
标签,主要是为了在点击按钮的时候触发input
选中。
加一点样式
.btn>span:after{
/**换一下选择器**/
}
.btn>input[type=checkbox]{
display: none
}
.btn>input[type=checkbox]:checked+span:after{
animation: ripple 1s;
}
这样也能触发动画,但问题是,当再次点击的时候就成了非选中状态了,怎么触发动画呢?
其实可以用:not
来实现
.btn>input[type=checkbox]:not(:checked)+span:after{
animation: ripple 1s;
}
乍一看好像挺聪明的,仔细一想,正反两个都写了动画,不就跟:checked
没关系了?还不如直接
.btn>input[type=checkbox]+span:after{
animation: ripple 1s;
}
无限轮回中...
这个问题困扰了我好久,不过皇天不负有心人,后来试着在两种状态下触发不同的动画是可以分别触发的,如下
.btn>input[type=checkbox]:checked+span:after{
animation: ripple1 1s;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
animation: ripple2 1s;
}
这个应该很好理解吧。
那么,重点来了,现在把动画ripple1
和ripple2
里面的动画过程都改成一样,也是可以分别触发的,也就是说,只要动画名称不一样,css都会当成不同的动画来处理
这样就简单了,我们只需要默认一个状态,选中一个状态,然后分别触发名称不同的动画就行了~
.btn>input[type=checkbox]+span:after{
animation: ripple-in 1s;
}
.btn>input[type=checkbox]:checked+span:after{
animation: ripple-out 1s;
}
@keyframes ripple-in{
from {
transform:translate(-50%,-50%) scale(0);
background: rgba(0,0,0,.25);
}
to {
transform:translate(-50%,-50%) scale(1);
background: transparent;
}
}
@keyframes ripple-out{/*仅仅名称不同*/
from {
transform:translate(-50%,-50%) scale(0);
background: rgba(0,0,0,.25);
}
to {
transform:translate(-50%,-50%) scale(1);
background: transparent;
}
}
效果就如文章一开始所示,完美
完整demo如下
https://codepen.io/xboxyan/pe...
由于上述动画样式在默认情况下就会被触发,所以页面加载进来就会看到按钮上的水滴动画运动一次,不过也不是特别明显,还可以接受。
其次,实际效果肯定是希望鼠标点击哪里,就以该点为中心扩散,我们css肯定是做不到这点的,只能从中心扩散,这也只能妥协了。这里提供一个思路,可以使用css
的变量,每次点击的时候吧相应的值存在style
里面,这样css
中也能用上。
希望能用css
今后挖掘出更多有趣的效果^ ^
喜欢的可以关注我的博客 https://blog.codelabo.cn查看原文
这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效。但是往往要引入一大堆js和css,其实在已有的项目中,可能只是想加一个这样的按钮,来增强用户体验,这些js库就显得有些过于庞大了,同时由于是js实现,很多时候还要注意加载...
八月末 评论了文章 · 2018-11-17
mpvue-vant
记录了我们团队开发中在mpvue
中使用Vant Weapp
组件库所踩下的坑,在这里分享给大家,让mpvue
开发者可以使用vant
组件库进行开发,避免踩不必要的坑。
此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue
中使用
目前vant已经支持了npm
的方式,但是由于node_modules
目录下的代码是不会被编进dist
目录下的,所以暂时只能用git
方式使用。
将dist
目录下的所有文件复制到你项目的/static/vant/
目录下。
git clone https://github.com/youzan/vant-weapp.git
// 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git
在需要引入的页面目录下的main.json
文件中
{
"usingComponents": {
"van-button": "/static/vant/button/index",
}
}
<van-button>测试</van-button>
具体组件 api 文档参考Vant Weapp
mpvue 和原生小程序的方式有所不同。可以参考mpvue文档
原生小程序使用方式为
value="{{value}}"
mpvue 使用方式
v-bind:value="value"
//或者
:value="value"
原生小程序使用方式
bind:click="onClick"
mpvue 使用方式
@click="onClick"
vant
中像notify
这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json
中引入;另一个是方法的引入,需要在vue
文件中import
引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。
import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录
值得注意的是,mpvue
中获取event
值与原生小程序有所不同。举例:
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
}
mpvue 里面无法使用@click-icon
这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。
可以改成驼峰式的监听名。
eg: 我在field
组件中就遇到这个问题,我的做法是:
// static/vant/field/index.js
this.$emit('click-icon');
// 修改为:
this.$emit('clickIcon');
一般的报错报错都可以通过一下流程处理。
ES6转ES5
功能。npm run dev
或删掉dist
目录重新npm run dev
若以上流程都走完了,还是无法解决报错,可以通过提交issues
的方式,我来帮你解决。
VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined
解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5
目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp。
这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。
比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。
使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/
目录下的文件。因为这里是经过编译后的。
如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!
基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue
中使用云开发的注意事项,mpvue-cloud
收录各种猫叫声,帮助与猫咪交流,分享一些养猫的小知识等。
这是我近期使用Taro
开发框架开发的一款小程序,主要功能是提供可靠的书架管理
功能,只需要扫一扫书籍背后的条形码即可添加书籍入库,你可以方便的在线上管理你的书架,查看书籍的基本信息,亦可以添加书评。
该项目获得了微信小程序 U 计划的资助。目前项目正在开发中,欢迎大家体验反馈。
mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。
八月末 评论了文章 · 2018-11-16
mpvue-vant
记录了我们团队开发中在mpvue
中使用Vant Weapp
组件库所踩下的坑,在这里分享给大家,让mpvue
开发者可以使用vant
组件库进行开发,避免踩不必要的坑。
此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue
中使用
目前vant已经支持了npm
的方式,但是由于node_modules
目录下的代码是不会被编进dist
目录下的,所以暂时只能用git
方式使用。
将dist
目录下的所有文件复制到你项目的/static/vant/
目录下。
git clone https://github.com/youzan/vant-weapp.git
// 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git
在需要引入的页面目录下的main.json
文件中
{
"usingComponents": {
"van-button": "/static/vant/button/index",
}
}
<van-button>测试</van-button>
具体组件 api 文档参考Vant Weapp
mpvue 和原生小程序的方式有所不同。可以参考mpvue文档
原生小程序使用方式为
value="{{value}}"
mpvue 使用方式
v-bind:value="value"
//或者
:value="value"
原生小程序使用方式
bind:click="onClick"
mpvue 使用方式
@click="onClick"
vant
中像notify
这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json
中引入;另一个是方法的引入,需要在vue
文件中import
引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。
import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录
值得注意的是,mpvue
中获取event
值与原生小程序有所不同。举例:
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
}
mpvue 里面无法使用@click-icon
这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。
可以改成驼峰式的监听名。
eg: 我在field
组件中就遇到这个问题,我的做法是:
// static/vant/field/index.js
this.$emit('click-icon');
// 修改为:
this.$emit('clickIcon');
一般的报错报错都可以通过一下流程处理。
ES6转ES5
功能。npm run dev
或删掉dist
目录重新npm run dev
若以上流程都走完了,还是无法解决报错,可以通过提交issues
的方式,我来帮你解决。
VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined
解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5
目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp。
这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。
比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。
使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/
目录下的文件。因为这里是经过编译后的。
如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!
基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue
中使用云开发的注意事项,mpvue-cloud
收录各种猫叫声,帮助与猫咪交流,分享一些养猫的小知识等。
这是我近期使用Taro
开发框架开发的一款小程序,主要功能是提供可靠的书架管理
功能,只需要扫一扫书籍背后的条形码即可添加书籍入库,你可以方便的在线上管理你的书架,查看书籍的基本信息,亦可以添加书评。
该项目获得了微信小程序 U 计划的资助。目前项目正在开发中,欢迎大家体验反馈。
mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。
八月末 评论了文章 · 2018-11-16
mpvue-vant
记录了我们团队开发中在mpvue
中使用Vant Weapp
组件库所踩下的坑,在这里分享给大家,让mpvue
开发者可以使用vant
组件库进行开发,避免踩不必要的坑。
此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue
中使用
目前vant已经支持了npm
的方式,但是由于node_modules
目录下的代码是不会被编进dist
目录下的,所以暂时只能用git
方式使用。
将dist
目录下的所有文件复制到你项目的/static/vant/
目录下。
git clone https://github.com/youzan/vant-weapp.git
// 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git
在需要引入的页面目录下的main.json
文件中
{
"usingComponents": {
"van-button": "/static/vant/button/index",
}
}
<van-button>测试</van-button>
具体组件 api 文档参考Vant Weapp
mpvue 和原生小程序的方式有所不同。可以参考mpvue文档
原生小程序使用方式为
value="{{value}}"
mpvue 使用方式
v-bind:value="value"
//或者
:value="value"
原生小程序使用方式
bind:click="onClick"
mpvue 使用方式
@click="onClick"
vant
中像notify
这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json
中引入;另一个是方法的引入,需要在vue
文件中import
引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。
import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录
值得注意的是,mpvue
中获取event
值与原生小程序有所不同。举例:
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
}
mpvue 里面无法使用@click-icon
这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。
可以改成驼峰式的监听名。
eg: 我在field
组件中就遇到这个问题,我的做法是:
// static/vant/field/index.js
this.$emit('click-icon');
// 修改为:
this.$emit('clickIcon');
一般的报错报错都可以通过一下流程处理。
ES6转ES5
功能。npm run dev
或删掉dist
目录重新npm run dev
若以上流程都走完了,还是无法解决报错,可以通过提交issues
的方式,我来帮你解决。
VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined
解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5
目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp。
这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。
比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。
使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/
目录下的文件。因为这里是经过编译后的。
如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!
基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue
中使用云开发的注意事项,mpvue-cloud
收录各种猫叫声,帮助与猫咪交流,分享一些养猫的小知识等。
这是我近期使用Taro
开发框架开发的一款小程序,主要功能是提供可靠的书架管理
功能,只需要扫一扫书籍背后的条形码即可添加书籍入库,你可以方便的在线上管理你的书架,查看书籍的基本信息,亦可以添加书评。
该项目获得了微信小程序 U 计划的资助。目前项目正在开发中,欢迎大家体验反馈。
mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。
八月末 评论了文章 · 2018-11-16
mpvue-vant
记录了我们团队开发中在mpvue
中使用Vant Weapp
组件库所踩下的坑,在这里分享给大家,让mpvue
开发者可以使用vant
组件库进行开发,避免踩不必要的坑。
此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue
中使用
目前vant已经支持了npm
的方式,但是由于node_modules
目录下的代码是不会被编进dist
目录下的,所以暂时只能用git
方式使用。
将dist
目录下的所有文件复制到你项目的/static/vant/
目录下。
git clone https://github.com/youzan/vant-weapp.git
// 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git
在需要引入的页面目录下的main.json
文件中
{
"usingComponents": {
"van-button": "/static/vant/button/index",
}
}
<van-button>测试</van-button>
具体组件 api 文档参考Vant Weapp
mpvue 和原生小程序的方式有所不同。可以参考mpvue文档
原生小程序使用方式为
value="{{value}}"
mpvue 使用方式
v-bind:value="value"
//或者
:value="value"
原生小程序使用方式
bind:click="onClick"
mpvue 使用方式
@click="onClick"
vant
中像notify
这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json
中引入;另一个是方法的引入,需要在vue
文件中import
引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。
import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录
值得注意的是,mpvue
中获取event
值与原生小程序有所不同。举例:
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
}
mpvue 里面无法使用@click-icon
这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。
可以改成驼峰式的监听名。
eg: 我在field
组件中就遇到这个问题,我的做法是:
// static/vant/field/index.js
this.$emit('click-icon');
// 修改为:
this.$emit('clickIcon');
一般的报错报错都可以通过一下流程处理。
ES6转ES5
功能。npm run dev
或删掉dist
目录重新npm run dev
若以上流程都走完了,还是无法解决报错,可以通过提交issues
的方式,我来帮你解决。
VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined
解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5
目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp。
这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。
比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。
使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/
目录下的文件。因为这里是经过编译后的。
如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!
基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue
中使用云开发的注意事项,mpvue-cloud
收录各种猫叫声,帮助与猫咪交流,分享一些养猫的小知识等。
这是我近期使用Taro
开发框架开发的一款小程序,主要功能是提供可靠的书架管理
功能,只需要扫一扫书籍背后的条形码即可添加书籍入库,你可以方便的在线上管理你的书架,查看书籍的基本信息,亦可以添加书评。
该项目获得了微信小程序 U 计划的资助。目前项目正在开发中,欢迎大家体验反馈。
mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。
八月末 收藏了文章 · 2018-10-22
欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前端)、知识整理(每周零碎),欢迎长期关注!
如果您也想进行知识整理 + 搭建功能完善/设计简约/快速启动的个人博客,请直接戳theme-bmw
由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ,我一定会在第一时间检查和修复!!!
如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و
最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!
上半年在做 web 项目的时候,在webpack
上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。
所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。应该说很贴心了吧哈哈哈。当然,自己回查也很方便!
本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。
JS
ES6
CSS
Scss
Scss
(CSS
等等)Base64
编码, 合成雪碧图JS
库Html
文件Watch
Mode && Clean Pluginwebpack-dev-server
欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前端)、知识整理(每周零碎),欢迎长期关注!
八月末 赞了文章 · 2018-10-22
欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前端)、知识整理(每周零碎),欢迎长期关注!
如果您也想进行知识整理 + 搭建功能完善/设计简约/快速启动的个人博客,请直接戳theme-bmw
由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ,我一定会在第一时间检查和修复!!!
如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و
最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!
上半年在做 web 项目的时候,在webpack
上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。
所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。应该说很贴心了吧哈哈哈。当然,自己回查也很方便!
本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。
JS
ES6
CSS
Scss
Scss
(CSS
等等)Base64
编码, 合成雪碧图JS
库Html
文件Watch
Mode && Clean Pluginwebpack-dev-server
欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前端)、知识整理(每周零碎),欢迎长期关注!
赞 89 收藏 69 评论 7
八月末 回答了问题 · 2018-07-11
同问,最近也发现这个问题,不在onload重新初始化数据。有别的解决方法嘛?
同问,最近也发现这个问题,不在onload重新初始化数据。有别的解决方法嘛?
关注 2 回答 1
查看全部 个人动态 →
(゚∀゚ )
暂时没有
注册于 2016-09-03
个人主页被 444 人浏览
推荐关注