uni-app新手问题，uniapp X 能否使用uni UI?

发布于 1周前 作者 yibo5220 来自 uni-app

uni-app新手问题，uniapp X 能否使用uni UI?
我发现uniapp X内置的组件太少了，没有uni UI多，比如uni UI有的组件，但在uniapp X里没有，那么，uni-UI如何在uniapp X使用？还是根本无法使用呢？

Harmonyos Next教程
2 回复

要不要试试这些？https://ext.dcloud.net.cn/publisher?id=242774


当然可以，uni-app 支持使用 uni UI 组件库。uni UI 是 DCloud 官方为 uni-app 开发的一套组件库，旨在帮助开发者快速构建美观、统一风格的界面。以下是一个简单的示例，展示如何在 uni-app 中使用 uni UI 组件。

首先，确保你的项目已经创建并初始化完成。然后，你需要安装 uni-ui 组件库。在项目的根目录下，打开终端并运行以下命令：

npm install @dcloudio/uni-ui

安装完成后，你需要在 pages.json 文件中配置全局引入 uni-ui 组件库，以便在整个项目中使用。在 pages.json 中添加如下配置：

{
  "globalStyle": {
    "usingComponents": {
      "uni-button": "@dcloudio/uni-ui/lib/uni-button/uni-button"
      // 你可以根据需要添加更多组件
    }
  }
}

接下来，在你的页面文件中使用 uni-button 组件。例如，在 pages/index/index.vue 文件中：

<template>
  <view class="content">
    <uni-button type="primary" @click="handleClick">点击我</uni-button>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击了',
        icon: 'none'
      });
    }
  }
};
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

在上面的代码中，我们引入了 uni-button 组件，并设置了一个点击事件。当用户点击按钮时，会显示一个 Toast 提示。

此外，如果你希望按需引入组件而不是全局引入，可以在具体页面或组件的 script 部分使用 import 语句：

import UniButton from '@dcloudio/uni-ui/lib/uni-button/uni-button.vue';

export default {
  components: {
    UniButton
  },
  // ... 其他代码
};

这样，你就可以在指定的页面或组件中使用 uni-button 了。

uni UI 提供了丰富的组件，如列表、表单、弹窗等，你可以根据官方文档和示例代码进行学习和使用。官方文档地址：uni UI 组件库。希望这些信息对你有所帮助！

回到顶部