Antv G2图表可视化 使用npm构建工程

1. 安装npm

1.1 下载并安装

引入https://www.runoob.com/nodejs/nodejs-install-setup.html

首先到官方网站https://nodejs.org/en/download/下载node.js的安装包，比如我的是Windows版本。

下载安装完成之后，在命令行输入node --version检查是否安装成功。

1.2 配置国内镜像

参考https://www.cnblogs.com/luyuandatabase/p/12145707.html

为了方便以后的资源下载，这里要配置国内镜像，方法如下。

1. 命令

npm config set registry https://registry.npm.taobao.org

2. 验证命令

npm config get registry

如果返回https://registry.npm.taobao.org，说明镜像配置成功

2. 克隆项目

2.1 访问官网示例项目

随便找一个项目，比如https://g2.antv.vision/zh/examples/other/other#word-cloud-mask，点击右边代码块中的CodeSandBox，进入自带的沙盒模拟器。

2.2 进入沙盒模拟器下载压缩包

进入沙盒后，将项目下载到本地，这样你可以得到一个压缩包。

3. 构建项目

3.1 在当前目录启动命令行

解压文件，在当前目录下启动命令行。
注意：这里的所有当前目录都不要用shell窗口来运行，会非常的慢。请在当前目录下的这里执行cmd，打开命令行窗口

3.2 进行依赖库的下载

首先运行npm install，这一步会下载很多的依赖包库。

npm install

下载完毕后，会在当前目录下添加node_modules的文件夹，里面有我们所需要的所有包

3.3 进一步添加资源

接下来执行npm install @antv/g2 --save，命令行的内容与上面较为相似。

npm install @antv/g2 --save

（我这里文件夹的名字从o7nqd变成了870bk，这是因为我写博客的时候测试了好几个项目导致错屏截图了，请不要见怪。实际上，你就是应该在o7nqd这个文件夹目录下执行上述操作的）

3.4 启动服务

此时如果执行npm start server，会报以下错误;

npm start server

检查项目的src目录，我们可以看到没有index.js这个文件，只有index.ts这个文件

据此我们需要修改两处地方，分别是

1. index.ts的文件名，修改成index.js
   

2. 修改package.json文件里的内容
   

为了防止误会特此声明：上述的截图是我为了更好的显示文件目录，在编译器VScode中截取的，并不是在SandBox沙盒模拟器中截取的。只要你有文本编辑器，比如txt、Sublime Text、note pad++等等都可以完成这些操作

保存上述修改，然后再去运行npm start server，此时服务会自动启动，在默认的http://localhost:3000/就能看到出的图了。

npm start server

4. 可视化本地json数据

以刚才的demo为例，如果想要运行本地的json数据的话，只需要把文件放到public目录下，就可了。