(easycon) uniapp中easycom用法实例详解 uniapp框架新特性EasyCom 全网首发(图文详解1)

(easycon) uniapp中easycom用法实例详解

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可编译到iOS，Android，Web以及各种小程序等多个平台。

EasyCom模式是uni-app的一种新的组件引用模式，它的主要好处是简化了组件的引用，使得书写更为便捷。

以下是一个实际例子来详解EasyCom在uni-app中的用法。首先，你需要在项目中一个叫 “components” 的文件夹里存放你所有的组件。

组件的创建

在 components 文件夹下创建一个文件夹命名为 uni-badge

在该文件夹下创建一个 uni-badge.vue的文件,然后添加以下代码：

<template>
<view class="uni-badge">{{text}}</view>
</template>
<script>
export default {
    props: {
        text: {
            type: String,
            default: ''
        }
    }
}
</script>
<style>
.uni-badge {
    /* 添加你自己的样式 */
}
</style>

组件的引用

在你需要使用这个组件的页面里，你无需任何的import和components配置,直接使用就可以，例如：

<template>
<view>
    <uni-badge text="消息"></uni-badge>
</view>
</template>

配置开启 EasyCom

EasyCom默认不启用，你需要手动开启这个功能。打开pages.json,在全局配置下增加easycom配置：

"globalStyle": {
    "usingComponents": true
},
"easycom": {
    "autoscan": true,
    "custom": {
        "^uni-(.*)": "@/components/uni-$1/uni-$1.vue"
    }
}

以上这个配置表示，自动扫描components目录下的组件，并规定了组件名的书写规则。”^uni-(.*)” 表示组件名要以uni-开头。

那么当你在模板中写 <uni-badge> 时，自动去 components 里找 uni-badge 组件。如果你的组件不需要 uni- 前缀, 你可以配置为 "^(.*)": "@/components/$1/$1.vue"

以上就是EasyCom的基本使用方式，它无疑使组件的使用变得更简便。如果你需要对每个组件进一步的优化和定制，还可以考虑使用EasyCom的pro版本，这个版本支持组件的按需引入，减少了不必要的代码。
(python 路径) Python中文件路径常用操作总结文件路径操作：Python中的os和shutil模块全网首发(图文详解1)
(vue extend) Vue中mixin和extends的使用方法详解 Vue 中 mixin 和 extends 的使用: 全网首发(图文详解1)