位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 3.2.4 easycom
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 3.2.3 pages 下一篇: 3.2.5 tabBar

3.2.4 easycom

HBuilderX 2.5.5起支持easycom组件模式。

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

<template>

    <view>

        <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打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。

组件库批量安装,随意使用,自动按需打包。以官方的uni-ui为例,在HBuilderX新建项目界面选择uni-ui项目模板,只需在页面中敲u,拉出大量组件代码块,直接选择,即可使用。大幅提升开发效率,降低使用门槛。

uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件,均可直接使用。

easycom是自动开启的,不需要手动开启,有需求时可以在pages.jsoneasycom节点进行个性化设置,如关闭自动扫描,或自定义扫描匹配组件的策略。设置参数如下:

属性

类型

默认值

描述

autoscan

Boolean

true

是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件

custom

Object

-

以正则方式自定义组件匹配规则。如果autoscan不能满足需求,可以使用custom自定义匹配规则

自定义easycom配置的示例

小白教程网www.2d5.net

如果需要匹配node_modules内的vue文件,需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则,其中packageName为安装的包名,/path/to/vue-file-$1.vuevue文件在包内的路径。

"easycom": {

  "autoscan": true,

  "custom": {

    "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件

    "vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件

  }

}

说明

l  easycom方式引入的组件无需在页面内import,也不需要在components内声明,即可在任意页面使用

l  easycom方式引入组件不是全局引入,而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件

l  在组件名完全一致的情况下,easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式)

l  考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。

l  easycom只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件,建议参考uni ui,使用vue后缀,同时兼容nvue页面。

l  nvue页面里的.vue后缀的组件,同样支持easycom


【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512


(2)uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059


(3)基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977


(4)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com


上一篇: 3.2.3 pages 下一篇: 3.2.5 tabBar
毕业设计网             广告联系QQ:45157718(微信同号)