uni-ui控件使用配置步骤

• 1初始化项目
  如果是使用创建的项目，需先执行以下命令初始化：

npm init -y

• 2安装 uni-ui

npm install @dcloudio/uni-ui -D
备注：-D看你的项目在哪里盘里

• 3 打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json

{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },

    // 其他内容
    pages:[
        // ...
    ]
}

• 4在 script中引用组件：
  例如我们需要导入 uni-badge 组件

import {unibadge} from '@dcloudio/uni-ui'
export default {
    components: {unibadge}
}

方式3（vue-cli + easycom）

使用 方式2 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

如果单独引用某个案例如下：
List 列表
列表组件，组件名：uni-list、uni-list-item，代码块： uList。
使用方式：

在 script 中引用组件

import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
    components: {uniList,uniListItem}
}

List 一般用法

<uni-list>
    <uni-list-item title="标题文字" show-arrow="false"></uni-list-item>
    <uni-list-item title="标题文字"></uni-list-item>
    <uni-list-item title="标题文字" show-badge="true" badge-text="12"></uni-list-item>
    <uni-list-item title="禁用状态" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
</uni-list>

带描述信息

<uni-list>
    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>
    <uni-list-item title="标题文字" note="描述信息" show-badge="true" badge-text="12"></uni-list-item>
</uni-list>