【项目】自整理REACT新架构简易流程

在执行以下操作之前，请先安装上适配本机的nodejs，可以去百度搜索最新版本。之后是安装svn。（有的话以下直接开始）。

 

找一个文件夹，使用 svn update出项目文件夹

进入viewsdev文件夹内操作以下步骤：

(首次进入时 一次性操作)

npm install

gulp base

(以下可重复操作)

然后就可以创建页面和组件了

创建页面:gulp new --page "页面名" (以t_whr为例)
或
创建组件:gulp new --plugin "组件名" (以tucao_soso为例)

gulp base

gulp dev -h

创建页面后

在 pgtest/config/config_html.json 中加入项

"/rbc/t/t_whr.html": {
    "page": "/t/t_whr"
}

在 pgtest/views_json 中新增一个页面名相同的(本地测试桩) t_whr.txt

内容初始为：

{
    "pageData": {
        
    },
    "pageConfig": {
        "ajaxHead": "//localhost:8088",
        "pageIndex": [
            
        ]
    }
}

启动tomcat服务器

然后在浏览器中访问 http://localhost:8088/rbc/t/t_whr.html，展示是一个无数据的空页面

 

本地测试：

(首次进入一次性操作)

进入 pgmock/apache-tomcat-8.0.23/webapps/PageGW/WEB-INF/classes/spring-core.xml

注释掉这块

重启tomcat服务器

 

本地组件测试：

(以下可重复操作)

启动代码自编译器：gulp dev -h

在t_whr.txt中加入组件的数据

在 viewsdev/static-dev/dev/t_whr/js/index.js 中引入组件

刷新查看页面效果

 

新增(修改)组件：

在viewsdev文件夹中

使用创建组件命令：gulp new --plugin "tucao_soso"

进入要访问页面的json配置文件 pgtest/views_json/t_whr.txt 配置数据

在 viewsdev/static-dev/plugin/tucao_soso/index.js 中开发组件代码

在 viewsdev\static-dev\plugin\tucao_soso\tucao_soso.sass 中开发组件样式

组件开发完成后，在 viewsdev/static-dev/dev/t_whr/js/index.js 中引入组件（同上本地组件测试的操作进行测试组件）

查看页面效果：