郑剑峰的个人博客

安装vue-cli

vue-cli最新版支持vue3和vue2项目的创建

➜  cnpm install -g @vue/vue-cli
➜  vue create vue2project
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

在创建项目的时候选择Vue2即可

如果不希望使用最新版的cli可以安装只支持vue2的clie

cnpm install -g @vue/cli@3.10.0

Read the rest of this entry

介绍

nodejs官方提供docker镜像，并且镜像自带npm工具，也就是说，完全可以用docker镜像编译本地前端项目，那相比本地安装nodejs编译，docker编译有哪些优势呢

• 可以安装多个版本nodejs，可以选择指定版本nodejs进行编译，如果你是要搭建一个构建平台，这是个非常好的方案
• 免安装，如果需要安装多版本nodejs，这个优势就很明显了
• 不会污染本地环境

如果你是个人开发，使用docker编译项目相对有点极客行为，在个人开发上并没有太大的优势，但是如果你是要搭建一个构建系统，那么docker镜像的方案是你最好的选择。

实现

虽然nodejs官方提供了镜像但实践下来如果直接用官方的镜像，无法达到想要的效果，原因有以下几点

Read the rest of this entry

介绍

nodejs官方提供docker镜像，并且镜像自带npm工具，也就是说，完全可以用docker镜像编译本地前端项目，那相比本地安装nodejs编译，docker编译有哪些优势呢

• 可以安装多个版本nodejs，可以选择指定版本nodejs进行编译，如果你是要搭建一个构建平台，这是个非常好的方案
• 免安装，如果需要安装多版本nodejs，这个优势就很明显了
• 不会污染本地环境

如果你是个人开发，使用docker编译项目相对有点极客行为，在个人开发上并没有太大的优势，但是如果你是要搭建一个构建系统，那么docker镜像的方案是你最好的选择。

实现

虽然nodejs官方提供了镜像但实践下来如果直接用官方的镜像，无法达到想要的效果，原因有以下几点

• nodejs项目初衷是用javascript作为后端预言，所以镜像主要是用于后端服务
• 镜像虽然自带了npm工具，但因为WORKDIR的关系无法正常编译，尝试过多种方法还是无法顺利编译
• 基于官方的镜像做二次构建成本很低，所以建议根据自己的需求做二次构建

我们先实现一个npm install功能的镜像

Read the rest of this entry

如果客户提出一个需求要在网页打开计算器，你可千万别以为是很简单的事，事实上，如果不借助“外力”是根本办不到。

背景

某项目客户提了这么一个需求

• 需要在chrome浏览器中打开IE和firefox
• 需要在firefox中打开IE和chrome
• 需要在IE中打开firefox和chrome

总结下就是能在任意浏览器中打开任意浏览器，乍听之下觉得很扯是不是，觉得是个傻逼需求是不是，事实上，我的第一反应也是这样的，但了解事情背景后发现这是个很合理的需求，背景是客户有几个个遗留的老系统，其中核心业务系统只能运行在IE上，某BI系统只能运行在firefox上，你可能觉得很奇怪，只支持IE这个可以理解，只支持firefox这个有点匪夷所思，但事实确实如此，我们也不必去深究，现在客户要做门户，需要在门户上单点到所有系统，那么就有了上面的需求。

沙盒模型

想象一下如果javascript能读写本地文件会发生什么事

• 打开百度你的资料可能就全部泄漏了
• 打开百度可能就给你悄悄装上全家桶了
• 打开百度你的盘可能就被格式化了
• …..

Read the rest of this entry

背景

我的强项是后端开发，很少涉及前端开发，一个很重要的原因是前端布局太妖，要实现一个居中需要各种奇技淫巧，而且每个浏览器实现还不一样，前端的布局就像谜一样，你都不知道为啥就可以了，也不知道为啥就不行。直到Flex布局的出现前端的布局终于有点章法了，第一次接触Flex布局是从阮一峰的博客Flex 布局教程，阮一峰写博客的能力确实厉害，通俗易懂又直击要害，建议想要入门Flex都去拜读一下。那么写这篇文章的目的是从一个后端的角度去看Flex布局，如果你看完阮一峰的博客后仍然有一些疑问，那么可以读一读这篇文章。

Flex基本概念

• 容器和项目

Flex布局包括容器(flex container)和项目(flex item)，比如下面这段代码

<div class="content">
    <div class="block"></div>
    <div class="block"></div>
</div>

content这个div就是容器，block的div就是项目

• 两轴两个方向

Flex核心就是靠两根轴进行布局的调整，其实就是水平和垂直两个方向，只不过在Flex中水平方向称为主轴，垂直方向称为交叉轴，每个方向各有start center end三个方位，其实就是左边中间和右边三个方位。

Read the rest of this entry

flex

介绍

grapesjs是一个开源的网页设计器，你可以理解为在线低配版Dreamweaver，和Dreamweaver不同的是，grapesjs可以灵活的进行二次开发，实际上grapesjs只是构建了设计器最基础的部分，没有二次开发grapesjs也没有意义，如果你恰好有以下需求，那么grapesjs将非常适合你

• 页面在线设计编辑，并且能自定义组件
• 可以导出源码
• 提供属性配置
• 灵活的二次开发机制

使用

grapesjs使用方法很简单，如果是html页面，可以直接通过导入js和css即可

Read the rest of this entry

背景

长久以来都想找一个画流程图的工具，有几个需求，可以将组件拖到绘图面板中，并且组件间可以通过线进行关联，在属性面板可以配置组件的属性，这里的组件可能是html的组件，也可能是一个功能，为什么需要这么一个东西呢？如果有这东西，很多想法就可以实现，比如

• 工作流
• 服务编排

但一直找不到满意的框架，很大原因就是这些框架颜值太低，直到遇到NodeRed，NodeRed是物联网开发工具，提供可视化界面通过配置就能实现物联网程序的开发，让我感兴趣的是NodeRed可视化界面，颜值高，操作便利，简洁不花哨

因为NodeRed是开源的，也花了一段时间去研究他的代码，想把可视化工具抽离出为我所用，种种原因失败了，既然抽离不出来，能不能自己实现一个？之前从来没想过自己开发一个，但细想觉得并不难实现，可视化界面核心有两点

Read the rest of this entry