禅思院

写在前面的话在前端的这边圈子里，我们都知道，前端变化可以说让我们跟不上步伐，在圈子里，这句话很常见“大佬，别更新啦！学不动了啦！”,由此，可以看出，前端的变化是得有多快！在我们公司内部，我们不反对学习新技术，但是我对我们团队的每一个人要求是，必须基础。前端的技术日益更新，最底层的永远不会变。圈子里的前端专家，更新了一批又一批，前端最终会不会把自己玩死，谁又说的清楚呢？总之，一句话，无论在哪里，前端都想分一份！在我们看来，前端一个字‘杂’！由此我们称之为“杂学前端”从2013-现在 各种框架各种思想层出

高级工程师必学，AST实践和研究[一]前言通过前面的文章(聊一聊 Javascript 中的 AST)，我们知道了什么是AST,以及AST在项目中的实践和应用的重要性，但是我们如何去写一个自己的模块和插件呢？这边文章教大家去写一个简单的demo,由简单入深，才能更好的去了解和研究AST一步一步的揭开面纱。背景随着互联网技术的不断进步，技术的不断更新和发展，我们之前老的项目往往无法去跟...

我们在日常开发的过程中，一般前端开发相对比较快点，所以常常看到一个项目里好几个后端加上一个相应的前端开发，所以在后续的开发过程中都会遇到这个前端会跟几个后端的人联调，如果是远程环境联调还好点，但是在开发过程中免不了出现新奇古怪的bug，这个时候不得不进行线下的本地环境联调，但是有个问题，多个后端和一个前端会频繁修改本地调用相应后端那个人的接口，造成项目不断的重新dev,项目大一点在dev 启动会耽误很长时间，这个时间你可能啥也做不了，一天下来，时间都浪费在频繁启动上啦！

Vue 3引入了新的响应式系统。这个新的响应式系统使用了 ES6 的 Proxy 和 Reflect 的新特性，相对于 Vue 2.x 使用的 Observer 和 Watcher，提供了更加简洁、高效的实现。Vue3 响应式系统的核心是依赖收集器（Deprecator）。依赖收集器可以追踪一个对象上的所有依赖关系，并在对象发生变化时触发更新。

微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈（vue，react，jq，ng等）独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖，有独立的状态管理。

使用 Nuxt 2 自信地构建您的 Vue 2 应用程序。一个开源框架，使 Web 开发变得简单而强大。

node-sass是什么？node-sass是一个项目依赖，在一个项目中在使用sass语法的时候，必须通过sass-loader来解析sass，从而使sass语法变成浏览器能够识别的CSS语法，而node-sass模块就是对sass-loader的支持模块，所以不安装node-sass，sass-loader就不能正常工作node-sass 安装失败的原因npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长

Rollup 打包通用项目工程库[非TS]，工程化之路很长一短时间没有写博客啦！最近刚好有空写了一下，本文侧重于实践，文案描述不太多，总体实现效果如图效果图1效果图2Rollup 的基础概念就不说的，不知道请点击这里看官网在这里就不废话多说啦，直接上代码，下面就是通用的一些基础配置，我们所有的工具类，组件库等都是通过这一块实现的，形成通用的一些配置，形成工程化的模板！下面我以组件库图表为例子，项目工程结构如下：项目目录├─ packages

一个基于在线切换和自定义的实现的换肤研究和实现前言市面上有好多在线切换主题的方式，但是我个人感觉不是那么的完美，感觉有实现上只是表面的上一些简单的变化，都是借助webpack + less/scss的实现。最近在做UI组件库的一些事情，对在线换肤的一点方式实现，一下只是个人的一点想法，仅仅只代表个人。市面上的分析可供选择的换肤这种方式限制性太强，也就是针对性，在产品发布之前定义好几套主题，然后打包到生产环境中，想要超出之外要么重新定制一套出来，之后打包发布，很麻烦！Element-UI上

husky6.* 使用指南、标准化、效率化前言husky6的版本更新好久啦，但是一些主流的框架都在使用新版的husky，但是好多都是使用的老版本的husky，新版的很少，文档也少。我们团队中正好，搭建新版的组件库，随便研究了一下husky 6.* 的api,并且应用到项目中，这篇文章记录了我加入的指南，避免各猿(媛)友,踩坑。现代原生git钩子变得容易;Husky 提高了提交质量，并提高了规范化！提交或推送时，可以使用它来整理提交消息，运行测试，整理代码等。赫斯基（Husky）支持所有Git钩子

前言最近在做前端工程化的一些东西，形成一种开发文档和组件化的demo,供前端成功可见，其他的部门或者用户通过密码访问，但是这个认证不想太复杂，想来想去，在nginx上配置把，做个拦截，相对来说，没有任何成本，新人入职，可以有个专门的学习和熟悉的过程，大大提高新人的效率和后面的追踪！安装yum -y install httpd-tools生成密码htpasswd -c pass.db idssfe默认在当前位置下会有一个pass.db的文件，我们可以查看该文件cat pass.db

