Resource Dependencies

This chapter will introduce how to import or use dependency resources such as js/css/vue in the Component Editor.

Resource Paths

Internal Resource Paths

Internal resources are based on the Website Resource Hosting module where the component is located, mapped according to the resource's path in the module. If you need to import a JS file in a component, suppose the Website Resource Hosting structure tree is as follows:

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

Here, demo.ifc depends on main.js. The dependent resource path is . + {full resource path}, so in this example, the resource path is ./js/main.js

Note:

Regardless of where the component is located, the imported resource path is the full path of the resource in the website module. For example, in the above example, demo.ifc imports main.js using the path ./js/main.js, not the relative path ../js/main.js or the full path starting with a slash /js/main.js

External Resource Paths

For image paths and globally imported JS/CSS, remote resource URLs are supported directly, such as https://www.informat.cn/assets/images/logo.svg

Global Resource Import

Import global resource files in the component editing page under [Project View] > [Settings] > [Import] > [Imported Resource Files]

Note:

The import of JS and CSS files needs to end with the corresponding file suffix, otherwise the resources will not be loaded. For example, if the JS file path is https://webapi.amap.com/maps?v=2.0, the component will not load this file. You can add the corresponding suffix identifier, such as: https://webapi.amap.com/maps?v=2.0&name=amap.js

Import JS Files in Script

The script supports importing internal JS resources, and only supports ES Module modularization. The specific usage is as follows:

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

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

Depend on Vue Components

The following is an example that illustrates how to use Vue components in the Component Editor

1. Create a Vue file in the root directory of the Website Resource Hosting module where the component is located

2. Write Vue component logic

<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>

Note:

Since the Component Editor does not integrate CSS Loader for Sass/Less, CSS needs to use native CSS syntax. JS modularization only supports ES Module, so the code does not support importing resources packaged with other modular standards. For example, the modular syntax unique to CommonJs like module.exports is not supported.

3. Register Vue components in the component script and use them

Template

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

Script

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