会煮咖啡的猫

会煮咖啡的猫 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织 ducafecat.tech 编辑
编辑

全栈开发者 最近专注于 Flutter/Golang/Nodejs/K8s/CICD/基于Docker前端基础建设 , 喜欢技术分享

个人动态

会煮咖啡的猫 关注了用户 · 11月9日

前端小智 @minnanitkong

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

关注 9250

会煮咖啡的猫 赞了文章 · 11月9日

我开源了一个基于Vue的组织架构树组件

点赞再看,养成习惯

本文 GitHubhttps://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

开门见山

Demo 演示地址:http://www.longstudy.club/vue...

github 地址:https://github.com/qq44924588...

项目背景

因为最近公司需要做一个OKR,OKR 里面有个对齐视图,是一个数型结构,如下图所示:

clipboard.png

就拿我 小智 来说,如果有人对齐我的 KR 就放到我的右边,如果是我对齐了谁的 KR,就放到我的左边,类似一个上下级的关系,所以这里我用两棵树来表示左边与右边的关系。

在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子!

分析

  • 既然是树,那么每个节点都应该是相同的组件
  • 节点下面套节点,所以节点组件应该是一个递归组件
  • 整棵树应该有一个全局的状态,用来管理从外部传入的值以及向外部提供的属性和方法。
  • 每相树节点应该也要有一个对应的节点状态,来管理节点自身属性和方法。

实现思路

递归组件

对于递归组件,Vue 官方文档是这样说的:

组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做。

这里我用 OkrTreeNode.vue 来表示树的节点,里面是这样用递归,下面是该组件简定:

<template>
  <OkrTreeNode
    v-for="child in leftChildNodes"
    :node="child"
  ></OkrTreeNode>
</template>

export default {
  name: 'OkrTreeNode'
}

递归组件的使用需要注意的两点是组件里面要有组件name 以及结束递归的条件。

树的状态

对于树的状态,我用一个 TreeStore 类来表示,该实现方式主要是参考 ElementUI 中的 tree 组件。TreeStore 中的属性就表示我外部传入的 pros 或者 attr 或者 事件和方法,都在这个对象里面管理,具体的代码可以看这里:

https://github.com/qq44924588...

节点的状态

对于节点的状态,我用一个 Node 对象来表示,具体的代码可以看下面这个地址,这里就不展开说了:

https://github.com/qq44924588...

Demo 演示

基础用法

基础的树形结构展示,默认方式垂直方向。

clipboard.png

水平方向

direction 属性设置为 horizontal 就可以展示水平方向。

clipboard.png

节点是否可被展开

节点可被展开,默认是不展开,通过show-collapsable设置节点可被展开。

clipboard.png

节点默认全部展开

通过设置 default-expand-all 默认展开所有节点,该参数只有在 show-collapsabletrue 时有效

clipboard.png

可将 Tree 的某些节点设置为默认展开

clipboard.png

通过 default-expanded-keys 设置默认展开的节点。需要注意的是,此时必须设置 node-key ,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。

节点的样式

可自行设置节点的默认样式和选中的样式。

通过 label-class-name 设置节点的样式,支持字符和函数方式。通过 current-lable-class-name 设置当前节点选中的样式,支持字符和函数方式。

clipboard.png

节点自定义内容

可自行设置节点内容。通过 render-content 渲染节点内容。

clipboard.png

节点动画

该组件内置多种过渡动画,可以直接使用。默认过渡动画是 okr-zoom-in-center,更多动画详见最底部的API文档。

使用动画需要传入aniamte 属性,通过animateName指定动画的类型,默认动画是 okr-zoom-in-center

OKR 展示模式

该模式的出现,是为了实现跟飞书OKR 展示的视图一样效果,所以在 Tree 的模式下,扩展成左右两棵子树。
该模式必须设置 onlyBothTree ,以及通过 leftData表示左子数的结构。

clipboard.png

OKR 展示模式之自定义节点内容

与上常规 Tree 一样,我们也可以通过自定义渲染函数来制定节点的内容。

通过 render-content 渲染节点内容,通过返回 node 中的 isLeftChild 判断是否是左边的树。

clipboard.png

节点过滤(不可展开)及支持的方法

