安装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

介绍

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