uni-app——uni-ui的使用

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 中引用组件:


在 template 中使用组件:


4. 根据需要下载使用

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

5. 组件使用效果

uni-app——uni-ui的使用_第1张图片
uni-app组件使用效果

你可能感兴趣的:(uni-app——uni-ui的使用)