[前端] 每日时报-2019.06.26

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2330 天前的主题，其中的信息可能已经有所发展或是发生改变。

[前端] 每日时报-2019.06.26

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

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

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

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

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

配图 - 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 <[email protected]> # 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