通过关键字过滤树节点,在需要对节点进行过滤时,调用 Tree 实例的 filter 方法,参数为关键字。需要注意的是,此时需要设置 filter-node-method ,值为过滤函数。

clipboard.png

节点过滤(可被展开)

通过关键字过滤树节点,在需要对节点进行过滤时,调用 Tree 实例的 filter 方法,参数为关键字。需要注意的是,此时需要设置 filter-node-method ,值为过滤函数。

clipboard.png

支持的事件(不可展开)

不可展开时支持的事件有 节点点击 和 鼠标右键点击。

clipboard.png

支持的事件(可被展开)

可展开时支持的事件有 节点点击、鼠标右键点击,节点的展开以及节点的关闭。

clipboard.png

Attributes

参数说明类型可选值默认值
data展示数据array
direction树的展开方向Stringhorizontal / verticalvertical
onlyBothTree子树在根节点左右两边展开,该模式只有在 direction 为 horizontal 有效,且必须提供 leftData 数据Booleanfalse
leftData展示左子数的数据,该属性于在 onlyBothTree 模式启用array
label-width节点的宽度,默认为自动宽度。如果 label-width 为 number 类型,单位 px;如果 label-width 为 string 类型,则这个宽度会设置为 节点 的 style.width 的值,节点的宽度会受控于外部样式string/number
label-height节点的高度,默认为自动高度。如果 label-height 为 number 类型,单位 px;如果 label-height 为 string 类型,则这个高度会设置为 节点 的 style.height 的值,节点的高度会受控于外部样式string/number
label-class-name节点 className 的回调方法,也可以使用字符串为所有的节点设置一个固定的 classNameFunction(node)/String
current-lable-class-name当前选中节点的样式Function(node)/String
show-collapsable节点是否可被展开Booleanfalse
default-expand-all是否默认展开所有节点,该参数只有在 show-collapsable 为 true 时有效Booleanfalse
render-content树节点的内容区的渲染 FunctionFunction(h, node)
props配置选项,具体看下表object
node-key每个树节点用来作为唯一标识的属性,整棵树应该是唯一的String
default-expanded-keys默认展开的节点的 key 的数组(需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。)array
filter-node-method对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏Function(value, data, node)
niamte是否开启节点展开的过渡动画Booleanfalse
animate-name过渡动画名称,支持动画类型有 okr-fade-in-linear/okr-fade-in/okr-zoom-in-center/okr-zoom-in-top/okr-zoom-in-bottomStringokr-zoom-in-center

props

参数说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string, function(data, node)
children指定节点标签为节点对象的某个属性值string

Events

事件名称说明回调参数
node-click节点被点击时的回调共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-expand节点被展开时触发的事件共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse节点被关闭时触发的事件共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-contextmenu当某一节点被鼠标右键点击时会触发该事件共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

方法

方法名说明回调参数
filter对树节点进行筛选操作接收一个任意类型的参数,该参数会在 filter-node-method 中作为第一个参数
getNode根据 data 或者 key 拿到 Tree 组件中的 node,使用此方法必须设置 node-key 属性(data) 要获得 node 的 key 或者 data
setCurrentNode通过 node 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性(node) 待被选节点的 node
setCurrentKey通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性(key) 待被选节点的 key,若为 null 则取消当前高亮的节点
getCurrentKey获取当前被选中节点的 key,使用此方法必须设置 node-key 属性,若没有节点被选中则返回 null
getCurrentNode获取当前被选中节点的 data,若没有节点被选中则返回 null
remove删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性(data) 要删除的节点的 id 或者 data 或者 node
append为 Tree 中的一个节点追加一个子节点(data, parentNode) 接收两个参数,1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore为 Tree 的一个节点的前面增加一个节点(data, refNode) 接收两个参数,1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter为 Tree 的一个节点的后面增加一个节点(data, refNode) 接收两个参数,1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

浏览器支持情况

Modern browsers and Internet Explorer 10+.

如果你觉得还不错的话,还请帮忙在 github 上给个 star,如果你觉得哪些需要优化的可以到 github 上提个 PR。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 22 收藏 14 评论 1

会煮咖啡的猫 收藏了文章 · 11月9日

