【uni-app项目如何引入 uView组件库】

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

一、uView官方文档

uView官方文档

二、公司项目中引入并使用uView

第一步:

在公司创建完成uniapp项目后引入uView

uniapp 引入uview,uni-app,uni-app,前端,node.js

第二步:

您如果是使用HBuilder X创建的uniapp项目,使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ,(如果这个看不懂可以看官方文档)

uniapp 引入uview,uni-app,uni-app,前端,node.js
(1) HBuilder X插件库中下载 uni_modules

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

现在是已经将 uView导入到项目中了,接下来还需要对项目中uView组件库样式的导入,(具体步骤官方文档里都有)

uniapp 引入uview,uni-app,uni-app,前端,node.js

如果之前安装过scss,可以直接跳过

这里的scss仅限于是通过Vcode开发uniapp的

uniapp 引入uview,uni-app,uni-app,前端,node.js

通过HBuilder X 下载scss

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

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

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

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

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

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

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

uniapp 引入uview,uni-app,uni-app,前端,node.js

到这一步可以直接启动项目,里边的组件均可使用文章来源地址https://www.toymoban.com/news/detail-755334.html

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

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

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

相关文章

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

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

    2023年04月16日
    浏览(54)
  • uni-app引入地图map组件--APP开发

    需求场景:使用uni-app地图组件,实现APP开发 开发环境:Mac,HbuildX3.4.14 测试环境:iOS真机调试 一、流程 1、关于Uini-app的map组件:官方文档说明。map组件是原生组件,目前只针对原生APP开发,因此通过app-nvue实现,同时选择的地图服务商只能是高德地图。 2、创建高德地图应用

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

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

    2024年02月14日
    浏览(39)
  • uni-app小程序引入iconfont的三种方式详解(无需下载文件到项目)

    官网iconfont的引入方式有三种分别为: Unicode 、 Font class 、 Symbol , 其中已明确说明 Unicode、Font class 这两种引入方式 不支持多色 。 单色如何理解呐?具体请看效果对比图(左图为UI上传的图标样式,右边为我们使用这两种方式引入后不加任何样式的效果) 是不是很丑? 另外

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

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

    2023年04月09日
    浏览(78)
  • uni-app如何使用组件

    使用组件是uni-app的常见操作之一。以下是使用组件的步骤: 在uni-app项目中创建组件。 可以通过在components文件夹中创建一个.vue文件来创建组件。 也可以通过在HBuilderX中使用模板或向导来创建组件。 在需要使用组件的页面或组件中引入组件。 可以使用import导入组件,例如:

    2024年02月13日
    浏览(38)
  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 打开 HBuilderX,点击左上角 文件 - 新建 - 项目 : 项目创建完毕之后,首先来分析

    2024年02月04日
    浏览(50)
  • 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日
    浏览(44)
  • uni-app uView自定义底部导航栏

    因项目需要自定义底部导航栏,我把它写在了组件里,基于uView2框架写的(vue2);   在components下创建tabbar.vue文件,代码如下:  app.vue (有没有大佬知道为什么这个样式加载app.vue里才生效)  pages.json配置 页面使用: ( mine.vue ) 注: current是底部导航栏的下标,你在tabb

    2024年02月14日
    浏览(70)
  • uni-app项目使用uview-ui报错:Component is not found in path node-modules/uview-ui/components/xx/xx

    解决: 一、uview-ui如果是 npm 安装 需要在 pages.json 中添加 easycom 配置 二、配置了以上还报错的话可能是 tempalte 样式最外层没用标签包括着(只允许有一层 用 view/view 包裹最外层

    2024年02月11日
    浏览(61)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包