【硬核教程】只需1秒—你也可以有自己的API文档

Nothing is true. Everything is permitted.

写在前面

先聊聊为什么想到了要用Vuepress来代替原来写在Confluence上的文档。

大意是有个需要其他部门接入的项目，这个项目有个用md写的接入文档，其他部门的人需要看着这个文档才知道怎么接以及哪些东西需要接。

但是有个问题是这个文档长的一匹，有多长呢？

而且这个md文件是放在confluence上的。

广告

是时候拥有一个你自己的命令行工具了

本篇博客主要介绍了如何使用commander, inquirer以及chalk从零开始，创建属于自己的命令行工具。

一分钟体验

首先我们先花一分钟的时间，体验一下创建自己的命令行cli工具是什么感觉。

来认识一下venus-init——一个让你仅需一个命令开始Java开发的命令行工具

源代码地址: Github仓库地址

个人网站：个人网站地址

前言

不知道你是否有过这样的经历。不管你是什么岗位，前端也好，后端也罢，想去了解一下Java开发到底是什么样的，它是不是真的跟传说中的一样。

于是你拿起键盘，用触控板 ? '' : 抄起鼠标‘，开始了Java淌坑之旅。在一把梭的操作之后，面对你搭建的环境，你陷入了深深的沉思，开始了吾日三省吾身的自我质疑中。这tm到底哪儿错了？到底哪儿在报错？这报错啥意思？

将你的前端应用打包成docker镜像并部署到服务器？仅需一个脚本搞定

前言

前段时间，自己搞了个阿里云的服务器。想自己在上面折腾，但是不想因为自己瞎折腾而污染了现有的环境。毕竟，现在的阿里云已经没有免费的快照服务了。要想还原的话，最简单的办法就是重新装系统。而一旦重装，之前的搭建的所有环境就都白搭了。

再加上之前本身就想引入docker，所以就打算利用docker容器来部署这次的前端应用。

构建前端应用

在打包之前，首先需要一个可正常运行的前端应用。这个可以使用umi或者create-react-app来构建。

nginx的默认配置文件

然后需要在项目中加上默认nginx配置文件。

从无到有-在create-react-app基础上接入react-router、redux-saga

搭建项目框架

新建项目

执行如下代码，用create-react-app来建立项目的基础框架，然后安装需要用到的依赖。

$ npx create-react-app my-test-project
$ cd my-test-project
$ yarn add react-router-dom react-redux prop-types redux redux-saga
$ yarn start

完成后，应用启动在localhost的3000端口。

WebAssembly完全入门——了解wasm的前世今身

前言

接触WebAssembly之后，在google上看了很多资料。感觉对WebAssembly的使用、介绍、意义都说的比较模糊和笼统。感觉看了之后收获没有达到预期，要么是文章中的例子自己去实操不能成功，要么就是不知所云、一脸蒙蔽。本着业务催生技术的态度，这边文章就诞生了。前部分主要是对WebAssembly的背景做一些介绍，WebAssembly是怎么出现的，优势在哪儿。如果想直接开始撸代码试试效果，可以直接跳到最后一个板块。

WebAssembly是什么？

定义

首先我们给它下个定义。

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式

如何正确的在项目中接入微信JS-SDK

微信JS-SDK的功能

如果你点进来，那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验。

html2canvas关于图片不能正常截取

问题

首先说说遇到了什么问题。首先有这么一个需求。需要前端根据后端传过来数据，动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。

官方文档

在项目里面操作了半天未果，google了半天未果。此时有些许绝望。突然想到了，为什么不去它的 官网 看看呢。于是乎我在官网上看到了下面的内容。

如何用vue-router为每个路由配置各自的title

传统方法

以前在单页面路由中，就只能在html文件中定一个固定的网站的title。如果想要动态的去修改，需要使用如下的方法。

document.title = '这是一个标题';

这样会让我们做很多无用功。显得十分蠢。

使用Vue-Router的方法

首先打开/src/router/index.js文件。
找到如下代码。

在vue中使用Autoprefixed

为了使我们的项目兼容各种浏览器，我们可能会在开发中写大量的前缀。即使有了IDE为我们提供了边界的方式。但是仍然需要我们去花时间和精力。而这样会浪费我们很多的时间。为了在开发中提升团队的开发效率，并且同时节省时间，我们引入了autoprefixed。搭配webpack使用，在每次打包的时候自动的给我们的样式加上前缀来兼容不同的浏览器。

安装依赖包

如果你是使用vue-cli构建的项目。首先执行以下代码安装依赖包。