1、安装

npm 安装 AntV G6

npm install @antv/g6 --save

2、安装依赖

因 vue2老项目与新版 AntV G6不兼容性问题，直接运行会报错，因此需安装相应依赖，原因是由于@antv/graphlib 用了ES6 + 类属性语法，vue2老项目的 Webpack/Babel没转译这个语法。

2.1安装依赖

npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object --save-dev

2.2修改babel.config.js

 //babel.config.js 中 新增如下内容：
 module.exports = { 
    presets: [ '@vue/cli-plugin-babel/preset' ],
    plugins: [ 
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-private-methods',
        '@babel/plugin-proposal-private-property-in-object'
      ] 
}
 

2.3修改vue.config.js

关键！必须让 babel 转译 @antv 相关包

module.exports = {
    transpileDependencies: ['@antv']
}

3、在.vue文件中引入AntV G6

    import { Graph } from '@antv/g6';

4、在.vue文件中准备一个容器

5、在.vue文件创建一个图实例，传入配置对象，并调用 render 方法渲染图,完整代码如下：

6、npm run dev 效果图如下：