Practical skills that must be mastered in calling UNI-APP components in the easycom mode

This article is intended to be a starting point for discussion. For detailed documentation and easycom specifications, please visit the uni-app official website. 【Portal】easycom mode description

Introduction to easycom component mode

• Easycom component mode is supported since HBuilderX 2.5.5. If the HBuiderX version is lower, please check for updates first!
  

uni-app is developed based on VUE. Usually, components are installed first, then imported and registered globally or locally. Then you can use the corresponding components in the page. The process is rather cumbersome, but uni-app uses the easycom component model to simplify the above three steps, allowing users to use components directly on the page without referencing or registering them. Of course, the premise is to follow certain easycom specifications. The actual use effect is as follows:

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="First row"></uni-list-item>
            <uni-list-item title="Second row"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // There is no need to import or register the uni-list component in components. In template, you can directly use export default {
        data() {
            return {

            }
        }
    }
</script>

uni-app default easycom specification

If you want to use components directly in the page like the above code block, you need to follow the following specifications when installing components or customizing components:

• Component files must be placed in the components directory.
• The .vue file corresponding to the component must be placed in the file directory with the same name as the component.
• The text description may not be very clear, just look at the effect picture:
  

Taking the uni- components/uni-swipe-action/uni-swipe-action.vue

Custom component placement directory

• The default easycom specification of uni-app is to place components in the components directory
• At the same time, uni-app also allows us to modify the default directory and matching rules for component placement;
  

Easycom is automatically enabled and does not need to be enabled manually. If needed, you can customize the settings in the easycom routine in pages.json , such as turning off automatic scanning or customizing the strategy of the scan matching component. Set the parameters as follows:

The official reference custom configuration rules are as follows:
[Match vue files inside node_modules]

"easycom": {
  "autoscan": true,
  "custom": {
    "uni-(.*)": "@/components/uni-$1.vue", // Matches vue files in the components directory "vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // Matches vue files in node_modules}
}

uVIew ​​configuration rules are as follows:
[Match uview components starting with u- in the uview/components directory]

{
	// This is the content that needs to be added "easycom": {
		"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
	},
	
	// This is the existing content "pages": [
		// ......
	]
}

Benefits of using easycom

1. Simplify the use of components and improve development efficiency
2. No matter how many components are installed in the component directory, easycom will automatically remove unused components after packaging, which is particularly friendly to the use of component libraries.

This concludes the article on the practical skills that must be mastered for calling UNI-APP components in easycom mode development. For more relevant easycom mode UNI-APP component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!