uni-ui安装

这篇具有很好参考价值的文章主要介绍了uni-ui安装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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:[
        // ...
    ]
}

本人配置到这里就能够使用uni-ui组件了

官方文档传送门文章来源地址https://www.toymoban.com/news/detail-587387.html

到了这里,关于uni-ui安装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(59)
  • 记录uni-app + vue3 + vite + uni-ui 小程序出现 Invalid pattern 的报错处理

    登录 - Gitee.com uni-ui 现在只推荐使用 easycom ,如自己引用组件,可能会出现组件找不到的问题 uni-ui 不支持使用 Vue.use() 的方式安装 在  vue-cli  项目中可以使用  npm  安装  uni-ui  库  注意  cli 项目默认是不编译  node_modules  下的组件的,导致条件编译等功能失效 ,导致组件

    2024年02月19日
    浏览(59)
  • 从gitee上下载项目,运行报错:文件查找失败:‘@dcloudio/uni-ui/lib/uni-collapse/uni-collapse.vue

    错误: 解决方案 注意:有可能是node.js的版本太高了,建议下载一个旧的版本。 node…js 下载:https://nodejs.org/zh-cn/download/releases/ 重新安装即可! npm查看源: npm的换源:

    2024年02月12日
    浏览(44)
  • 【uniapp】小程序开发:2 安装uni-ui组件库、使用pinia状态管理、自定义http请求

    1、安装 2、配置组件自动导入 使用 npm 安装好 uni-ui 之后,需要配置 easycom 规则,让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点: 3、安装插件,实现uni-ui组件的类型提示 安装完成后,在 tsconfig.json 中增加配置项 4、测试使用 随便复制一个组件在

    2024年02月08日
    浏览(58)
  • uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件?

    uni-app是一个前端框架 简单来说,uni-app的组件,类似HTML的标签,例如a转navigation、span转text等 uni-app的组件包括 基础组件  (自带免安装) + 扩展组件 (可选装, 官方出品uni-ui 或者第三方) uni-app出品的uni-ui官方手册很 坑爹 ,组件代码是一个文档,效果展示是另一个文档! 【u

    2023年04月08日
    浏览(77)
  • in ./node_modules/@dcloudio/uni-ui/lib/要用的组件名/要用的组件名.vue?vue&type=script&l

    transpileDependencies 要配置下 npm安装 在 vue-cli 项目中可以使用 npm 安装 uni-ui 库 ,或者直接在 HBuilderX 项目中使用 npm 。 注意 cli 项目默认是不编译 node_modules 下的组件的,导致条件编译等功能失效 ,导致组件异常 需要在根目录创建 vue.config.js 文件 ,增加 @dcloudio/uni-ui 包的编译

    2024年03月15日
    浏览(35)
  • uni-app扩展组件(uni-ui)

    目录 数字角标(uni-badge) 代码示例: 面包屑(uni-breadcrumb) 代码示例: 日历 代码示例 卡片(uni-card) 代码示例 倒计时(uni-countdown) 更多内容请访问官网 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景。 使用方式是在HBuilder中创建项目

    2024年02月15日
    浏览(56)
  • uni-ui组件库uni-icons不显示

    按照官方文档用yarn引用了uni-ui组件库并且在pages.json和vue.config.js中配置了相关的内容后使用uni-icon效果如下:   使用uni-icons的地方图标都未显示成功 1-按照 项目名称node_modules@dcloudiouni-uilibuni-icons目录找到uni-icons目录 2-将uni-icons目录放到src目录下的components目录下 3-在pages

    2024年02月15日
    浏览(59)
  • Uniapp之uni-ui-扩展组件(1)

    uni组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components HBuilder插件市场(uni-ui组件库) uni-ui 不支持使用 Vue.use() 的方式安装 npm安装uni-ui库(vue-cli项目需先安装sass及sass-loader,HBuilder可省略) 安装sass:

    2023年04月08日
    浏览(48)
  • uni-app自定义组件及拓展(uni-ui)组件的使用

    UniApp 是一个基于 Vue.js 的跨平台应用框架,可以用来开发同时运行在多个平台(如微信小程序、支付宝小程序、App等)的应用程序。在 UniApp 中,组件的使用与 Vue.js 中的组件使用基本类似,但需要考虑跨平台兼容性。 1. 创建组件文件 在 UniApp 项目中创建一个新的组件,通常

    2024年04月29日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包