uView-ui框架测试使用笔记

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


前言

在分析一个项目的时候,发现项目中使用了一个组件,在 components 中没有找这个组件的注册位置,发现这是 uview-ui 中的组件

<view>
	<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>
</view>

很明显,这里的 u-notice-bar 是一个组件,但是在 components 中并没有注册的语句,猜测是不是全局引入,或者是 easycom 模式自动引入了,按照 easycom 模式可以自动引入组件的命名规则中的 components/a/a.vue 来去找 u-notice-bar 还是没有找到
最终发现使用的是 uniapp 的 uview-ui 组件


一、uview-ui是什么?

uview-ui 是 uniapp 生态中的框架 uview官网链接
uni-app2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归。
因此,uView应运而生,uView的目标是成为uni-app生态最优秀的UI框架。

二、使用步骤

1. 下载步骤

1.在 HbuilderX中创建 uniapp 项目

uView-ui框架测试使用笔记

2. 在 uview官网链接 中导入插件

uView-ui框架测试使用笔记

报错

uView-ui框架测试使用笔记
解决方案 : 关闭 HbuilderX 右键,以管理员身份运行

3. 将 uview-ui 移动到根目录下

uView-ui框架测试使用笔记

2. 配置步骤

2.1 引入 uView 主 JS 库

在项目的根目录中的 main.js 中,引入并使用 uView 的 JS 库 ,注意应当在 import Vue 之后

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

2.2 引入 uView 的全局 SCSS 主题文件

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

/** uni.scss 错误引入*/
@import url("uview-ui/theme.scss");

正确引入

/** uni.scss 错误引入*/
@import "uview-ui/theme.scss";

2.3 引入 uView 基础样式

在 App.vue 中首行的位置引入,注意给 style 标签加入 lang='scss’属性

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

2.4 配置 easycom 组件模式

在 pages.json 中配置 easycom 组件模式

  • uni-app 为了调试性能,修改 easycom 规则不会实时生效,配置完成之后,需要重启 HX 或者重新编译项目才能正常使用 uView 的功能
  • 需要确保 pages.json 中只有一个 easycom 字段,否则需要自行合并多个引入规则。
// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [....原有的内容],
	"globalStyle": {....原有的内容},
		........原有的内容
}

3、完成以上配置后,在页面中使用组件测试是否成功

<template>
	<view class="index">
		<u-button >默认按钮</u-button>
		<u-button type="primary">主要按钮</u-button>
		<u-button type="success">成功按钮</u-button>
		<u-button type="info">信息按钮</u-button>
		<u-button type="warning">警告按钮</u-button>
		<u-button type="error">危险按钮</u-button>
	</view>
</template>

完成 ~
uView-ui框架测试使用笔记

4. 图标使用

<u-icon name="level"></u-icon>

uView-ui框架测试使用笔记文章来源地址https://www.toymoban.com/news/detail-471061.html

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

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

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

相关文章

  • 关于引入uview-ui @import “uview-ui/index.scss“;报错

    在APP.vue中加上lang=\\\"scss style lang=\\\"scss\\\"     /*每个页面公共css */ @import \\\"uview-ui/index.scss\\\"; /style  

    2024年02月02日
    浏览(47)
  • 使用vue2开发uni-app项目--引入uview-ui

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、安装 1、安装uview-ui 2、安装scss支持 二、配置 1、在main.js中引入uView库 2、uni.scss文件中引入uView的全局SCSS主题文件  3、在APP.vue文件中引入uView基础样式 4、在pages.json中 配置easycom组件模式

    2024年02月04日
    浏览(63)
  • uview-ui报错:Component is not found in path node-modules/uview-ui/components/xx/xx

    解决方法: 1、uview-ui如果是npm安装 需要在pages.json中添加easycom配置 2、配置了以上还报错的话可能是 tempalte样式最外层没用标签包括着(只允许有一层用 view/view 包裹最外层) 3、如果试过方法还没解决的话,可以试试彻底 关闭开发者工具关闭,重启 如你还有其他更好的解决

    2024年02月11日
    浏览(42)
  • 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)
  • 【uni-app】安装uView-ui组件步骤

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

    2024年02月14日
    浏览(42)
  • 关于 uview-ui grid宫格布局的页面跳转

    在使用 uview-ui 的宫格布局时,发现官方文档对于基本的图形展示还是很详细的,但是缺少点击事件。 于是 该组件外层为 u-grid 组件包裹,通过 col 设置内部宫格的列数 内部通过 u-grid-item 组件的 slot 设置宫格的内容 如果不需要宫格的边框,可以设置 border 为 false 结合uni的sw

    2024年02月15日
    浏览(57)
  • 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)
  • 在引入uview-ui时报错:SassError: Undefined variable: “$u-type-primary“.

    遇到的问题 解决方法:在uni.scss引入

    2024年02月16日
    浏览(46)
  • uniapp引入uview-ui 报错:$u-badge-primary: $u-primary !default;

    解决方法 上面这个问题是在引入 uview-ui 这个ui框架后出现的,那么具体的解决方法是在项目根目录下的 uni.scss 文件中引入uview对应的样式文件: 插件地址 uni-app 插件地址(可以搜索一些其他的可用插件): https://ext.dcloud.net.cn/ uView2.0重磅发布,利剑出鞘,一统江湖: https:

    2024年02月11日
    浏览(38)
  • HBuilder X中uView UI框架的安装及使用

    开发工具: HBuilder X 在最上方的工具中点击 插件安装 —— 安装新插件 —— 前往插件市场安装  在作者排行榜中找到 uView UI 选择该版本 然后点击下载并导入HBuilder X  然后选择你想导入的项目 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vue 之

    2024年01月18日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包