uni-app自动引入多个全局组件“easycom”
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下或uni_modules目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。比如前述举例的uni-rate组件,它导入到uni-app项目后,存放在了目录/components/uni-rate/uni
·
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom
将其精简为一步。
只要组件安装在项目的components目录下或uni_modules
目录下,并符合components/组件名称/组件名称.vue
目录结构。就可以不用引用、注册,直接在页面中使用。
比如前述举例的uni-rate组件,它导入到uni-app项目后,存放在了目录/components/uni-rate/uni-rate.vue
同时它的组件名称也叫uni-rate,所以这样的组件,不用在script里注册和引用。 如下:
<template>
<view>
<uni-rate></uni-rate><!-- 这里会显示一个五角星,并且点击后会自动亮星 -->
</view>
</template>
<script>
// 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
不管components目录下安装了多少组件,easycom
打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。
组件库批量安装,随意使用,自动按需打包。以官方的uni-ui
为例,在HBuilderX新建项目界面选择uni-ui
项目模板,只需在页面中敲u,拉出大量组件代码块,直接选择,即可使用。大幅提升开发效率,降低使用门槛。
举例说明:
"easycom": {
"custom": {
"autoscan": true,
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
"asyi-(.*)": "@/easy-ui/components/asy-$1.vue"
}
},
创建test.vue
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)