2019.06.26

[新闻] 24 号分享的 vue-function-api 已被 VueJS 官方收录了 (opens new window)，这篇文章也对 RFC 做了一次汇总：https://dev.to/stefandorresteijn/vuejs-is-dead-long-live-vuejs-1g7f (opens new window)

[文章] 使用不同的前端框架（React、Vue） 搭配 Single-SPA 构建微前端服务：https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op (opens new window)

[类库] antd-doddle 是源于日常中后台系统开发不断的积累，如其名一样，让 AntD 使用更加得心应手，实现业务的快速迭代。其中包含一部分的对 Antd 组件深度封装，一些高频次自定义业务组件，和一些常用方法库的封装，支持按需打包：https://github.com/closertb/antd-doddle (opens new window)

[类库] ts-toolbelt 是 TypeScript 类型集合，使 TypeScript 更加安全，它的目的是提高类型的正确性，同时将一组新的特征集添加到 TypeScript 中：https://github.com/pirix-gh/ts-toolbelt (opens new window)

[资源] Docker 镜像，包含（Docker image for Ubuntu Latest + Node Latest and Yarn Latest）：https://github.com/jansanchez/ubuntu-node-yarn (opens new window)

配图 - ts-toolbelt

import { A, B, C, F, I, N, O, S, T, U } from "ts-toolbelt";
// Wonder what these letters mean? Check the docs below

// Merge two `object` together
type merge = O.Merge<{ name: string }, { age?: number }>;

示例 - 使用不同的前端框架（React、Vue） 搭配 Single-SPA 构建微前端服务

# renders both apps
http://localhost:8080/

# renders only react
http://localhost:8080/react

# renders only vue
http://localhost:8080/vue

示例 - vue-function-api

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from "vue";

export default {
  setup() {
    // reactive state
    const count = value(0);
    // computed state
    const plusOne = computed(() => count.value + 1);
    // method
    const increment = () => {
      count.value++;
    };
    // watch
    watch(
      () => count.value * 2,
      val => {
        console.log(`count * 2 is ${val}`);
      }
    );
    // lifecycle
    onMounted(() => {
      console.log(`mounted`);
    });
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    };
  }
};
</script>

示例 - Docker image for Ubuntu Latest + Node Latest and Yarn Latest

FROM ubuntu:latest
MAINTAINER Jan Sanchez <joejansanchez@gmail.com>

# Setting Enviroment variables
ENV NODE_VERSION 6.9.5
ENV NODE_ARCH x64
ENV TMP /tmp
ENV NODE_FILEPATH node-v$NODE_VERSION-linux-$NODE_ARCH

# Udpating and Installing dependencies
RUN apt-get update && apt-get install -y --no-install-recommends \
    ca-certificates \
    curl \
    xz-utils \
    openssl \
    && rm -rf /var/lib/apt/lists/*

# Install Nodejs
RUN curl -SL https://nodejs.org/dist/v$NODE_VERSION/$NODE_FILEPATH.tar.xz -o $TMP/$NODE_FILEPATH.tar.xz \
    && cd $TMP/ && tar -xJf $NODE_FILEPATH.tar.xz && rm $NODE_FILEPATH.tar.xz \
    && mv $NODE_FILEPATH /opt/node \
    && ln -sf /opt/node/bin/node /usr/bin/node \
    && ln -sf /opt/node/bin/npm /usr/bin/npm

# Install the latest version of Yarn
RUN curl -SL https://yarnpkg.com/latest.tar.gz -o $TMP/latest.tar.gz \
    && cd $TMP/ && tar -zxf latest.tar.gz && rm latest.tar.gz \
    && mv $TMP/dist /opt/yarn \
    && ln -sf /opt/yarn/bin/yarn /usr/bin/yarn

今日图 - 热心人