当团队中多人协作时，因为同事之间不同的代码风格和编辑器，会导致项目的代码无法统一风格，不利于阅读，也更容易造成bug，为统一项目中代码的风格，减少书写上的bug，所以整理了一下利用 eslint+husky+prettier+lint-staged来配置前端代码规范。

配置文件

npm包安装

1
2

$ npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier husky lint-staged
$ yarn add eslint prettier eslint-plugin-prettier eslint-config-prettier husky lint-staged -D

日历的控件数不胜数，大多数日历控件都是用来选择日期，用来找出具体的某一天，但是我们的需求是需要点击本周的任意一天，选择本周的时间，找了很多组件，并没有发现合适的组件，于是决定再造一个轮子，自己仿照elementUI中的日期选择选择周的日期组件，来封装一个选择周的日历组件。

UI图样式如下：UI样式是仿照elementUI中的日期选择器（element的样式比较好看）

在使用ElementUI过程中，表格的使用占了很大一部分，但是ElementUI的表格只能实现单纯的展示功能，并不能在展示表格的同时实现表格中单元格的可编辑功能，但是在业务中又需要用到可编辑的表格，于是将ElementUI中的表格和表单结合起来，实现了一个带有表单验证的可编辑表格，刚好可以满足业务需要，同时又方便了表格的使用。

vue的混入mixins

定义

官方定义：混入（mixins）提供了一种非常灵活的方式，来分发Vue组件中可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

但是根据我自己的理解，我觉得mixins就是将vue的组件中的js部分提取出来，把各个组件中共用的数据（包括：data，methods，各种生命周期钩子函数等，只要你能在组件中操作的js都可以放在mixins中）统一放在一个文件中集中处理。

按需引入antd组件

1、引入

1
2
3
4
5
6
7

yarn add antd react-app-rewired babel-plugin-import
// antd 样式组件
// react-app-rewired 自定义配置react项目的工具
// babel-plugin-import 一个按需加载代码、样式的babel插件

yarn customize-cra less-loader less
// 由于新的react-app-rewired@2.x版本的关系，需要安装customize-cra来配置override文件

2、修改根目录下的package.json文件：

1
2
3
4
5
6
7
8
9
10
11
12

# /package.json

"scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-	 "eject": "react-scripts eject",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test --env=jsdom",
+	 "eject": "react-app-rewired eject"
}

封装vue插件

在开发过程中我们经常会遇到一个组件到处都可以重复使用，如果每次都把代码复制过去就太复杂了，封装为一个插件是最好的选择，哪里需要哪里就引入即可。

利用vue init webpack-simple 文件名创建我们的项目目录，在写文件名之前最好先去npm官网查一下有没有相同的名称，因为创建的文件名就是之后我们要发包的文件名（虽然发包时文件名称也可以修改，但还是直接创建一个不重名的项目比较好）。

一、前端环境搭建

使用npm或yarn来安装webpack，在webpack3中，webpack本身和它的cli是在同一个包中，但在webpack4中，已经将两者分来来更好地管理它们。

1
2
3
4
5

$ npm install webpack webpack-cli -g
# 或者
$ yarn global add webpack webpack-cli

$ npm init -y // -y 默认所有的配置

项目需要在electron的项目中新打开一个窗口，利用webpack作为静态资源打包器，发现在webpack中可以设置多页面的入口，今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。

1、webpack的核心概念

• Entry：入口，Webpack执行构建的第一步从Entry开始；
• Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
• Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。

前言

作为一个程序员，不论功力高深与否，都要有一个属于自己的博客，来记录自己成长的轨迹以及心得。本教程针对的是不懂技术又想搭建个人博客的小白，简单快速的搭建一个属于自己的个人博客。正所谓站在巨人的肩膀上，本教程参考了别人搭建博客的经历，再加上自己实战经历。

快速开始

我采用的搭建博客的方式是使用github + hexo 的方式。

hexo是一个快速、简洁且高效的博客框架(官网介绍)。hexo官网。