【uni-app】安装uView-ui组件步骤

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

官方文档:https://www.uviewui.com/components/intro.html

一、适用领域

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题,后续会针对这方面持续优化。

二、步骤(一) 

先来个项目,注意只有vue2版本的,vue3还不适用

uniapp安装uview,微信小程序,uni-app,微信小程序,小程序

         步骤(二)

                用命令安装1. npm install uview-ui,再初始化以下2. npm init,还需安装scss, 3. npm i sass -D

                此时已经安装好咯,需要配置些东西咯

        步骤(三)

1.App.vue

<style lang="scss">
	@import "uview-ui/index.scss";
</style>

2.main.js

import Vue from 'vue'
import uView from 'uview-ui'
Vue.use(uView)

3.uni.scss

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

4.pages.json

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

注意:都是在src的根目录下的文件,不要搞错了

三、写组件咯

四、运行

uniapp安装uview,微信小程序,uni-app,微信小程序,小程序

注意:在微信开发工具可能需要你自己打开对应的项目,只是可能啊

uniapp安装uview,微信小程序,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-624321.html

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

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

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

相关文章

  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(66)
  • uni-app 之 安装uView,安装scss/sass编译

    uni-app 之 安装uView,安装scss/sass编译 image.png image.png image.png 点击HBuilder X 顶部,工具,插件安装,安装新插件 image.png image.png 安装成功! 注意,一定要先登录才可以安装 image.png 1. 引入uView主JS库 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vu

    2024年02月10日
    浏览(52)
  • uniapp 查找不到uview-ui文件怎么办?

     用官方的方式总是报:文件查找失败:\\\'uview-ui\\\' at main.js 解决方案:  1.先安装uview-ui 下载成功是这样的: 而不是这样的:    这样的原因是你的项目里没有package.json包,先执行  npm  i   -y再安装uview-ui 2.main.js引入  uni.scss中引入 然后再APP.vue中全局引入样式,注意一定要下

    2024年02月02日
    浏览(66)
  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~ uniapp官网提供了  HBuild

    2024年02月09日
    浏览(79)
  • uni-app扩展组件(uni-ui)

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

    2024年02月15日
    浏览(56)
  • 【Uni-App】用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动&确认&回显

    组件的引入就不多赘述了 直接看使用方法 地址我是引入的json文件数据结构大概是这个样子 例1 例2 做个动态style,控制是否高亮地址 链接:https://pan.baidu.com/s/1_heSAGHJnTe-343fRmbOPA 提取码:hmky 如果失效了 ,可以联系我获取

    2024年02月14日
    浏览(46)
  • (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    版本信息: 点击编辑器的文件 新建 项目(快捷键Ctrl+N) 2.选择uni-app项目,输入项目名/路径,选择项目模板,勾选vue3版本,点击创建,即可成功创建。 3.点击编辑器的运行 运行到浏览器 选择浏览器 当然也可以运行到手机或模拟器、运行到小程序工具。 到这里一个简单的

    2024年02月16日
    浏览(93)
  • uniapp踩坑-文件查找失败:‘uview-ui‘ at main.js

    我是在dlcoud插件库里面下载的,默认他默认下载在了“uni_modules”,而我用官方的方式总是报:文件查找失败:\\\'uview-ui\\\' at main.js 以下是官方方法,但我这里一直报错,是因为直接写他是从“node_modules”文件夹中找 23-8-21(修改):uview官网好像换了: Icon 图标 | uView 2.0 - 全面兼

    2024年02月05日
    浏览(62)
  • uni-app自定义组件及拓展(uni-ui)组件的使用

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

    2024年04月29日
    浏览(51)
  • uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!

    pages.json  上面可以看到tabbar我使用的原生的,但是值配置了pagepath,并且page里三个首页都可以自定义顶部导航栏,当然如果删掉custom那一行代码,就切换成原生顶部导航栏了。 下面拿一个首页作为代码演示:(顶部自定义导航栏组件和底部导航栏组件会放在最后) 下图组件

    2023年04月09日
    浏览(85)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包