我开源了一个基于Vue的组织架构树组件

点赞再看,养成习惯

本文 GitHubhttps://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

开门见山

Demo 演示地址:http://www.longstudy.club/vue...

github 地址:https://github.com/qq44924588...

项目背景

因为最近公司需要做一个OKR,OKR 里面有个对齐视图,是一个数型结构,如下图所示:

clipboard.png

就拿我 小智 来说,如果有人对齐我的 KR 就放到我的右边,如果是我对齐了谁的 KR,就放到我的左边,类似一个上下级的关系,所以这里我用两棵树来表示左边与右边的关系。

在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子!

分析

  • 既然是树,那么每个节点都应该是相同的组件
  • 节点下面套节点,所以节点组件应该是一个递归组件
  • 整棵树应该有一个全局的状态,用来管理从外部传入的值以及向外部提供的属性和方法。
  • 每相树节点应该也要有一个对应的节点状态,来管理节点自身属性和方法。

实现思路

递归组件

对于递归组件,Vue 官方文档是这样说的:

组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做。

这里我用 OkrTreeNode.vue 来表示树的节点,里面是这样用递归,下面是该组件简定:

<template>
  <OkrTreeNode
    v-for="child in leftChildNodes"
    :node="child"
  ></OkrTreeNode>
</template>

export default {
  name: 'OkrTreeNode'
}

递归组件的使用需要注意的两点是组件里面要有组件name 以及结束递归的条件。

树的状态

对于树的状态,我用一个 TreeStore 类来表示,该实现方式主要是参考 ElementUI 中的 tree 组件。TreeStore 中的属性就表示我外部传入的 pros 或者 attr 或者 事件和方法,都在这个对象里面管理,具体的代码可以看这里:

https://github.com/qq44924588...

节点的状态

对于节点的状态,我用一个 Node 对象来表示,具体的代码可以看下面这个地址,这里就不展开说了:

https://github.com/qq44924588...

Demo 演示

基础用法

基础的树形结构展示,默认方式垂直方向。

clipboard.png

水平方向

direction 属性设置为 horizontal 就可以展示水平方向。

clipboard.png

节点是否可被展开

节点可被展开,默认是不展开,通过show-collapsable设置节点可被展开。

clipboard.png

节点默认全部展开

通过设置 default-expand-all 默认展开所有节点,该参数只有在 show-collapsabletrue 时有效

clipboard.png

可将 Tree 的某些节点设置为默认展开

clipboard.png

通过 default-expanded-keys 设置默认展开的节点。需要注意的是,此时必须设置 node-key ,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。

节点的样式

可自行设置节点的默认样式和选中的样式。

通过 label-class-name 设置节点的样式,支持字符和函数方式。通过 current-lable-class-name 设置当前节点选中的样式,支持字符和函数方式。

clipboard.png

节点自定义内容

可自行设置节点内容。通过 render-content 渲染节点内容。

clipboard.png

节点动画

该组件内置多种过渡动画,可以直接使用。默认过渡动画是 okr-zoom-in-center,更多动画详见最底部的API文档。

使用动画需要传入aniamte 属性,通过animateName指定动画的类型,默认动画是 okr-zoom-in-center

OKR 展示模式

该模式的出现,是为了实现跟飞书OKR 展示的视图一样效果,所以在 Tree 的模式下,扩展成左右两棵子树。
该模式必须设置 onlyBothTree ,以及通过 leftData表示左子数的结构。

clipboard.png

OKR 展示模式之自定义节点内容

与上常规 Tree 一样,我们也可以通过自定义渲染函数来制定节点的内容。

通过 render-content 渲染节点内容,通过返回 node 中的 isLeftChild 判断是否是左边的树。

clipboard.png

节点过滤(不可展开)及支持的方法

通过关键字过滤树节点,在需要对节点进行过滤时,调用 Tree 实例的 filter 方法,参数为关键字。需要注意的是,此时需要设置 filter-node-method ,值为过滤函数。

clipboard.png

节点过滤(可被展开)

通过关键字过滤树节点,在需要对节点进行过滤时,调用 Tree 实例的 filter 方法,参数为关键字。需要注意的是,此时需要设置 filter-node-method ,值为过滤函数。

