写react也有一段时间了，之前是vue，去年转成react，刚开始确实有点不习惯，经历了一些项目的锤炼，现在开始慢慢喜欢上了react。同时，也在不断的实践中，开始总结一些好的方法，当然是个人认为的一些好习惯，每个人都有每个人的看法，欢迎交流。

相信各位前端小伙伴对于Promise应该很熟悉了吧，日常工作中，100%会用到的一个东西，除非你还在用callback解决异步，那我就太佩服了。话不多说，进入正题。

前段时间写了一篇前端vue项目实现mock数据方式的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。

前后端分离开发已成大势所趋，基本上大部分公司的开发模式都是如此，那如何自己本地实现一个数据mock呢？当然你也可以使用在线的工具，比如easymock也可以实现mock数据，但是如果追求稳定性，还是本地搭一套环境吧。下面我介绍的是使用了vue-cli本身自带的功能实现mock 数据。

一、使用webpack内置得stats分析相关文件 stats: 构建的统计信息，package.json 中使用 stats，方式如下： {代码...} 如果你是vue-cli3搭建的项目工程，也可以按照下面得方式使用： {代码...} 配置好之后，运行命令，就会在根目录生成一个stats.json文件，可以查看分析结果。这种方式只是初级分析，颗粒度较大。 二、使...

各位小伙伴，春节假期已过大半，这个春节应该是历年来过的最安静的一个春节了吧，天天家里蹲，吃了睡，睡了吃，没想到不出门竟然成了对社会最大的贡献。废话不多说，开始说正题。

你知道webpack是如何分析模块各个依赖关系的？是如何将ES6代码编译成浏览器可执行代码的吗？ 项目初始化 创建文件夹 {代码...} 创建相关文件 在bundler中创建src文件夹，在src文件夹新建index.js,message.js,word.js。文件内容如下： {代码...} 如果想直接在浏览器中运行index.js的话，当然是不能的，浏览器无法识别es6...

日常我们开发了一个库之后，如何打包之后提供给别人使用呢？如果你不清楚，就继续看吧！！！ 初始化库 {代码...} 经过以上步骤后会生成一个library文件夹，里面包含一个package.json文件。然后简单修改为如下所示： {代码...} 简单创建几个文件 在根目录下新建src文件夹，新建一个math.js和string.js。相关文件内容如下...

最近在搭建项目框架，想着上一个项目代码风格各异，就想着在新项目中引入Eslint来规范团队成员代码风格，保持统一，也方便大家维护代码，减少不必要的错误。前端应用愈加复杂，代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索出的一些配置，各取所需。

最近项目里需要用到富文本编辑器，同事选择里百度出的ueditor，但是里面自带的图片上传功能需要后台配合，配置成服务器地址，和我们实际情况不是太符合，于是另想办法，搞定图片上传。

一转眼，毕业五年，北漂五年，coding也五年了。一路走来，有开心时刻、有痛苦时刻，也有被产品、测试、后端逼疯的时候，不过一切都已过去，未来可期。此刻又想起了那个产品让程序员实现手机屏幕颜色随手机壳变化的梗，说说你遇到的奇葩需求，欢迎评论，让我也感受高兴下！?

项目结束一段时间，写个文章总结下。初入项目组，看到了3000行的vue文件，一口血差点捧出，无奈上一个程序员已经离职，留下的坑，只能自己填上了。在重构项目的过程中，也发现了一些别的问题，组内分享会做了总结分享，这次总结成文章特此记录。

距离上篇文章已经过去了大半个月，本来打算只更新代码，最后还是决定把做的过程中遇到的问题记录出来，说不定就可以帮助一些同学，也算是幸事，如果没有，那就当作自己梳理知识点吧！

我这里采用了ant-design中的input作为输入框，而掘金是采用了可编辑的div来实现输入内容,通过设置contenteditable="true"实现，感兴趣的小伙伴可查阅相关资料。 发布按钮的disabled状态将根据输入框是否有值来决定。功能类似todolist添加功能，可参考文章详情页面的发布评论功能。

