首页 > 其他分享 >uniapp中 引入uview组件库

uniapp中 引入uview组件库

时间:2024-02-19 23:23:58浏览次数:27  
标签:uniapp 插件 -- uview ui uni 组件 import

1、下载安装HBuilder X

2、创建项目

3、工具---插件安装--插件市场--前往插件市场安装--前端组件--通用组件--搜索(uview)--点击uview2.0(记得登录哦)

4、选择项目,进行引入uView

5、在main.js中

// 入口文件
import App from './App'

// #ifndef VUE3
import Vue from 'vue'

// uview-ui插件
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

Vue.config.productionTip = false
App.mpType = 'app'

6、在app.vue中

<style lang="scss">
    /*每个页面公共css */
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

7、在uni.scss中

/*导入uview的样式变量参数*/ 
@import '@/uni_modules/uview-ui/theme.scss';

 8、在pages.json中全局引入

    // 全局样式(默认样式)
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {},
  // 全局引入uview组件 "easycom": { "autoscan": true, "custom": { "^u-(.*)":"@/uni-modules/uview-ui/components/u-$1.vue" } }

9、OK完成

标签:uniapp,插件,--,uview,ui,uni,组件,import
From: https://www.cnblogs.com/Life-QX/p/18022159

相关文章

  • uniapp的H5端微信与支付宝支付(包括PC端与移动端)
    PC端:大致流程为1、请求创建订单接口传递正确参数(例如openid、金额、开始结束时间等),此接口会返回一个图片,或网络图片,或base64图片,这个图片是一张二维码;2、前端拿到这个二维码渲染到屏幕上并开始启动定时器,每过一秒请求一次查询支付结果接口,查询是否支付成功;3、支付宝支付可能会......
  • 利用COM组件实现对WORD书签各种操作大全
    有个需求是,程序导出一份word报告,报告中有各种各样的表格,导出时还需要插入图片。脑海中迅速闪过好几种组件,openxml组件,com组件,npoi。为了减少程序画复杂表格,我们选用了com组件+word模板的方式,程序只需要对word中的书签进行赋值即可。不知道这几种组件的(或者还有其他......
  • 二机制安装Kubernetes 1.29 高可用集群(6)--calico网络组件和CoreDNS配置
    1.部署Calico网络组件1.1k8s-master节点上下载calico的创建文件下载地址:https://docs.tigera.io/calico/latest/getting-started/kubernetes/quickstartwgethttps://raw.githubusercontent.com/projectcalico/calico/v3.27.2/manifests/tigera-operator.yamlwgethttps://ra......
  • 【开工大吉】推荐4款开源、美观的WPF UI组件库
    思维导航前言WPF介绍HandyControlPanuon.WPF.UIAduSkinLayui-WPF优秀项目和框架精选DotNetGuide技术社区交流群前言经常有小伙伴在技术群里提问:WPF有什么好用的UI组件库?,今天大姚给大家推荐4款开源、美观的WPFUI组件库。WPF介绍WPF是一个强大的桌面应用程序......
  • 【开工大吉】推荐4款开源、美观的WPF UI组件库
    前言经常有小伙伴在技术群里提问:WPF有什么好用的UI组件库?,今天大姚给大家推荐4款开源、美观的WPFUI组件库。WPF介绍WPF是一个强大的桌面应用程序框架,用于构建具有丰富用户界面的Windows应用。它提供了灵活的布局、数据绑定、样式和模板、动画效果等功能,让开发者可以创建出......
  • Vue3实现加入购物车抛物线效果组件
    前言在前几天的一次迭代中,我遇到了这么一个需求,模仿支付宝首页应用中心的编辑功能,支持编辑首页展示的应用,在支付宝应用首页编辑功能中,我注意到一种独特而细致的设计。无论是增加还是移除某个应用,都会引发一个精美的移动动画效果。这种贴心的设计在用户体验中起到了微妙而关键的作......
  • 安卓的基本组件
    TextView(文本框组件):主要用来显示文字的一些信息。通过修改TextView的属性可以改变文字的颜色,大小,位置。这个组件较比较简单,容易上手。这里就不过多叙述了。Button(按钮):是程序用于和用户进行交互的一个重要控件。AndroidStudio会对Button中的所有英文字母自动进行大写转换,你可......
  • 解决vue2中el-table表格组件的空状态过小的问题
    问题当我们使用element的表格组件的时候,空状态会变的非常瘪,就会造成页面非常难看这样很不美观解决办法可以使用插槽设置空状态,并通过css来调整空状态的样式新建一个空表格<template><div><el-table:data="tableData"stripestyle="width:100%">......
  • OpenHarmony—UIAbility组件生命周期
    概述当用户打开、切换和返回到对应应用时,应用中的UIAbility实例会在其生命周期的不同状态之间转换。UIAbility类提供了一系列回调,通过这些回调可以知道当前UIAbility实例的某个状态发生改变,会经过UIAbility实例的创建和销毁,或者UIAbility实例发生了前后台的状态切换。UIAbility......
  • 当创建statefulset资源后,k8s组件如何协作
    当创建statefulset资源后,k8s组件如何协作点击关注......