HBuilder X中uView UI框架的安装及使用

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

开发工具: HBuilder X

在最上方的工具中点击 插件安装 ——> 安装新插件 ——> 前往插件市场安装

HBuilder X中uView UI框架的安装及使用,uni-app,view design

 在作者排行榜中找到 uView UI 选择该版本 然后点击下载并导入HBuilder X

HBuilder X中uView UI框架的安装及使用,uni-app,view design

 然后选择你想导入的项目

HBuilder X中uView UI框架的安装及使用,uni-app,view design

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

在项目根目录的uni.scss中引入此文件

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

引入uView基础样式 

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

完成上述步骤后就可以在页面中使用UI组件了

介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架文章来源地址https://www.toymoban.com/news/detail-802393.html

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

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

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

相关文章

  • 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日
    浏览(53)
  • uView 在 uni-app 中的使用

    提示:正文内容: uView 官网: https://www.uviewui.com uView 是 uni-app 生态专用的 UI 框架 关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件是uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意,

    2024年02月15日
    浏览(54)
  • uni-app使用HBuilder X编辑器本地打包apk步骤说明

    下载地址官方地址:Android Studio 下载文件归档  |  Android 开发者  |  Android Developers 安装Android SDK和Google USB Driver即可,后者主要是为了后期使用USB设置的,如果不需要可以不点。 下载地址:Android 离线SDK - 正式版 | uni小程序SDK 注意:Android离线SDK的版本一定注意和HBuilder X的版

    2024年02月04日
    浏览(68)
  • 【uni-app】uni-app中scroll-into-view的使用

    在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串 并且子组件的上绑定一个id值用于定位 以上就是今天要讲的内容,

    2024年02月11日
    浏览(49)
  • 使用uni-app+uview创建小程序工程并支持请求后端接口

    一、使用工具:     1.hubilderx   下载地址:HBuilderX-高效极客技巧     2.微信开发者工具   下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档     3.uview组件库API:Color 色彩 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 二、使用hubuilderx创建uni-app项目

    2024年02月11日
    浏览(62)
  • uni-app使用HBuilder X工具和微信小程序工具开发微信小程序

    选择uni-app的原因是什么 需要使用到的工具 关于HBuilder X工具和微信小程序工具的介绍  怎么下载HBuilder X工具和微信小程序工具  如何使用HBuilderX工具 如何使用微信小程序工具  结尾 什么是uni-app uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到

    2024年02月08日
    浏览(69)
  • uni-app web-view的使用

    在上一页点击需要跳转到app内置的浏览器里(app跳h5页面),uniapp提供了web-view 需要新建页面,在新页面里引用web-view,在新页面里才加上网址(h5) 1,在所需页面引入 1,在项目里(uni-app)运用(子传父) 3,html页面 https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

    2024年02月11日
    浏览(49)
  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

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

    2023年04月16日
    浏览(73)
  • uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

    这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致 uView相关文档 popus源码 它会自动判断在并且在IPhone X等机型的时候,给元素加上一个适当底部内边距,从

    2024年02月19日
    浏览(49)
  • HBuilder X + uni-app 打包 App、小程序等操作

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 在HBuilder X中 我们可以点击新建-项目,选择第一个空框架,根据学习需要也

    2024年02月12日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包