首页 > 其他分享 >uniapp引入uView2.0

uniapp引入uView2.0

时间:2022-11-28 00:22:51浏览次数:76  
标签:uniapp 插件 uView uView2.0 uview ui 引入 uni app

引入uVIew组件可以使用uni-app市场插件安装插件即可,也可以使用npm下载安装,不过使用npm需要在pages.json使用easycom属性引用需要的组件类。

在uni-app插件市场右上角选择使用HBuilder X 导入插件或者下载插件ZIP
如果您的项目是由HBuilder X创建的标准uni-app项目,将下载后的uview-ui文件夹,复制到项目根目录。
如果您的项目是由vue-cli (opens new window)模式创建的, 请将下载后的uview-ui文件夹放到项目的src文件夹中即可。

一、使用uni-app市场插件安装

途径一:uView示例项目已内置到HBuilder X中,在文件 -> 新建 -> 项目 -> uni-app中,找到uView UI下载运行即可。

途径二:在uni-app插件市场右上角选择使用 HBuilderX 导入示例项目或者下载示例项目ZIP,然后在HBuilder X中运行即可。

uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=6682

二、使用npm安装

第一步:在uni-app新建的项目中 使用CMD下载uView
npm install [email protected]

第二步:在main.js里引入和注册uView 这两句代码需要在import Vue之后
import uView from '@/node_modules/uview-ui' Vue.use(uView)

第三步:在uni.scss文件中引入uView的全局Scss主题文件
@import '@/node_modules/uview-ui/theme.scss';

第四步:在App.vue文件中引入全局共用的scss文件
<style lang="scss"> @import "@/node_modules/uview-ui/index.scss"; </style>
第五步:在pages.json中配置uview组件
"easycom": { "^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue" },
第六步:在index.vue页面进行测试
<u-button text="月落"></u-button>

标签:uniapp,插件,uView,uView2.0,uview,ui,引入,uni,app
From: https://www.cnblogs.com/lzp110119/p/16931098.html

相关文章

  • uniapp表单提交 新增POST
    用button的type=submit和form<template><view><viewclass="info"><form@submit='formSubmit'><viewclass="list"><viewclass="item">......
  • uniapp踩坑笔记
    前言uniApp一直在不断完善,但是有些时候还是避免不了踩坑,本篇博文就记录一下我遇到的坑正文【配置】应用版本号名称是一个有规则的字符串:1.0.0,规则是:大版本号.中版本......
  • vue中引入字体
    前言:做大屏项目需要引入字体做个记录一、先看看效果   二、实现1、下载字体文件分享一个下载开源字体网站:https://www.dafont.com/theme.php2、文件放到项目中可......
  • uniapp_02_获取本机已安装的app
    关于uniapp获取已安装应用列表获取所有安装的app判断是否是系统应用获取详细app信息遇到的问题参考文档获取所有安装的appAndroid的应用管理主要是通过Package......
  • uniapp h5转app
    关于movable-area、movable-view在ios上没有问题,但是在安卓上,如果通过滑块滑动去改变别的元素的,会出现卡顿、掉帧的情况的,及其不友好解决办法:可以将其......
  • uniapp 微信公众号开发 本地开发测试 本地接口联调
    1.条件本地一个uniapp的H5项目(本地运行localhost:8080)本地一个webservice接口项目(本地运行127.0.0.1:9999)目的:因微信公众号没有提供良好的测试体验环境,每次测试......
  • uniapp微信小程序解析详情页的四种方法
    一、用微信文档提供的RICH-TEXT官方文档:微信文档rich-text这种是直接使用:<!-->content是API获取的html代码</--><rich-textnodes="{{content}}"></rich-text>*注......
  • UNIAPP scroll-view自定义下拉刷新的坑
    代码:html<scroll-viewclass="details"scroll-y="true"refresher-enabled="true":refresher-threshold="100" :refresher-triggered="triggered"@refresherrefresh=......
  • uniapp中,在父组件(tabBar页面)关闭子组件(子组件包含uni-popup弹出层)的实现思路
    uniapp项目开发中,关于使用uni-popup组件跨组件关闭打开的问题实现解决思路。项目开发中,在tabBar页面引用了封装好的用来展示列表数据的子组件,该子组件中包含了uni......
  • 记录一次uniapp 开发环境访问本机接口 报跨域的问题
    api接口使用的springboot。已确认设置允许所有跨域请求(*)接口在本机启动(接口地址:http://localhost:9999)uniapp在本机启动(本地web:http://localhost:8080)报错信息:Acces......