electron-vue 创建 Electron + Vue 项目

26

March

2020

Electron 是由 GitHub 开发的一个开源框架。它允许使用 Node.js(作为后端)Chromium(作为前端)完成 桌面GUI应用 程序的开发。

我们所常用的 Visual Studio Code 和 Atom 都是基于 Electron 框架。

去年由于业务需求,有考虑将产品迁移至 Electron 来解决 Web 端的部分短板。

当时主要考虑的几点因素:

  • 部分甲方不希望产品通过网页形式展现(要以客户端形式),再单独开发一套桌面应用成本较大
  • 浏览器不支持 H265 原生视频播放
  • 可以使用操作系统 API
  • 产品特性因素,长期挂着 Web 端性能不佳

[ 查看全文... ]

10分钟搞定 Let’s Encrypt 泛域名 SSL 证书

14

March

2020

之前域名都是用的阿里云盾证书服务,因为是一起申请,所以每年更新一下问题不大。最近加两个子域名,正好下月SSL证书又要到期,借此契机换成 Let's Encrypt 证书。

Let's Encrypt 在免费SSL证书里能说最有人气(最大因素在于支持泛域名),但以前需要每3个月手工更新一次,虽有自动更新可不够稳定,如果不注意就比较尴尬。

而现在 acme.shCertbot 都已经比较成熟,很好解决了自动续期问题。至于为什么采用前者,是因为 Certbot 自动更新时会占用443端口,我不想再去重新调整。

并且国内的云盾证书服务都会有申请限制,就拿阿里云的说明为例:个人型SSL证书,保护一个域名。浏览器上有https提示并有绿锁标记。快速签发,适合个人和小微企业,支持个人/企业申请。一个阿里云帐户最多签发20张。我们来划下重点一个阿里云帐户最多20张,也就是一个账号终身只能申请20次,域名/子域多的话,还是消耗的挺快。

有关阿里云的SSL证书的介绍和安装,可以查看我之前的文章:《阿里云 免费SSL证书安装小记》

[ 查看全文... ]

Express 和 Koa 框架对比

01

March

2020

今年3月,可以说是2020年的“新”起点,趁着疫情期间,对过往和未来技术方向做个小整理。

Express 几乎与 Node.js 一样老,也是目前最流行的 Node.js web应用框架,很多应用框架也是基于 Express 构建。Koa 则属于后起之秀,近年来在国内比较热门且主流的框架之一。两者都可轻松的创建 REST APIs、静态服务器等,本文主要就拿这两个框架进行对比。

当然还有:HapiEgg.jsNest.js 等框架,在文章结尾会简单介绍,由于并为实际使用,所以不在本文讨论范围,仅作为扩展内容去理解。

[ 查看全文... ]

MacOS 使用 brew 安装 MongoDB

25

February

2020

简介:

MongoDB 是一种面向文档的数据库管理系统,用C++等语言撰写而成。是一个介于关系数据库和非关系数据库之间的产品,适用于敏捷开发的数据库。

与关系型数据库对比:

  • 数据库(Database) => 数据库(Database)
  • 集合(Collection) => 数据表(Table)
  • 文档(Document) => 记录(Record)

主要区别:数据结构较为松散,类似 JSON 的存储格式,每条记录的表字段可以不同。而关系型数据库每个表的都拥有相同字段。

安装:

由于 MongoDB 宣布不再开源,HomeBrew 也从核心库中移除了 MongoDB 模块 #43770。现在已无法使用 brew install mongodb 命令安装,否则会提示错误 Error: No available formula with the name "mongodb"

[ 查看全文... ]

CSS Grid Layout 手记(教程指南)

11

April

2019

CSS Grid Layout(网格/栅格布局)是 CSS 最强大的布局系统,随着设备和浏览器的升级,将会是未来的主流的布局方案之一。

一、介绍(Introduction)

概述(Basic)

CSS Grid Layout 简称为Grid,网上普遍译为网格,其实更规范的说法应为栅格

栅格对有经验的 UI 和 FE 来说并不陌生,肯定会想到栅格系统(Grid Systems)

这“系统”早在欧洲中世纪就已经出现,当时主要用于文字排版,随着时间的推移逐步发展到平面及其他“设计”领域。

在我印象中 08~09 年左右,网页栅格化设计(Grid Design)已经出现并被广泛使用,所定义的12栅格24栅格等规范方案仍一直被沿用至今。用通俗的方式来讲:就是以一定规则的网格阵列,规范化网页布局。

CSS Grid包含了栅格化设计的特性,是第一个专门为解决布局问题而创建的CSS 模块。如果你熟悉栅格系统栅格化设计那对栅格布局的理解会起到一定帮助。

好的栅格布局,对于模块、元素而言都有规律可循,能在不同尺寸/分辨率下呈现最优的方式,使网页更灵活和易于扩展。但同时也考验设计师,对于不同尺寸的把握,针对前端来说也是如此。

之前使用栅格需要用到Bootstrap等的框架,并且每个框架都有一套属于自己的栅格规范,现在网格布局使我们可以更为简单的实现,无需依赖框架。 [ 查看全文... ]

Gulp4 前端自动化工作流配置

11

March

2019

随着最近把 nodejs 从 8.x 升级到了 10.x,发现 Gulp3.x 早已经不能兼容新版的 node,并且环境中的部分依赖,也已经被淘汰。
于是趁此机会,把 Gulp 升级为 4.x 版本,并把整个环境重新改造了一下。

现已经发布至 Github 和 NPM 作为不定期维护的一个项目。关于后续更新和维护情况,请关注本项目的:GitHubNPM

如果你刚接触 Gulp,可以查看我以前写的文章 Gulp构建前端自动化工作流(Gulp入门介绍)
[ 查看全文... ]