时间过的很快，不知不觉已经到了9102的最后一个月份；仔细回想这一年好快，如果分阶段的回想，每一个周都觉得周末到来的慢，每月都惦记下月的节假日，感觉很慢；回过来一想这一年好快，跟掉头发的速度成了正比

前言

目前在做的项目是我从0到1一手搭建起来的，所以比较在整体结构和对架构的优化上思考并实践了很多，每一次的开发需求都先用一部分时间思考项目的打包和搭建怎么样才能更加方便通用化，今天就记录一下在越来愈多的需求和组件写完后怎么才能提高webpack的build速度，可能百度会有很多方案，今天我就来针对当前vue-cli3.x搭建的项目dll文件抽离配置

什么是DllPlugin 和 DllReferencePlugin

在使用webpack进行打包时候，对于依赖的第三方库，比如vue，vuex等这些不会修改的依赖，我们可以让它和我们自己编写的代码分开打包，这样做的好处是每次更改我本地代码的文件的时候，webpack只需要打包我项目本身的文件代码，而不会再去编译第三方库，那么第三方库在第一次打包的时候只打包一次，以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，这样的可以快速的提高打包的速度。因此为了解决这个问题，DllPlugin 和 DllReferencePlugin插件就产生了。

前言

​ 之所以是总结关于npm install的问题，是因为之前在组织组内的一次分享会上我问了小伙伴们一个问题；当时有一个M移动端项目，用到了公司的私有源上的分享插件，而每个人在执行npm install的时候默认淘宝或npm源中下载，所以导致我们自己的私有源要单独用nrm切换到私有源再次npm install一次；当然我们的私有源也很强大基本上的npm源上的包都有，我们可以直接切换到公司镜像源然后npm install一下，这样私有源和npm源的包都能安装，但在极端情况万一npm源某些个别包，公司的源上没有同步上来呢？这种情况我们是不是来回切换？还有之前和后端JAVA合作，JAVA有一个种dubbo接口，这种接口就是输出git包的形式，这种情况我们不能吧dubbo接口的包文件放到公司源里去；

​ 其实在package里是支持输入本地包或git 源包的，so 接下来我来梳理总结一下npm install 依赖包安装！

package定义

我们都知道要手动安装一个包时，执行 npm install <package> 命令即可。这里的第三个参数 package 通常就是我们所要安装的包名，默认配置下 npm 会从默认的源 (Registry) 中查找该包名对应的包地址，并下载安装。但在 npm 的世界里，除了简单的指定包名, package 还可以是一个指向有效包名的 http url/git url/文件夹路径。

阅读 npm的文档， 我们会发现package 准确的定义，只要符合以下其中之一条件，就是一个 package:

前言

很久没有更新了，今天这个题目更多的可能是一点灵感，在最近项目中有一个刷新当前页面需求，但通过思考也并不是刷新当前页面，这样做固然简单，但对于用户体验并不是很完美，其实只需要刷新当前路由组件，而页面中整体框架不需要重新渲染，所以就考虑有没有办法只重新加载某一个组件，这样用户只会看到数据或某一块的刷新，有点像ajax的方式进行局部刷新，会提高一下用户体验；

正文

vue项目刷新当前页面，可能这已经不是个问题，目前大家知道的有应该最少有两种解决方案：

1
2
3
4
5

localhost.reload() 

或

this.$router.go(0)

如上是在遇到刷新时最直接能想到的方法，但是这个方法有个弊端就是刷新页面会导致空白页面的出现，这样的用户体验很不好；

前言

​ 不得不说最近很忙，996，996ICU非常火爆（当然我说的忙也是忙搬砖），然而我大JD也几乎每天都上头条，站在风口浪尖被吐槽！这里我就不说啥了，每个公司其实都不好过，就好像每个程序员都不好过一样；对于996我一直以来都觉得如果非要按时间来要求员工来工作的话那真没什么意义，有意义的事情就算公司不要求你996我想你也会去加班加点搞还毫无怨言；但如果你根本没那么多事情可做，但单位要求你996那不但对个人是损失，对公司来说也完全是坏处多益处基本没有的！就好像现在有些大公司强制996，有些部门有事情做单没到需要996来搞，那么员工不就是纯属在公司耗时间吗？而且每个人都对公司报有怨言，这种强制性不考虑现实的制度完全是懒人想出来政治套路，治标不治本（甚至连标都治不了）！

​ 以上言论只是作者本人一点小小的看法，欢迎吐槽！

下面进入正题，最近我做的事情完全不需要996这种制度来强制我，我接到项目时的想法是：007都不一定能保证完成任务！大概场景如下：

​ 一个后台系统从无到有开始做，更恶心的事有一些表单是完全后端下发前端要做渲染和填写的校验，当我听到这里时我内心还是平静的，单之后的一句话我就炸了，一个半月搞完！NM一个完全没有的系统到上线一个半月，后端+前端+数据录入完全让人死的节奏，倒排期的感觉；更恶心的事这个系统一共拆了六个需求，我们刚看到第一个需求就已经告诉我们这个系统要一个半月以后要，这NM是我第N次在此公司遇到这种事了，业务方就是天，业务方每一句话基本都能搞死搬砖的（真实感受）

说这这么多，明显感觉最近不止不景气，还没时间吐槽，篇幅自己都觉得长了；好了现在说说这个系统进入正文！

