uniapp如何配置使用uView

女爷i 2024-04-20 22:13 30阅读 0赞

## 下载 ##

命令：  
npm install uview-ui@2.0.31 || yarn add uview-ui@2.0.31  
!注意项目名不能有中文

## 引入 ##

##### 1.在main.js引入 #####

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

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

##### 2.引入uView全局SCSS主题文件 uni.scss #####

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

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

##### 3.引入uView主样式 #####

在App.vue中引入样式，注意给style标签加入lang="scss"属性

// App.vue
    @import "uview-ui/index.scss";

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

##### 4.配置自动引入组件模式 pages.json #####

// pages.json
    "easycom": {
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        }

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

##### 5.使用 #####

// index.vue
    <u-search placeholder="日照香炉生紫烟"></u-search>

// index.vue
    <u-search placeholder="日照香炉生紫烟"></u-search>

##### 6.运行在微信小程序看效果 #####

![在这里插入图片描述][49189cde6c8a49aaad534ce10ba39663.png]

[49189cde6c8a49aaad534ce10ba39663.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f28d554f9da5467b999c289c0cd54b74.png

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp如何配置使用uView

uniapp使用uView教程

女爷i/ 2024年04月20日 22:13/ 0 赞/ 31 阅读

相关 uniapp上拉加载更多Uview

scroll-view scroll-y="true" @scrolltolower="scroll_y"> 你的请求数据 <u-loadmore

深碍√TFBOYSˉ_/ 2023年01月02日 11:22/ 0 赞/ 190 阅读

相关 uView UI使用

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

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

相关 uniapp生态UI框架选择之uView（@莫成尘）

市场上的uni-ui框架有很多，都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的，接下来给您推荐uView（不仅仅是UI库也是一个js库

港控/mmm°/ 2022年12月02日 00:45/ 0 赞/ 271 阅读

相关 uniapp中使用uview

一、在uview中下载文件 https://ext.dcloud.net.cn/plugin?id=1593 ![在这里插入图片描述][watermark_type_Z

不念不忘少年蓝@/ 2022年11月19日 07:49/ 0 赞/ 403 阅读

相关 uniapp中使用uview

一、在uview中下载文件 https://ext.dcloud.net.cn/plugin?id=1593 ![在这里插入图片描述][watermark_type_Z

Myth丶恋晨/ 2022年11月19日 07:44/ 0 赞/ 670 阅读

相关 uniapp之配套ui框架uView

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

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

相关【Straw-Uniapp-uView】基于 Uniapp + uView 搭建项目基础模板

文章目录一、项目简介 1、项目概述 2、相关链接 3、基础功能 4、后端搭建二、开发手册

叁歲伎倆/ 2022年10月05日 13:58/ 0 赞/ 542 阅读

相关 uniapp UI库 uView UI的使用

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

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

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

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

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