点滴(DianDi)前端工程

工程构建

安装依赖：

yarn install

npm install会安装失败，只能通过Yarn安装依赖。

启动本地调试：

npm run dev

构建发布产物：

npm run prod

许可证

GPLv3

参考资料

设计

• The problem with dropdown fields (and what you should use instead): 下拉选择框的利弊及其替换方案。下拉隐藏了可选项，增加了用户点击量，降低了使用效率

技术

• A guide to Native code and Effect Managers in Elm - Part 1: Commands: Elm 原生代码编写方案，仅适用于自编译 Elm 编译器的情况。 也可以在 Node 项目中通过 NodeJs 将指定目录的原生代码打包放在~/.elm/0.19.1/packages/elm/下的方式实现。 注：必须在elm/或elm-explorations/目录下才会被识别为 Elm 内部包，以实现原生代码的加载

• elm/browser: 编写 URL 路由的单页面应用

• elm/http: 如何做 HTTP 请求

• NoRedInk/json-decode-pipeline: JSON 编解码库

• dillonkearns/elm-markdown: Elm Markdown 解析库

  • Custom HTML Block Rendering (with elm-ui): 通过 Elm UI 渲染 Markdown，可以自定义样式，对自定义标签的渲染等

• Elm Ui Widgets: Elm UI 组件库

  • 演示

• Elm Simple Animation: 通过构造 CSS 实现的动画，无状态，不需要更新模型

  • Elm Animator: 有状态的动画，需要更新模型，但可提供更加复杂和高级的动画控制

• arsduo/elm-ui-drag-drop: 支持 Elm UI 的拖拽库

• dnd-list + Elm UI: 支持 Elm UI 的拖拽库

• Rich Text Editor Toolkit Markdown example: 支持 Markdown 的富文本编辑器，基于contenteditable实现，可学习其数据结构的划分

• Mini-Rte: 简单的文本编辑器，采取自绘方案，代码较少，有利于从底层学起

• Material Design Components: Material Design 组件样式

• Ant Design Icons for Elm: Elm 的 Ant Design Svg 图标

  • 图标列表: 方便查看

• Deep dive CSS: font metrics, line-height and vertical-align: 文本行距与垂直对齐原理

• 箭头导航的实现

• What is JavaScript's CompositionEvent?: 对CompositionEvent的解释，其为 IME 输入时的事件，可用于正确处理输入法输入的字符