uView UI使用

末蓝、 2022-12-03 09:41 234阅读 0赞

最近使用uni-app，发现uViewUI这个UI库挺好用的，这里记录一下。

[点击这里直达uView官网][uView]

*  ##### 安装：npm安装（个人向） #####
    
        // 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
        // npm init -y
        
        // 安装
        npm install uview-ui
        
        // 更新
        npm update uview-ui
 *  ##### 配置 #####

**这里提一嘴啊，这个库必须用scss，如果是`HBuilder X`创建的，可以去插件市场安装一个。用脚手架的话，各位大佬应该都会，我就不多bb了。**

#### 1. 在`main.js`中，引入并使用uView的JS库 ####

注意这两行要放在`import Vue`之后。

// main.js
    import uView from "uview-ui";
    Vue.use(uView);

#### 2.根目录的`uni.scss`中引入uView的全局SCSS主题文件 ####

/* uni.scss */
    @import 'uview-ui/theme.scss';

#### 3.在App.vue里面，style标签里添加基础样式 ####

<style lang="scss">
    	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    	@import "uview-ui/index.scss";
    </style>

#### 4. 项目根目录的`pages.json`中配置easycom组件模式 ####

// pages.json
    { 
    	"easycom": { 
    		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    	},
    	
    	// 此为本身已有的内容
    	"pages": [
    		// ......
    	]
    }

到这里你就可以直接使用了。

[uView]: https://www.uviewui.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app项目中去使用 uView UI

官网链接：https://uviewui.com/components/intro.html ![在这里插入图片描述][20201209201921913.png] 1.

旧城等待，/ 2022年12月27日 08:53/ 0 赞/ 125 阅读

相关 uView UI使用

最近使用uni-app，发现uViewUI这个UI库挺好用的，这里记录一下。 [点击这里直达uView官网][uView] 安装：npm安装（个人向）

末蓝、/ 2022年12月03日 09:41/ 0 赞/ 235 阅读

相关 uni-app 使用 uview-ui

uni-app 使用 uview-ui 废话不多说啦先看我把 uview-ui 放在项目中的位置 ![在这里插入图片描述][20201102090634648.

朴灿烈づ我的快乐病毒、/ 2022年11月21日 14:45/ 0 赞/ 300 阅读

相关 uni-app使用element ui开发H5(跨端可推荐uview ui )

> 建议h5端开发使用 app/小程序可以使用uview ui 安装在uni-app项目根目录执行 npm install npm i element-ui -S

桃扇骨/ 2022年11月09日 14:15/ 0 赞/ 964 阅读

相关 uniapp之配套ui框架uView

[uView][]管网链接 uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水下载地址：[https://ext.dc

深藏阁楼爱情的钟/ 2022年11月06日 05:55/ 0 赞/ 201 阅读

相关 uni-app项目使用uView UI的步骤

uView UI [uView UI][] 是 [uni-app][] 生态最优秀的UI框架之一，提供了众多常有组件。以下记录uni-app项目使用uView UI

快来打我*/ 2022年09月04日 01:58/ 0 赞/ 757 阅读

相关 uniapp UI库 uView UI的使用

uniapp UI库 uView UI的使用一、新建\`uniapp\`项目二、安装下载\`uViewUI\`组件库

刺骨的言语ヽ痛彻心扉/ 2022年09月03日 03:29/ 0 赞/ 464 阅读

相关在uView UI中扩展和使用自定义图标

uView UI [uView UI][] 是 [uni-app][] 生态最优秀的UI框架之一，提供了众多常有组件。在一般的项目中，都会涉及一些定制的图标，以美化

àì夳堔傛蜴生んèń/ 2022年08月29日 00:02/ 0 赞/ 1828 阅读

相关 uni-app UI框架之uview-ui使用教程

uview如何配置到uniapp项目中? 如果你想了解到更详细的文档，进入 [uview官网][uview] 查看 1、使用安装包方式首先要去官网下载最新的包

梦里梦外;/ 2021年07月25日 22:27/ 0 赞/ 802 阅读

相关 uview——uniapp最优秀的UI框架

前几天黄河爱浪大神帮我解决了一个问题，我很感激，更钦佩大神的厉害。翻看大神的博客时，发现黄河爱浪大神参与了uview的组件开发。真的是好厉害，大神是造轮子的人，我是用轮子的人…

ゞ浴缸里的玫瑰/ 2021年07月25日 14:04/ 0 赞/ 2570 阅读