uni-app——uni-ui的使用

0.2882019.06.09 22:53:34字數 186閱讀 2602

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-loader

1. 初始化項目

在 HBuilderX 中新建 uni-app 項目，進入項目目錄，執行：

npm init -y

2. 安裝 uni-ui

npm install @dcloudio/uni-ui

3. 使用 uni-ui

在 script 中引用組件：

<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 中使用組件：

<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>

4. 根據需要下載使用

import uniCard from "../../uni-ui/uni-card/uni-card.vue" import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"

5. 組件使用效果