【亲测免费】 Excalidraw 安装和配置指南

1. 项目基础介绍和主要编程语言

项目基础介绍

Excalidraw 是一个开源的虚拟白板工具，专为绘制手绘风格的图表、线框图或其他图形设计而设计。它支持无限画布、手绘风格、暗模式、图像支持、形状库支持、本地化支持等功能。Excalidraw 的核心是一个 npm 包，可以轻松集成到你自己的应用中。

主要编程语言

Excalidraw 主要使用以下编程语言和工具：

• TypeScript: 主要编程语言，用于编写应用逻辑和组件。
• JavaScript: 用于部分脚本和配置文件。
• HTML/CSS: 用于页面结构和样式。
• SCSS: 用于更高级的样式编写。

2. 项目使用的关键技术和框架

关键技术和框架

• React: 用于构建用户界面的 JavaScript 库。
• npm/yarn: 包管理工具，用于安装和管理项目依赖。
• Webpack: 模块打包工具，用于构建和打包项目。
• ESLint: 代码质量工具，用于检查和修复代码中的问题。
• Prettier: 代码格式化工具，用于统一代码风格。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装之前，请确保你的开发环境已经安装了以下工具：

• Node.js: 版本建议为 14.x 或更高。
• npm 或 yarn: 用于管理项目依赖。
• Git: 用于克隆项目仓库。

安装步骤

步骤 1: 克隆项目仓库

首先，你需要从 GitHub 上克隆 Excalidraw 的仓库到本地。

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw

步骤 2: 安装依赖

进入项目目录后，使用 npm 或 yarn 安装项目依赖。

使用 npm:

npm install

使用 yarn:

yarn install

步骤 3: 配置环境变量

Excalidraw 项目使用了一些环境变量来配置开发和生产环境。你可以在项目根目录下找到 .env.development 和 .env.production 文件，根据需要进行配置。

步骤 4: 启动开发服务器

安装完依赖并配置好环境变量后，你可以启动开发服务器来运行项目。

使用 npm:

npm start

使用 yarn:

yarn start

启动后，你可以在浏览器中访问 http://localhost:3000 来查看 Excalidraw 的运行效果。

步骤 5: 构建项目

如果你需要构建项目以进行生产部署，可以使用以下命令：

使用 npm:

npm run build

使用 yarn:

yarn build

构建完成后，生成的文件将位于 build 目录中，你可以将其部署到任何静态文件服务器上。

总结

通过以上步骤，你已经成功安装并配置了 Excalidraw 项目。你可以根据自己的需求进一步定制和扩展这个强大的开源工具。如果你在安装过程中遇到任何问题，可以参考项目的 GitHub 页面或社区论坛寻求帮助。