第一步:安装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 )
步骤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数据