2020 年初的一个周末,Facebook 工程师 Vojtech Rinik 注意到http://zwibbler.com/demo移除了一些基本的绘图功能,便突发奇想,决定重新创建一个简单的绘图工具。 Vjeux 除了是 Excalidraw 的作者之外,还是React Native、Prettier 的联合创始人,也是 CSS-IN-JS、Yoga、React Conf 的创建者。 Vojtech 在 Twitter 上分享...
Excalidraw 之所以被这么多人喜欢,还在于它的多样化集成体验。比如,有 VSCode 插件,可以直接在编辑器里画图;还能集成到任何 React 项目中,轻松适应各种场景需求。不管是用作个人笔记本、团队协作白板,还是随手搞个架构图,这工具用起来都顺手,关键是...
2020 年初的一个周末,Facebook 工程师 Vojtech Rinik 注意到zwibbler.com/demo移除了一些基本的绘图功能,便突发奇想,决定重新创建一个简单的绘图工具。 Vjeux 除了是 Excalidraw 的作者之外,还是React Native、Prettier 的联合创始人,也是 CSS-IN-JS、Yoga、React Conf 的创建者。 Vojtech 在 Twitter 上分享了他的...
1. 引入依赖 npm install react react-dom @excalidraw/excalidraw #或 yarn add react react-dom @excalidraw/excalidraw 2.添加配置 修改vite.config.js,添加如下配置: exportdefaultdefineConfig({...,define:{'process.env':{}},}) 3.页面使用 在Vue文件中的使用方式如下: <template> LZUGIS @lzu...
本文讲解开源白板工具 Excalidraw 的架构设计。 版本0.16.1 技术栈 Vite + React + TypeScript + Yarn + Husky。 脚手架原来用的是 Create React App,但这个脚手架已经不维护了,一年多没发布新版本了。 目前市面上比较流行的 React 脚手架是 Vite,所以几个月前 Excalidraw 把脚手架替换为了 Vite,很合理。
最近刚入职一家公司,主管让我研究一下Excalidraw。有一个需求需要用到画板,Excalidraw是开源的,某些功能如果通过传参无法做到,就需要二次开发。 目前遇到几个困难: 1. 如果通过传参来实现,Excalidraw是基于react的,而我们的项目是VUE框架,就无法直接使用基于react
开源白板工具 Excalidraw 的架构设计 Excalidraw 使用 Vite、React、TypeScript、Yarn 和 Husky 构建。原本的脚手架是 Create React App，但已不再维护。Vite 是当前流行的 React 脚手架，Excalidraw 选择替换以保持与社区同步。React 被用于实现 UI 层，国外开发者偏好此框架。TypeScript 提供了类型注解，...
代码语言:javascript 复制 npm install react react-dom @excalidraw/excalidraw #或 yarn add react react-dom @excalidraw/excalidraw 2.添加配置 修改vite.config.js,添加如下配置: 代码语言:javascript 复制 exportdefaultdefineConfig({...,define:{'process.env':{}},}) ...
Excalidraw是一个开源的虚拟手绘风格白板工具,使用 React 构建,上线于 2020 年 1 月,非常年轻。它提供了实时协作和端到端加密功能,让你的远程协作更有创意、更安全。Excalidraw 旨在为开发者和最终用户提供一个简单、直观且功能强大的绘图体验。 一个优秀的白板工具不仅要满足基本的绘图需求,更要为用户提供愉悦的创作...
在Vue项目中使用React组件 1、 安装vuera库 vuera库地址:https://www.npmjs.com/package/vuera npm i -S vuera 安装依赖 由于我们需要在Vue中使用React组件,所以首先需要在项目中安装React,安装指令如下: npm install --save react react-dom 3、在Vue中,是无法识别jsx语法的,所以需要安装依赖来识别react-js...