1）uni-ui 是全端兼容的基于flex布局的ui库；
2）可使用 npm 的安装使用方式，也可下载相关组件直接使用；
3）uni-ui 不支持使用 Vue.use() 的方式安装
4）uni-ui 依赖 scss，如果 HBuilderX 中建立的 uni-app 项目，须要在 HBuilderX 中安装 scss 插件；若是是使用 cli 建立的 uni-app 项目，须要在项目下npm安装 node-sass 和 sass-loadercss
在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：vue
npm init -y
npm install @dcloudio/uni-ui
在 script 中引用组件：node
<script> import {uniCard, uniPagination} from '@dcloudio/uni-ui' // 也可以使用此方式引入组件 // import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' export default { components: { uniCard, uniPagination }, data() { return { title: '快陪练', extra: '教育科技公司', note: '拓展钢琴陪练业务', thumbnail: require('../../static/capitalDetail.png'), isFull: true } } } </script>
在 template 中使用组件：npm
<template> <view class="homework-ctn"> <uni-card :title='title' :isFull="isFull" :note="note" :thumbnail="thumbnail" :extra="extra"></uni-card> <uni-pagination show-icon=false total=100 pageSize=10 current=2 prev-text="上一页" next-text="下一页" ></uni-pagination> </view> </template>
import uniCard from "../../uni-ui/uni-card/uni-card.vue" import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"