普加甘特图和Vue、React、angularJS等框架的集成

felt

普加甘特图和Vue框架的集成
1、 创建一个Vue项目
     vue init webpack vue-gantt-demo  
     npm install


2、拷贝   
   把普加甘特图试用包内的scripts文件夹拷贝到项目内static文件夹下
   这个scripts文件夹内包含了普加甘特图的试用版的js文件
   之外，还有2个示例文件 （这两个文件在vue-gantt-demo的压缩包内）
   project.txt文件           示例没有后台加载，所以我们用了这静态数据，真实环境可以是后台返回数据
   GanttController.js      包含一个创建甘特图的方法。甘特图的生成，操作代码都可以在这里处理

3、引用  
   index.html内
   引入甘特图的js  boot.js和GanttController.js

4 、创建
   src文件夹内处理
   components下 创建Gantt.vue模板

    app.vue内引入Gantt控件

5、执行npm run dev运行项目

这压缩包里是相关代码，新建一个vue项目之后把这几个文件拷贝覆盖就可以了

-----------------------------------------------------------------------------------------------------------------------------------------------------------

普加甘特图和React框架的集成
1、创建一个React:项目
      npm install -g create-react-app
      create-react-app react-gantt-demo

2、拷贝   
   把普加甘特图试用包内的scripts文件夹拷贝到项目内public文件夹下
   这个scripts文件夹内包含了普加甘特图的试用版的js文件
   之外，还有2个示例使用到文件（这两个文件在react-gantt-demo的压缩包内）
   project.txt                 示例没有后台加载，所以我们用了这静态数据，真实环境可以是后台返回数据
   GanttController.js      包含一个创建甘特图的方法。甘特图的生成，操作代码都可以在这里处理

3、引用  
   public/index.html内
   引入甘特图的js  boot.js和GanttController.js

4、创建
   src/app.js内创建模板和使用

5、执行npm start运行项目
这压缩包里是相关代码，新建一个React项目之后把这几个文件拷贝覆盖就可以了

-----------------------------------------------------------------------------------------------------------------------------------------------------------
普加甘特图和AngularJs框架的集成
1、 创建一个AngularJs项目
     npm install -g @angular/cli
     ng new angular-gantt-demo
2、拷贝   
   把普加甘特图试用包内的scripts文件夹拷贝到项目内src/assets文件夹下
   这个scripts文件夹内包含了普加甘特图的试用版的js文件
   之外，还有2个示例文件 （这两个文件在angular-gantt-demo的压缩包内）
   project.txt文件           示例没有后台加载，所以我们用了这静态数据，真实环境可以是后台返回数据
   GanttController.js      包含一个创建甘特图的方法。甘特图的生成，操作代码都可以在这里处理

3、引用  
   src/index.html内
   引入甘特图的js  boot.js和GanttController.js

4 、创建
   src/app文件夹内处理
   app.component.ts            创建模板

   app.component.html         模板页面内创建div块，用于渲染甘特图


   

5、执行ng serve --open运行项目

这压缩包里是相关代码，新建一个angularJs项目之后把这几个文件拷贝覆盖就可以了