clipboard.png

支持的事件(不可展开)

不可展开时支持的事件有 节点点击 和 鼠标右键点击。

clipboard.png

支持的事件(可被展开)

可展开时支持的事件有 节点点击、鼠标右键点击,节点的展开以及节点的关闭。

clipboard.png

Attributes

参数说明类型可选值默认值
data展示数据array
direction树的展开方向Stringhorizontal / verticalvertical
onlyBothTree子树在根节点左右两边展开,该模式只有在 direction 为 horizontal 有效,且必须提供 leftData 数据Booleanfalse
leftData展示左子数的数据,该属性于在 onlyBothTree 模式启用array
label-width节点的宽度,默认为自动宽度。如果 label-width 为 number 类型,单位 px;如果 label-width 为 string 类型,则这个宽度会设置为 节点 的 style.width 的值,节点的宽度会受控于外部样式string/number
label-height节点的高度,默认为自动高度。如果 label-height 为 number 类型,单位 px;如果 label-height 为 string 类型,则这个高度会设置为 节点 的 style.height 的值,节点的高度会受控于外部样式string/number
label-class-name节点 className 的回调方法,也可以使用字符串为所有的节点设置一个固定的 classNameFunction(node)/String
current-lable-class-name当前选中节点的样式Function(node)/String
show-collapsable节点是否可被展开Booleanfalse
default-expand-all是否默认展开所有节点,该参数只有在 show-collapsable 为 true 时有效Booleanfalse
render-content树节点的内容区的渲染 FunctionFunction(h, node)
props配置选项,具体看下表object
node-key每个树节点用来作为唯一标识的属性,整棵树应该是唯一的String
default-expanded-keys默认展开的节点的 key 的数组(需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。)array
filter-node-method对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏Function(value, data, node)
niamte是否开启节点展开的过渡动画Booleanfalse
animate-name过渡动画名称,支持动画类型有 okr-fade-in-linear/okr-fade-in/okr-zoom-in-center/okr-zoom-in-top/okr-zoom-in-bottomStringokr-zoom-in-center

props

参数说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string, function(data, node)
children指定节点标签为节点对象的某个属性值string

Events

事件名称说明回调参数
node-click节点被点击时的回调共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-expand节点被展开时触发的事件共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse节点被关闭时触发的事件共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-contextmenu当某一节点被鼠标右键点击时会触发该事件共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

方法

方法名说明回调参数
filter对树节点进行筛选操作接收一个任意类型的参数,该参数会在 filter-node-method 中作为第一个参数
getNode根据 data 或者 key 拿到 Tree 组件中的 node,使用此方法必须设置 node-key 属性(data) 要获得 node 的 key 或者 data
setCurrentNode通过 node 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性(node) 待被选节点的 node
setCurrentKey通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性(key) 待被选节点的 key,若为 null 则取消当前高亮的节点
getCurrentKey获取当前被选中节点的 key,使用此方法必须设置 node-key 属性,若没有节点被选中则返回 null
getCurrentNode获取当前被选中节点的 data,若没有节点被选中则返回 null
remove删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性(data) 要删除的节点的 id 或者 data 或者 node
append为 Tree 中的一个节点追加一个子节点(data, parentNode) 接收两个参数,1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore为 Tree 的一个节点的前面增加一个节点(data, refNode) 接收两个参数,1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter为 Tree 的一个节点的后面增加一个节点(data, refNode) 接收两个参数,1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

浏览器支持情况

Modern browsers and Internet Explorer 10+.

如果你觉得还不错的话,还请帮忙在 github 上给个 star,如果你觉得哪些需要优化的可以到 github 上提个 PR。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

会煮咖啡的猫 发布了文章 · 11月4日

Flutter 2020 开源项目推荐 第一弹

视频

https://www.bilibili.com/vide...

关注点

  • 目录文件结构

是否符合官方的包管理规范,

  • 组件拆分

页面、组件、通用、业务

  • 工具类设计

通讯、持久化、安全、字符、数字、浮点

  • 第三方组件

流媒体、播放器、编辑器、图片、Web 视图、原生扩展

  • 状态管理

bloc、provider

  • 云服务

firebase、google cloud、AWS、serverless

  • 业务完整性

