react开发环境搭建

第一步：安装Nodejs，下载地址：https://nodejs.org/en/

第二步：使用webstorm打开你BI的前端项目文件夹

 

第三步：terminal运行如下命令

sudo npm install -g webpack

cd work

npm install

第四步：开启webpack编译，terminal执行如下命令[注意前提是cd到work目录]

webpack --progress --colors --watch

 

第五步：已完成，可以开始编写前端代码了

 

备注：该开发环境仅限于mock数据联调，若要联调线上接口，还得配置本地Nginx服务器。

 

nginx服务器配置：

步骤1：安装nginx ,如下是mac安装步骤  ( windows下载地址 http://nginx.org )

     启动终端，执行

     brew install nginx

     如果brew命令未安装，则执行如下命令先安装

     curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1

     sudo nginx ;访问localhost:8080 发现已出现nginx的欢迎页面了。

步骤2：配置nginx.conf文件，将原有server{}块用如下代码替换

server {

        listen       8089;

        server_name  localhost;

 

        #charset koi8-r;

 

        #access_log  logs/host.access.log  main;

 

        location / {

            root   html;

            index  index.html index.htm;

        }

 

        location /api {

                rewrite ^.+api/?(.*)$ /$1 break;

                proxy_pass https://bi-dev.qtonecloud.cn;

        }

 

        location /apiuc {

                rewrite ^.+apiuc/?(.*)$ /$1 break;

                proxy_pass http://uww-dev.thinkjoy.com.cn;

        }

 

        #error_page  404              /404.html;

        error_page 405 =200 @405;

        location @405 {

                proxy_method GET;

                proxy_pass http://localhost:8089;

        }

        # redirect server error pages to the static page /50x.html

        #

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

 

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80

        #

        #location ~ \.php$ {

        #    proxy_pass   http://127.0.0.1;

        #}

 

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

        #

        #location ~ \.php$ {

        #    root           html;

        #    fastcgi_pass   127.0.0.1:9000;

        #    fastcgi_index  index.php;

        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;

        #    include        fastcgi_params;

        #}

 

        # deny access to .htaccess files, if Apache's document root

        # concurs with nginx's one

        #

        #location ~ /\.ht {

        #    deny  all;

        #}

    }

 

步骤3：将bi前端项目部署到nginx服务器，{mac默认是nginx的www目录-/usr/local/var/nginx/www，window是html目录}

 

步骤4：启动nginx

mac命令：先cd到nginx的安装目录，默认是 /usr/local/etc/nginx

再执行命令：sudo nginx

配置更改了后需要重启

sudo nginx -s stop

sudo nginx

 

步骤5：访问http://localhost:8089/bi/work 即可访问当前项目【这里的bi是你本地的项目文件夹名称】

 

 

附注：BI前端项目结构介绍，模块文件夹都是按照功能划分的，相应的模块文件必须放置到对应文件夹以方便管理。

 

modules:  所有页面js文件都在这里

    appConfig: 应用配置页文件夹

    common:  公共模块文件夹

    dataAnalysis:  数据分析文件夹

    dataBasic: 基础数据管理

    dataOperate: 经营数据管理

    imgs:  图片文件夹

    less：样式文件夹

    systemManage: 系统管理

    app.js:  页面渲染文件

    router.js:  路由文件[react-router]

output: webpack编译输出文件夹

index.html:  页面

qtFrame:  startUp公共模块，类库，以及mock数据