【uni-app】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>
使⽤步骤:
1. 在pages.json配置以下参数
2、组件引⼊符合命名规则
3、在页⾯会⾃动引⼊
flutter uniapp 哪个好使⽤easycom的好处
1、简化组件的使⽤,提⾼开发效率
2、不论组件⽬录下安装了多少组件,easycom打包后会⾃动剔除没有使⽤的组件,对组件库的使⽤尤为友好。
说明
easycom⽅式引⼊的组件⽆需在页⾯内import,也不需要在components内声明,即可在任意页⾯使⽤
easycom⽅式引⼊组件不是全局引⼊,⽽是局部引⼊。例如在H5端只有加载相应页⾯才会加载使⽤的组件
在组件名完全⼀致的情况下,easycom引⼊的优先级低于⼿动引⼊(区分连字符形式与驼峰形式)
考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页⾯内容触发。
easycom只处理vue组件,不处理⼩程序专⽤组件(如的wxml格式组件)。不处理后缀为.nvue的组件。但vue组件也可以全端运⾏,包括⼩程序和app-nvue。可以参考uni ui,使⽤vue后缀,同时兼容nvue页⾯。
nvue页⾯⾥引⽤.vue后缀的组件,会按照nvue⽅式使⽤原⽣渲染,其中不⽀持的css会被忽略掉。这种情况同样⽀持easycom
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论