VUE3框架配置搭建

​ 一开始我想着用React搭建，但是和考虑到其他人使用习惯和项目紧迫性问题，我还是选择了VUE；因为大家用vue比react熟练项目这么紧最后确定用vue3+elementUI搭建，这还是我从2.0之后第一次用3.0搭建vue，当然这次搭建不是单纯的copy方式搭建，这样对我来说就毫无意义了，搭建之前我考虑了一下多人开发场景，加入了如下插件：

什么是 ESLint

ESLint（中文站点）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则。

一、Eslint安装

1.全局安装

如果你想使 ESLint 适用于你所有的项目，建议全局安装 ESLint

1

$ npm install -g eslint

初始化配置文件

1

$ eslint --init

2.局部安装

1

$ npm install eslint --save-dev

初始化配置文件

1

$ ./node_modules/.bin/eslint --init

3.webpack中配置eslint

需要安装eslint-loader解析.eslint文件

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

{  
  test: /\.(js|jsx|mjs)$/,  
  enforce: 'pre',  
  use: [  
    {  
      options: {  
        formatter: eslintFormatter,  
        eslintPath: require.resolve('eslint'),  
      },  
    	loader: require.resolve('eslint-loader'),  
    },  
  ],  
  include: paths.appSrc, //也可以用exclude排除不需要检查的目录或者用.eslintignore  
},

二、ESlint配置**

之前有个项目比较赶，我过去支援开发时发现一个toast插件，写成公用方式可以直接this.$toast()调用；但由于写这个公用插件的人是个新手，所以把插件写成了组件，每次想用toast都要import toast from './components/toast'引入组件，奈何已经成型，所以今天把关于VUE写插件的方法分享出来，貌似网上也有类似文章，但我作为非专业程序猿，一贯作风是写出来让自己记忆深刻也能没事拿出来看看！

词穷代码，代码来补！关于用到的vue方法可直接官网查看！

如果觉得不错的话，点点关注，点点赞，谢谢大家，你们的支持！下面进入正文；

正文

首先既然是插件，我的理解就是只需要调用传值即可实现，想toast这么常用的插件我们不可能每一个组件都引用文件（不管是js还是vue文件）都是多余！

首先，我们需要创建一个toast.vue的模版组件内容如下:

前言

​ 之前一直在QQ空间做年度总结和来年计划，今年掘金和sf等各大网站看到好多大牛都出来年度总结，异常火爆，由于文采很菜，就不拿去献丑，就在自己的blog里来一篇关于职业上的年度总结吧，可能如下内容会写成流水账形式，也可能会稍微好一点，我会尽量控制在我自己以后回头看时不吐的程度，尽量有阅读性和客观性！如你看到此总结可以尽情吐槽，我会吸收并改正！

回顾18

18年我觉得在工作方面要分为上半年和下半年；首先说一下我是17年11.1来的现在的公司，有些事缘分来了挡都挡不住，我17年心心念念的现公司，17年都是按照自己的规划走的；可是到了18年貌似就不是了；

从上半年说起，上半年我主要负责两个项目，一个是接手过来的，代码比较老套，都没有钱后端分离；另一个是一个新项目，是一个可视化搭建页面的项目；当时接老项目时打算重构，但是推进难度大，之后有新项目启动，又是我一个人搞前端，所以老项目就没有重构；新项目可以说从项目启动—>架构雏形—>架构实现—>第一版上线，完全自己一个人把前端的项目搭建起来，中间虽然遇到过几次问题，尤其前期考虑架构和实现方式时都已经开始怀疑人生了，之后成功的感觉那不能用一个“爽”字能表达的！这里放上项目代码，删除了公司的一些标示和接口，项目后期并没有优化成可复用的代码，只是放出来作为大家以后做类似项目时一个开发思路参考参考！本来想用这个项目打开leader的大门，可是后来，就没有后来了！

​ 虽然react比Vue早一些，但是我还是先用了Vue；原因很简单当时看了一下React Native和React的API，觉得项目不需要这么复杂的东西，当时还是vue1.x时代，写了大概3个项目后，Vue2.x上线，之后的项目一直在用vue，从1.x到2.x一直踩坑，到目前可以说对Vue很熟练了也做了很多项目！其中也写过一个React，只是看了API，然后上手就写，感觉一直在皮毛的表层应用；

​ 最近项目不紧，闲来无事，就在想之前写的react项目，我不能只会用，只关注皮毛，还要多问一些为什么，所以有了今天这篇文章，通过‘十万个为什么’来让自己更加深入的学习了解react，以便自己更加了解react；

​ 好了，牢骚不多说，下面进入正题；

第一问：为什么用JSX？

不需要为了React使用JSX，可以直接使用JavaScript，但建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法

1、没有 JSX 的 React：

最近在开发一个项目时我发现，关于Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，并没有仔细的去研究过加入keep-alive,vue-router后的执行顺序等问题；

Vue-Router导航守卫

有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。

为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档

关于钩子的一些知识：

路由钩子函数的错误捕获

如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误，可以这样捕获：

1
2
3
4

router.onError(callback => { 
// 2.4.0新增 并不常用，了解一下就可以了 
  console.log(callback, 'callback');
});

在路由文档中还有更多的实例方法：动态添加路由等，有兴趣可以了解一下。