可运行、业务全

★ Prism 壁纸 ★

https://github.com/Hash-Studi...

★ Flutter-Movies4U 电影资讯 ★

https://github.com/webaddicte...

★ anytime_podcast_player podcast 播放器 ★

https://github.com/amugofjava...

★ gcloud-dota-app dota 游戏资讯 全栈项目 ★

flutter + react + go + firebase + google cloud

https://github.com/alvarowolf...

★ LunaSea 多媒体网盘管理 ★

https://github.com/CometTools...

★ passwall-mobile 密码管理 全栈项目 ★

flutter + electron + go

https://github.com/aeosmanogl...
https://github.com/passwall/p...
https://github.com/passwall/p...
https://passwall.io

restofinder 美食

https://github.com/yusriltake...

SongTube-App 音乐播放下载

https://github.com/SongTube/S...


© 猫哥

https://ducafecat.tech

https://ducafecat.gitee.io

查看原文

赞 0 收藏 0 评论 0

会煮咖啡的猫 回答了问题 · 11月2日

flutter已经添加了环境变量,还是会卡在pub get failed (server unavailable)

下 kotlin 呢,和 pub 没关系,你用 as 打开项目 科学上网 方式sync 项目

关注 1 回答 1

会煮咖啡的猫 回答了问题 · 11月2日

flutter的SingleChildScrollView中嵌套了较大高度的SizedBox > WebView后闪退

为啥要 SizedBox ?
你能获取web的高度,用 Container 不行么?

关注 2 回答 1

会煮咖啡的猫 回答了问题 · 11月2日

flutter网络请求debug,devtools中的network没有response

你用的 dio 么,可以开代理用抓包工具调试

https://ducafecat.gitee.io/20...

关注 2 回答 1

会煮咖啡的猫 回答了问题 · 11月2日

flutter引入插件后编译错误

你用 AS 工具打开这个项目,能看到更多有帮助的信息。
flutter 里面都是简略信息 有帮助的很少

关注 2 回答 1

会煮咖啡的猫 发布了文章 · 10月13日

2020 macbook pro 16寸 前端开发 我的装机软件整理

系统

Homebrew

包管理工具,主要安装命令行工具

https://brew.sh/index_zh-cn

homebrew-cask

包管理扩展工具,主要安装 gui 工具

https://github.com/Homebrew/h...

git

源码控制

$ brew install git

iTerm2

shell 工具

https://www.iterm2.com/

powerline font

字体

https://github.com/powerline/...

firacode font

字体

https://github.com/tonsky/Fir...

zsh

shell 工具

$ brew install zsh

oh-my-zsh

zsh 集成工具

https://ohmyz.sh/

https://github.com/ohmyzsh/oh...

$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

autojump

zsh 插件 快速导航目录

https://github.com/wting/auto...

zsh-autosuggestions

zsh 插件 快速提示历史输入

https://github.com/zsh-users/...

zsh-syntax-highlighting

zsh 插件 美化显示

https://github.com/zsh-users/...

node & nvm

node 版本管理

https://github.com/nvm-sh/nvm

whistle

抓包管理

https://github.com/avwo/whistle

Charles

抓包管理 俗称水瓶

https://www.charlesproxy.com/

Bartender 3

顶部菜单项隐藏

https://www.macbartender.com/

CleanMyMac X

清理电脑

https://macpaw.com/cleanmymac

Docker

容器管理

https://www.docker.com/

Keka

压缩解压

https://www.keka.io/en/

Mounty

ntfs 磁盘读写

https://mounty.app/

工具

chrome

浏览器

https://www.google.cn/chrome/

edge

浏览器

https://www.microsoft.com/en-...

firefox

浏览器

http://www.firefox.com.cn/

sourcetree

git 管理

https://www.sourcetreeapp.com/

CheatSheet

快捷键提示

https://www.mediaatelier.com/...

alfred

阿芙管家

https://www.alfredapp.com/

snipaste

截图

https://docs.snipaste.com/zh-cn/

iShot

截图

https://apps.apple.com/cn/app...

licecap

gif 录制

https://www.cockos.com/licecap/

有道笔记

知识管理

http://note.youdao.com/

notion