写在前面的话自过年以来，由于时间的原因，一直没有更新博客，年前规划的事情，一直没有推动，一直想写个基于vue3的禅思UI库，迟迟为动手，各个方面的原因都有吧，一边工作，一边要忙着考试，心有余力而不足啊！前端组件化是我们前端圈子里最流行的一段话，也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多，学习的有限，所以一边的学习，一边的去研究，把已有的消化为自己的，这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备，所以我根据已有的，慢慢去琢磨，看看别人的思想和设计，来完成属于禅思的组件

我心中的前端工程化前言前端工程化四化一架前言最近好像流行一句话，“别更新啦！我学不动啦！”,由这句话不难看出，前端技术一直再不断的更新，技术的不断的都能新的目的，就是为了让页面渲染更快，承载的东西更多等等前端工程化“前端工程化”是什么？四化一架“四化一架”是什么？四化一架之开发规范化四化一架之模块化四化一架之组件化四化一架之自动化四化一架之脚手架...

vue-cli 打包之后的各种部署问题集中地，这里总能找到你自己的方式。前端越来越多的人再使用vue,现在也越来越多的前后端的解耦，所以在这个时代种，前端的人员对于的自己的项目部署，要有充分的知道，也知道的一些各种配置和部署，以应对后面的变化，以下的部署方式都是自己通过实现的一些整理方式。第一种分离式部署部署到nginx上在nginx 上部署项目是前端比较常见的，也是比较大众的，市面上大部分都在这上面部署的！下面让我们看下如何在nginx 上配置。部署在根目录下面，比如你访问的是htpp:/

前端工程化研究之npm私服前言由于公司内部项目开发，处于隐私保护的需要，不想将自己封的包推到npm社区，，但又急需要一套完整的包管理工具来管理越来越多的组件，模块，项目；还有经常下载一些npm包，有时候下载不下来，有时候下载，下来运行报错，各种坑，还有内部git 环境ci/cd 自动部署耗时过程，就把公司使用频繁的一些包弄到内部环境，有内部环境下载，会更快，也不会出现下载不下来的情况！经过多次调研，npm有各种各样的私服方式，因为我们对这一块看的也不是很重要，也没有必要花太多时间在这上面，就用一个简单

4.0.1 (2019-10-16)???? Bug Fix@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex, @vue/cli-service-global, @vue/cli-ui-addon-webpack, @vue/cli-ui-addon-widgets, @vue/cli-ui, @vue/cli...

前言DOM“天生就慢”，所以前端各大框架都提供了对DOM操作进行优化的办法Angular中的是脏值检查React首先提出了Virtual Dom，Vue2.0也加入了Virtual Dom，与React类似。Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。Diff算法有三大策略：Tree Diff...

聊一聊 Javascript 中的 AST

Vue前端打包部署到sping boot中以静态项目作为参考[前端vue-cli3+后台sping boot]前端工程目录如下:后台工程目录如下:前后端整合:在项目整合的过程中，直接将前端开发好后将build构建好的dist下static中的文件拷贝到spring boot的resource的static下，index.html则直接拷贝到spring boot...

写在前面的话我们在使用官网的UI组件的时候，总会遇到这样活着那样的展示问题，这些虽然都是小小的问题，但是产品经理就是非要和你过不去，说这些不是我想要的样子，而我们就是因为这个小小展示问题，功能没问题，就是要花很大的时间，将官网上的组件进行一顿改造，其实我们也很欲哭无泪啊！毕竟组件不是我们开发的，开发一套组件也不是一朝一夕能完成的。所以我们只能默默的去改造，改造的过程，心里也不知道埋怨多久啦！下面我改造和研究的一些组件的问题，以select 多选tag 问题！使用过程我们用的是element-ui 的

基于select下拉分页，查询，回显，默认值研究和以及实现前言随着vue的技术越来越成熟，前端圈子里涌现出很多UI库，正整用到自己项目中和业务中的聊聊无几，我们公司用了element UI 框架，真心不想吐槽，用别人的ui框架，只能默默的忍受啊，哈哈！在项目中我经常用到select选择框，在下拉数据比较多的情况下很容易造成浏览器的吃力，特别在表格中，会生成很多如下dmo,造成大量的dom树,如下图在一般情况下，表格中的列特别多，分页的话一般，也有20条吧，相当于20个dom,如果分页点击，生成的更

需要源码的，请在评论区留言。

深入理解 Axios目录1. Axios简介2. 常用功能3. 代码演示4. 深入理解Axios简介Axios是一个基于Promise的http库,可以允许在浏览器和node环境中.常用功能从浏览器发送XMLHttpRequests请求从node.js发送http请求支持PromiseAPI拦截请求和响应改写请求和返回结果取消请求自动转换JSON数据在客...

Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它把组件的共享状态抽取出来，以一个全局单例模式管理，在这种模式下，组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。每一个 Vuex 应用的核心就是 store（仓库）。“store...

前言2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 No