精易论坛

标题: 【零基础学会uniapp系列】7.2 组件库的使用 [打印本页]

---

作者: 项目部002    时间: 2021-10-25 10:20
标题: 【零基础学会uniapp系列】7.2 组件库的使用

7.2 组件库的使用

准备：新建项目时，选择新建 Hello uni-app模板，创建一个示例的组件库。

组件文档说明

组件库的使用

easycom组件规范 (自动引入组件)

HBuilderX 2.5.5起支持

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

• 组件安装在项目的components目录下或uni_modules目录下


• 符合components或uni_modules/组件名称/组件名称.vue目录结构。

例如：components/uni-rate/uni-rate.vue

此时，uni-rate，不用在script里注册和引用，就可以直接使用了。

<template>

        <view>

            <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->

        </view>

    </template>

<script>

    // 这里不用import引入，也不需要在components内注册uni-rate组件。template里就可以直接用

    export default {

        data() {

            return {



            }

        }

    }

</script>

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

easycom是自动开启的，不需要手动开启

手动引用组件

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

• 
  

  import导入组件

  
  


• 
  

  components里注册组件

  
  


• 
  

  template中使用组件

  
  

<template>

        <view>

            <uni-rate text="1"></uni-rate><!-- 3.使用组件 -->

        </view>

    </template>

    <script>

        import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件

        export default {

            components:{

                uniRate

            }//2.注册组件

        }

    </script>

---

本课参考链接：

https://uniapp.dcloud.net.cn/component/README?id=uniui

home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流，请到： https://125.confly.eu.org/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：326576256

视频教程在线观看：https://www.eyuyan.tv/?mod=play&tvid=3226

课件下载： 【从资源网下载】

从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn

---

欢迎光临 精易论坛 (https://125.confly.eu.org/)

Powered by Discuz! X3.4