0.1 启动 demo

0.1.1 Fork 项目

在 Github 上，你需要 Fork VChart 项目。

0.1.2 克隆项目

在你 fork 的仓库中，点击 Code 按钮，复制项目地址。然后使用 git clone 命令克隆项目到本地。例如：

git clone https://github.com/your-username/VChart.git

克隆完毕后需要添加 VChart 的远程地址。

git remote add upstream https://github.com/VisActor/VChart.git

这样以后你就可以从 VChart 的远程地址获取最新的源码。

git pull upstream develop

0.1.3 启动 demo

我们是用 @microsoft/rush 来管理 monorepo。所以先安装 rush。

npm install -g @microsoft/rush

接下来执行命令启动 demo。

*安装依赖*
$ rush update
*启动 vchart 的demo页*
$ rush start
*启动 react-vchart 的demo页*
$ rush react
*启动本地文档站点*
$ rush docs

0.1.4 启动 demo 的时候发生了什么？

当你运行 rush start 的时候，会启动 vchart 的 demo 页。可是具体发生了什么呢？

首先我们在 command-line.json 中配置了 start 命令：

{"commandKind": "global","name": "start","summary": "Start the development server","description": "Run this command to start vchart development server","shellCommand": "rush run -p @visactor/vchart -s start"},

所以我们得知 start 命令会执行 rush run -p @visactor/vchart -s start 命令。

让我详细解释 rush run -p @visactor/vchart -s start 这个命令：

这是一个 Rush 工具的命令，可以拆解为以下几个部分：

rush run：Rush 的子命令，用于在 monorepo 中运行特定项目的 npm 脚本
-p @visactor/vchart：-p 或 --project 参数，指定要运行脚本的项目名称，这里指定的是 @visactor/vchart 项目
-s start：-s 或 --script 参数，指定要运行的 npm 脚本名称，这里要运行的是 start 脚本

根据代码库，我们可以看到这个命令最终会执行 @visactor/vchart 包中 package.json 定义的 start 脚本：

ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser

这个命令前半部分是运行初始化脚本 initVite.ts，它的主要作用是生成 local 版本的 vite.config.local.ts 和 index.page.local.ts 文件，这两个文件是被 git 忽略的，用于本地开发的配置，后面会详细讲到。

后半部分的脚本 vite serve __tests__/runtime/browser是启动 demo 网页。

0.1.5 如何使用

该文件的默认内容为

import './test-page/area';

笼统的来说，它可以用来指定启动不同的 chart 页面。实际上它就是会运行不同文件的 VChart 表格生成代码，来达到网页启动不同的 chart 页面的效果。所以你只要 import 不同的文件，就可以启动不同的 chart 页面。

0.1.6 如何使用

这个文件主要用来配置端口和本地包。比如下面的配置：

export default {
  *// 启动端口*port: 4000,
  resolve: {
    alias: {
      '@visactor/vgrammar-core': '/path/to/visactor/VGrammar/packages/vgrammar-core/src/index.ts',
      '@visactor/vgrammar-util': '/path/to/visactor/VGrammar/packages/vgrammar-util/src/index.ts',
      '@visactor/vgrammar-wordcloud': '/path/to/visactor/VGrammar/packages/vgrammar-wordcloud/src/index.ts',
      '@visactor/vgrammar-wordcloud-shape': '/path/to/visactor/VGrammar/packages/vgrammar-wordcloud-shape/src/index.ts',
      '@visactor/vgrammar-sankey': '/path/to/visactor/VGrammar/packages/vgrammar-sankey/src/index.ts',
      '@visactor/vgrammar-hierarchy': '/path/to/visactor/VGrammar/packages/vgrammar-hierarchy/src/index.ts',
      '@visactor/vgrammar-projection': '/path/to/visactor/VGrammar/packages/vgrammar-projection/src/index.ts',
      '@visactor/vgrammar-coordinate': '/path/to/visactor/VGrammar/packages/vgrammar-coordinate/src/index.ts',
      '@visactor/vgrammar-venn': '/path/to/visactor/VGrammar/packages/vgrammar-venn/src/index.ts',
      '@visactor/vscale': '/path/to/visactor/VUtil/packages/vscale/src/index.ts',
      '@visactor/vdataset': '/path/to/visactor/VUtil/packages/vdataset/src/index.ts',
      '@visactor/vutils': '/path/to/visactor/VUtil/packages/vutils/src/index.ts',
      '@visactor/vrender-core': '/path/to/visactor/VRender/packages/vrender-core/src/index.ts',
      '@visactor/vrender-kits': '/path/to/visactor/VRender/packages/vrender-kits/src/index.ts',
      '@visactor/vrender-components': '/path/to/visactor/VRender/packages/vrender-components/src/index.ts'
    }
  }
};