知识管理

https://www.notion.so/

trello

知识管理

https://trello.com/

typora

markdown 写作

https://typora.io/

语雀

知识管理

https://www.yuque.com/

印象笔记

知识管理

https://yinxiang.com/

securecrt

ssh 客户端

https://www.vandyke.com/produ...

finalshell

ssh 客户端

https://www.hostbuf.com/

网页 MuMu

android 模拟器

https://mumu.163.com/mac/inde...

百度网盘

网盘

https://pan.baidu.com/

Downie 4

下载油管视频

https://software.charliemonro...

EasyRes

屏幕分辨率切换

http://easyresapp.com/

Free Download Manager

下载工具

https://www.freedownloadmanag...

iStat Menus

状态管理

https://setapp.com/

pap.er

壁纸管理

https://paper.meiyuan.in/

Parallels Desktop

虚拟机管理 工作用

https://www.parallels.com/

virtualbox

虚拟机管理 试验用

https://www.virtualbox.org/

vmware

虚拟机管理 试验用

https://www.vmware.com/hk.html

SwitchHosts!

切换 host

https://github.com/oldj/Switc...

Reeder 4

rss 阅读器

https://apps.apple.com/cn/app...

ScreenFlow

录视频

https://www.telestream.net/sc...

TeamViewer

远程写作

https://www.teamviewer.cn

draw.io

画图

https://www.diagrams.net/

Foxmail

轻巧邮件管理

https://www.foxmail.com/

Microsoft To Do

任务管理

https://todo.microsoft.com/

Microsoft Remote Desktop

远程 windows

https://www.microsoft.com/en-...

WPS Office

word ppt excel

https://www.wps.cn/

通讯

QQ、微信、企业微信、Telegram

央视影音

看电视 比赛 直播

https://app.cctv.com/appkhdxz...

IINA

播放器

https://iina.io/

solarized theme

多端样式配色

https://ethanschoonover.com/s...

开发

sublime

http://www.sublimetext.com/

vscode

https://code.visualstudio.com/

xcode

https://developer.apple.com/x...

android stuido

https://developer.android.com...

HBuilderX

https://www.dcloud.io/hbuilde...

微信开发者工具

https://developers.weixin.qq....

TinyPNG4Mac

图片压缩

https://github.com/kyleduo/Ti...

$ brew cask install tinypng4mac

dash

离线文档工具

https://kapeli.com/dash

postman

api 调试

https://www.postman.com/

adobe ps xd

设计

https://www.adobe.com/cn/

sketch

设计

https://www.sketch.com/

axure

原型设计

https://www.axure.com/

pxcook

标注工具

https://www.fancynode.com.cn/...

mindnode

思维脑图

https://apps.apple.com/cn/app...

diffmerge

文件比较

http://sourcegear.com/diffmerge

RedisDesktopManager

redis 管理客户端

https://github.com/uglide/Red...

DBeaver

多数据库 客户端

https://dbeaver.io/

Navicat Premium

mysql 客户端

http://www.navicat.com.cn/sto...

pdman

关系数据库设计工具

https://gitee.com/robergroup/...

GoLand

https://www.jetbrains.com/go/

IDEA

https://www.jetbrains.com/


© 猫哥

https://ducafecat.tech

https://ducafecat.gitee.io

查看原文

赞 0 收藏 0 评论 0

会煮咖啡的猫 发布了文章 · 9月4日

Flutter 2020 学习心得、学习路线

视频

https://www.bilibili.com/vide...

新人上手情况

  • 语言基础
  • 数据结构
  • 网络通信
  • 前端布局
  • 动画
  • 优化点

前端遇到的最大问题

  • 原生调试
  • 原生组件开发

聊聊学习动机

  • 单位工作需要
  • 自己兴趣开发 APP
  • 毕业设计
  • 漫无目的、漫无目的的学习

学习路线

https://github.com/olexale/fl...

资源

总结

最快的学习方式有个目标、看优秀源代码,完成你的作品、上线!


© 猫哥

https://ducafecat.tech

https://ducafecat.gitee.io

查看原文

赞 1 收藏 0 评论 0

认证与成就

  • 获得 106 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-24
个人主页被 1.9k 人浏览