抽了两天工作中闲暇时间，文章详情页终于写完了，先上图哈，截图少了下面一部分哈，见谅！ 本篇文章为使用React构建精简版本掘金系列第三篇，想看前两篇的话，请查看第一篇,第二篇。 整理一下详情页用到的一些知识点： redux存储、取值 React-router路由跳转传值 父子组件传值 实现过程 左侧部分 主要包含点赞数量显示、...

即我上面红框圈住的部分，这部分由于要做页面滚动的时候常驻顶部，个人为了简单省事，采用了ant-design中的Affix组件，另外导航组件我抽离了一个公用组件，从外部传入tags数组。

这个脚手架会自动帮助我们搭建基础工程，同时安装React项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。 进入项目并启动

历史的发展，小程序风行一时，安卓/ios/H5/微信小程序/支付宝小程序/头条小程序，产品经理让你适配这么多，你的心情如何呢？然而总会有人给咱们造出合适的工具，解放生产力，一次编码，多端运行。开始探索之旅吧！

用了两年左右的vue，虽然看过vue的源码，推荐黄轶大佬的vue源码分析，相当到位。从头梳理了vue的实现过程。周末又看了一个公开课的vue源码分析，想着自己是不是也可以写一个来实现，说干就干，开始coding！ 目前最新版本的vue内部依然使用了Object.defineProperty()来实现对数据属性的劫持，进而达到监听数据变动的效果。

接上一篇webpack4.0配置记录(1),继续记录学习webpack配置。 定义环境变量 {代码...} webpack简单优化 noParse {代码...} ignorePlugin {代码...} 通过exclude排除和include包含某些模块 另外也可以使用webpack自带的ignorePlugin插件排除某些包，减少体积。 {代码...} 以上配置忽略了时间格式化moment.js中的语言包 happ...

expose-loader 暴露全局loader，称为内联loader。到目前为止，有内联loader，普通normal loader，前置loader (pre loader)，后置loader （post loader）

前后端使用HTTP协议进行交互的时候，由于HTTP报文为明文，所以通常情况下对于比较敏感的信息可以通过加密在前端加密，然后在后端解密实现"混淆"的效果，避免在传输过程中敏感信息的泄露（如，密码，证件信息等）。不过前端加密只能保证传输过程中信息是‘混淆’过的，对于高手来说，打个debugger，照样可以获取到数据，并...

性能优化的路没有穷尽，只有更快。打开页面越快越好，点击响应越快越好。在当今这个以快为主的时代，快才是王道。闲话扯完，说正事！！！ 该优化方案以最近做的一个hybrid webapp为实例演示。 路由懒加载 （1）vue-router文件中的router使用懒加载方式。如下图所示 （2）在vue文件中，也采用类似方式引入其他vue组件 {代...

最近做了一个webapp项目，混合式开发，外部原生，内部webview嵌套H5页面。前端方面采用了vue开发，适配采用的是flexible+rem做的适配。本来一切都很好，可是吧，领导说客户有的年纪大 ，看不清字体，希望网页字体可以跟随系统字号大小变化。当时心里真是...，然无奈只能想办法解决问题，网上搜罗一圈都是禁止内部跟随系...

最近都在做vue相关的项目，在公司推行前后端分离，重构以前的项目，真的好忙，一个项目接着一个，爬不完的坑，不说了，说多了都是眼泪。开始正文了！！！

一个项目中需要用到类似的功能，自己手写一个轮播切换，不足之处见谅。代码如下 {代码...} 样式什么的自己修改即可

最近在用vue做的一个项目中用到组件，我想通过v-for指令，在子组件内部动态构造出li标签，添加不同的内容，在官网上没有找到在组件内部使用v-for的例子，一开始vue实例化的时候数据总是加载不出来，后来同事提示原来数据需要定义在父组件中，问题解决。下面是代码，作为记录，以后会用的着。。。