F1V3.0-18 快速开发一个UI模块

文章主要介绍如何在V3.0的前端开发环境上部署一个新前端项目，具体的前端环境搭建请参看：前端开发环境搭建

请注意，在参看这篇文章之前如果对nginx的使用有不理解的地方，还请参看Nginx F1平台3.0的配置和使用，这篇文章中也提到了新项目的构建，具体的步骤请阅读下文

1 新项目放置位置

nginx会有以下几个变量

#########################  设置全局变量  ##########################
# bundle的扩展目录名
set $extend "extend";
# bundle的当前目录名（开发环境为src， 生产环境为dist）
set $switch "src";
# bundles的根目录
set $rootpath "E:\work\F1V3.0\f1-platform-modules";
# zuul的地址
set $zuulPath "http://192.168.1.20:8081";
# uaa授权服务器的地址
set $authorizationServicePath "http://192.168.1.20:8080";
# index的配置
set $indexPath "permission/views/team1/enter.html";
###################################################################

$rootPath配置的位置就是新模块存放的位置

2 新模块的构建规范

如果要新添加一个业务模块，就把这个业务模块放到之前$rootpath设置到的那个路径下边就可以了，这样通过nginx的路由就可以访问到这个路径下的静态资源了，这个业务模块要按照以下步骤构建：

(1) 以‘F1UI_模块名_bundle‘这种形式命名模块，如：F1UI_permission_bundle

(2) 模块下所有的文件放到src目录下，如下图：

这里的src目录为开发环境，经过gulp打包会产生一个同级的dist目录，这里两种环境的区分请参考：gulp 打包

3 添加nginx代理

新添加了一个新的模块要到nginx添加代理，和其他的location块一样，只需要根据新模块修改下图两个部分就可以。

## new 微服务 ##
## new根据业务模块访问的地址配置
location ^~ /new/ {
    set $temple $extend;
    ## F1UI_new_bundle为新配置的业务模块名
    alias $rootpath/F1UI_new_bundle/$temple/;
    if (!-e $request_filename) {
        set $temple $switch;
    }
}

如上图的例子中，配置了一个名叫“F1UI_new_bundle“的模块，访问‘new‘的时候会路由到这个模块下。详细的新增模块的nginx配置实例亲参看Nginx F1平台3.0的配置和使用的第四节

接下来重启nginx就可以了：nginx -s reload

4 html文件编写（引入三方组件、平台组件）

新建一个html，要添加平台组件和三方包的引用，以及业务模块使用到的三方插件，要使用如下方式添加：

(1) 添加base标签

将如下代码添加到head标签中，用来配置base标签

<script type="text/javascript">
    var getRootPath = function () {
        //Path名称
        var pathName = window.location.pathname.substring(1);
        //rootPat路径
        return window.location.protocol + '//' + window.location.host + '/';
    };
    //设置rootPath;
    document.writeln("<base href='" + getRootPath() + "'/>");
</script>

(2) 先引用平台依赖的三方包

<script type="text/javascript" src="/public/dll.bundle.js"></script>

(3) 再引用平台组件包

<script type="text/javascript" src="/jquery/scripts/widget.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery/css/blue/widget.bundle.css">

(4) 引用业务模块使用到的三方插件包（例如echarts）

平台提供了F1UI_plugins_libraries来存放这些业务模块使用到的三方包，把要使用的三方包放到这个模块下，例如echarts：

引用的路径如下

<script src="/plugins/echarts/build/dist/echarts.js"></script>