资源依赖

本章节将会介绍组件编辑器如何导入或使用js/css/vue等依赖资源中。

资源路径

内部资源路径

内部资源基于组件所在的网站资源托管模块，根据资源在模块中的路径进行映射，如果需要在组件中引入一个JS文件。网站资源托管结构树如下：

.
├──js
│   └── main.js
└──ifc
    └── demo.ifc

在demo.ifc依赖main.js。依赖的资源路径为. + {资源全路径}，如当前示例中的资源路径：./js/main.js

注意：

不管组件所在的位置在哪里，导入的资源路径都是资源在网站模块中的全路径，如上述示例中，demo.ifc导入main.js，使用的路径为./js/main.js，而不是相对路径../js/main.js，也不是斜杠开头的全路径/js/main.js

外部资源路径

图片路径，全局导入JS/CSS等情况支持直接依赖远程资源URL，如https://www.informat.cn/assets/images/logo.svg

全局资源导入

在组件编辑页面【项目视图】>【设置】>【导入】>【导入的资源文件】进行全局的资源文件导入。

注意：

JS和CSS文件的导入需要以对应的文件后缀结尾，否则资源将不加载。如JS文件路径为https://webapi.amap.com/maps?v=2.0时，组件将不加载该文件，可添加对应后缀标识，如：https://webapi.amap.com/maps?v=2.0&name=amap.js

脚本内引用JS文件

脚本内支持引入内部JS资源，仅支持ES Module模块化。具体的使用方式如下:

import { formatDate } from './js/main.js';

export default {
    data(){
        return{
        }
    },
    filters:{
        formatDate
    }
}

依赖Vue组件

下面将以一个示例，说明如何在组件编辑器中使用Vue组件

1. 在组件所在的网站资源托管模块根目录创建Vue文件

2. 书写Vue组件逻辑

<style scoped>
.box{
    background:red;
    color:#fff;
    width:100%;
    height:100%;
}
</style>
<template>
    <div class="box">
        {{text}}
    </div>
</template>
<script>
export default{
    data(){
        return{
            text:'文本'
        }
    }
}
</script>

注意：

由于组件编辑器没有集成Sass/Less等CSS Loader，所以CSS需要使用原生CSS语法。 JS模块化也仅支持ES Module，所以代码中不支持引入其他模块化标准打包的资源。如,CommonJs中module.exports特有的模块化语法都是不支持的

3. 组件脚本内注册Vue组件，并使用

模板

<div style="width:100%;height:100%;position:relative">
    <VueComponent></VueComponent>
</div>

脚本

import VueComponent from './VueComponent.vue'
export default{
    components:{
        VueComponent
    }
}