欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniapp组件引入方法(easycom自动化组件)

程序员文章站 2022-07-12 15:17:33
...

uniapp官方与2020年02月23更新了2.6.0版本,支持2.5.5版本以后,调整内容有:
1.对uniapp插件做出更改;
2.新增了easycom项目模板(自动化组件)。

那我本期简单给大家介绍easycom是什么?如何使用?
官方给出

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。 如下:

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

不管components目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。

上面或许大家知道有这样一个思想,但是还是不知道怎么使用,接下来直接上手。

  1. 在pages.json配置以下参数
    uniapp组件引入方法(easycom自动化组件)

  2. 组件引入符合命名规则
    uniapp组件引入方法(easycom自动化组件)

3.在需要使用的vue项目中引用
uniapp组件引入方法(easycom自动化组件)
easycom组件模式使用大体如上所示。
特别注意:

1.easycom方式引入的组件无需在页面内import,也不需要在components内声明,即可在任意页面使用
2.easycom方式引入组件不是全局引入,而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
3.在组件名完全一致的情况下,easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式)
4.考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。
5.easycom只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件,建议参考uni ui,使用vue后缀,同时兼容nvue页面。
6.nvue页面里的.vue后缀的组件,同样支持easycom