uni-ui安装

最新推荐文章于 2025-06-26 09:13:48 发布

Hel1x

最新推荐文章于 2025-06-26 09:13:48 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/yoke__/article/details/125975839

本文档介绍了如何在HBuilderX中通过新建uni-app项目使用uni-ui模板，以及通过npm安装uni-ui的详细步骤。在安装完成后，需要在vue.config.js中配置编译依赖，并在pages.json中设置easycom规则，以确保uni-ui组件能正常工作。遵循这些步骤，你将能够顺利使用uni-ui组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-ui安装

快速开始

在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板即可使用

npm安装

npm install @dcloudio/uni-ui

安装后node_modules文件夹内增加dcloudio文件夹
官方文档

注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效，导致组件异常需要在根目录创建 vue.config.js 文件，增加 @dcloudio/uni-ui 包的编译即可正常

// vue.config.js
module.exports = {
      transpileDependencies:['@dcloudio/uni-ui']
}

配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：

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

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