uni-app: 创建一个uni-ui项目(hbuilderx 3.6.18)

标签：app 3.6 ui https 组件 uni com hbuilderx

一，查看组件的文档:

文档地址

https://uniapp.dcloud.net.cn/component/

如图:

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: [email protected]

二，创建uni-ui项目:

在hbuilderx中,文件->新建->项目: 类型选 uni-app 模板选择:uni-ui项目 输入项目名称后，点击 创建 按钮

三，查看效果:

运行后如图:  说明：页面上的链接使用了uni-link组件,能看到表示uni-ui组件已成功引入

四，使用uni-list组件:

代码:

<template>
    <view class="container">
        <!--
        <view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
        <text class="intro">详见：</text>
        <uni-link :href="href" :text="href"></uni-link>
        -->
        <uni-list>
            <uni-list-item title="列表文字" />
            <uni-list-item title="列表文字" rightText="右侧文字" />
            <uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />

            <uni-list-item >
                <template v-slot:body>
                    <view class="slot-box" style="background: #ff00ff;margin-left:-15px;margin-top:-12px;margin-bottom:-18.5px;">
                        <image class="banner" mode="aspectFill" src="http://img.lhdtest.com/ware/sowhatimg/ware/orig/2/39/39383.jpg" />
                    </view>
                </template>
            </uni-list-item>
            <uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
                <template v-slot:actions>
                    <image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
                </template>
            </uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                href: 'https://uniapp.dcloud.io/component/README?id=uniui'
            }
        },
        methods: {
        }
    }
</script>
<style>
    .container {
        padding: 0px;
        font-size: 14px;
        line-height: 24px;
    }
    .banner {
        width:750rpx;
        height:750rpx;
    }
</style>

五，uni-list的测试效果

六，查看hbuilderx的版本:

标签：app,3.6,ui,https,组件,uni,com,hbuilderx
From： https://www.cnblogs.com/architectforest/p/17113537.html