#开发需要组件
> npm i webpack webpack-dev-server webpack-cli -D
* vue-loader :处理.vue文件
* vue-style-loader:处理.vue里面的样式
* vue-template-compiler:编译.vue中template里面的内容
> npm i css-loader file-loader url-loader babel-loader html-webpack-plugin less less-loader vue-loader vue-style-loader vue-template-compiler -D
* es6 转 es5
> npm i @babel/core @babel/cli @babel/preset-env -D
* ui框架资源按需引入
> npm i babel-plugin-component -D
* 处理 svg
> npm i raw-loader -D

#服务器打包组件
>npm i child_process -S

#运行时组件
>npm i vue -S
>npm i vue-router -S
>npm i vuex -S
>npm i md5 -S
* localStorage,sessionStorage,cookieStorage
>npm i js-storage -S 
* UI框架
>npm i element-ui -S
* json代码格式化 编辑框
>npm i vue-json-editor -S
* 异步请求
>npm i axios -S

*  模板端修改步骤
+  1、在通用组件中添加编辑组件
```增加数据同步更新 功能需要
	state = {
		data: {
			list: []
		}
	}
	componentWillReceiveProps(props) {
		const {data} = props;
		this.setState({data});
	}
//data为数据 mId为组件唯一名称与tplMcode文件中对应-通过构造函数获取组件名称  upData函数用于数据同步跟新展示
 <EditTpl data={data} mId={this.constructor.name} upData={data=>this.setState({data})}></EditTpl>
```
![组件修改图例](README_files/1.jpg)

```请求数据 及 组件
请求参数  {
	mId:'BaseInfo',//组件名称
	id:'llx001',//数据ID 顶级直接写死 与 默认数据顶级数据ID相同
}
```
* 部署
* 1、后台前端
* 2、数据服务  代理 /defdata
* 3、大屏模板  代理 /screen
+ 	1、数据服务 代理 /defdata(如果不通过模板域名访问可不配置)
+ 	2、后台数据 代理 /htdata(如果不通过模板域名访问可不配置)
* 4、后台数据  代理 /htdata
* 5、配置穿透域名 lldp lldpscreen



# nginx 反向代理配置

        location /htdata/
        {
            proxy_pass http://127.0.0.1:8104/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;

            add_header X-Cache $upstream_cache_status;

            #Set Nginx Cache

                add_header Cache-Control no-cache;
        }


        #PROXY-START/screen

        location /screen/
        {
            proxy_pass http://127.0.0.1/;
            proxy_set_header Host gzqlyxbight.hongweisoft.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;

            add_header X-Cache $upstream_cache_status;

            #Set Nginx Cache

                add_header Cache-Control no-cache;
        }

        #PROXY-END/screen


        #PROXY-START/amapData

        location /amapData/
        {
            proxy_pass http://restapi.amap.com/;
            proxy_set_header Host restapi.amap.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;

            add_header X-Cache $upstream_cache_status;

            #Set Nginx Cache

                add_header Cache-Control no-cache;
        }

        #PROXY-END/amapData

        #PROXY-START/forest-admin

        location /forest-admin/
        {
            proxy_pass http://127.0.0.1:9099/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;

            add_header X-Cache $upstream_cache_status;

            #Set Nginx Cache

                add_header Cache-Control no-cache;
        }

#PROXY-END/forest-admin