How to download plug-ins in uni-app

Method: 1. Download the component and extract it to the uni-app root directory; 2. Import the component in the specified page, with the syntax "import component name from "component file address""; 3. Define it in the components option Component; 4. In the template node, follow the component usage instructions, call the component and pass the value.

The operating environment of this tutorial: Windows 7 system, uni-app version 2.5.1, DELL G3 computer.

This article takes badge (digital badge) as an example to explain how to download and import components from the plug-in market.

1. Download the component

From the plug-in market badge details page, click the "Download" button. After the download is complete , extract it to the uni-app root directory.

2. Import components

Assume that page-a.vue page needs to use badge, then ## Import the badge component under the script node of #page-a.vue, as follows:

import uniBadge from "@/components/uni-badge/uni-badge.vue"

3. Define the component

Define the

badge component in the components option, as follows:

export default {  
    data() {  
        return { /* ... */ }  
    },  
    components: {  
        uniBadge  
    }  
}

If you download and use multiple components from the plug-in market, each component They all need to be defined in the

components option and separated by commas.

4. Use the component

In the

template node, follow the component usage instructions, call the component and pass the value, as follows:

<uni-badge text="1"></uni-badge>  
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>

The complete code example is as follows:

  
<script>  
    import uniBadge from &quot;@/components/uni-badge/uni-badge.vue&quot;  
    /* import 导入的其它组件 */  

    export default {  
        data() {  
            return { /* ... */ }  
        },  
        components: {  
            uniBadge,  
            /* 其它组件定义 */  
        }  
    }  
</script>

Recommended learning:

Uni-App from entry to practical tutorial

The above is the detailed content of How to download plug-ins in uni-app. For more information, please follow other related articles on the PHP Chinese website!