首页 > 其他分享 >uniapp项目引入uView-ui

uniapp项目引入uView-ui

时间:2023-10-24 10:25:00浏览次数:35  
标签:scss uniapp uView uview ui 引入 import

通过npm下载

// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y
 
npm install uview-ui
 
// 更新
// npm update uview-ui

配置步骤

1.引入uView主JS库

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

// main.js
// 引入全局 uView 框架
import uView from 'uview-ui';
Vue.use(uView);

2.在引入uView的全局SCSS主题文件

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

/* uni.scss引入view主题样式 */
@import 'uview-ui/theme.scss';

3.引入uView基础样式

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

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

4.配置easycom组件模式
在pages.json配置,uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启Hbuilder X或者重新编译项目才能正常使用uView的功能。请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

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

 

标签:scss,uniapp,uView,uview,ui,引入,import
From: https://www.cnblogs.com/czhowe/p/17784106.html

相关文章

  • How To Clear Quick Access And Recent File And Folders In Windows 10
    HowToClearQuickAccessAndRecentFileAndFoldersInWindows10HerearetheinstructionstocleartheQuickAccessandRecentFilesandFolderscacheandreturnitbacktofactorydefaultstateinWindows10.Step1OpenFileExplorerStep2Click......
  • Proj CDeepFuzz Paper Reading: POLYCRUISE: A Cross-Language Dynamic Information F
    Abstract本文:PolyCruiseMethod:跨编程语言的holisticdynamicinformationflowanalysis(DIFA)usealightlanguage-specificanalysis和language-agnosticonlinedataflowanalysis来计算symbolicdependencies实验:数据集:PolyBench,包含小中大三种等级的benchmarks效......
  • m基于深度学习网络的智能垃圾分类系统matlab仿真,带GUI界面
    1.算法仿真效果matlab2022a仿真结果如下:    2.算法涉及理论知识概要       垃圾数量的急剧增加和垃圾中物质的复杂多样性带来了严重的环境污染和资源浪费问题。回收可以减少废物,但手工管道垃圾分拣工作环境恶劣,劳动强度大,分拣效率低。智能垃圾分类系统是......
  • m基于深度学习网络的智能垃圾分类系统matlab仿真,带GUI界面
    1.算法仿真效果matlab2022a仿真结果如下:2.算法涉及理论知识概要垃圾数量的急剧增加和垃圾中物质的复杂多样性带来了严重的环境污染和资源浪费问题。回收可以减少废物,但手工管道垃圾分拣工作环境恶劣,劳动强度大,分拣效率低。智能垃圾分类系统是基于深度学习网络的一种应用,它可以通......
  • Niushop中uniapp的访问接口
    Niushop中uniapp的访问接口直接上代码 this.$api.sendRequest({ url:'/pintuan/api/order/isbuy', success:res=>{ console.log(res) if(res.code==1){ //跳转VIP } }, fail(){ //联网失败的回调 } });......
  • RTL8852BE网卡导致MIUI+的多屏协同卡顿
    米粉,一直用MIUI+实现手机与电脑的多屏协同功能,最近换电脑后发现卡顿严重,还经常无响应,于是下决心研究下多屏协同的本质与外部依赖。不论谁家的多屏协同,都是启用WiFi-Direct实现的手机与电脑互联,卡顿说明两者的连接速率不够。建立连接后,在Win11上任务管理器的性能里,能找到类型为WiF......
  • 关于elementui的cascader组件多个级联大量数据滚动定位样式导致卡顿问题
    如题,多个cascader级联组件,下拉选项含大量数据,滚动时会有实时样式重新渲染,导致CUP内存溢满而卡顿解决尝试:使用elementui中的内部源码方法处理<script>import{addResizeListener,removeResizeListener}from'element-ui/src/utils/resize-event';...setu......
  • Jenkins安装使用MSBuild插件
    JenkinsMSBuild插件页面:https://plugins.jenkins.io/msbuild/1.安装首页系统管理》插件管理》Availableplugins搜索:MSBuild安装时勾选:重启Jenkins 2.配置MSBuild路径首页系统管理》全局工具配置》MSBuild安装Name:随便命名Path:注意这里要用VS对应的MSBuild版本,如VS......
  • Pset_SpaceFireSafetyRequirements
    Pset_SpaceFireSafetyRequirements空间消防安全要求:适用于IfcSpace或IfcZone事件的空间消防相关属性。  NameTypeDescriptionFireRiskFactorP_SINGLEVALUE / IfcLabelBrandgefahrenklasseBrandgefahrenklassedesRaums,angegebennachdernationalenoder......
  • UI自动化测试,让测试高效起来
    RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块,覆盖了整个产品测试周期。RunnerGoUI自动化基于Selenium浏览器自动化方案构建,内嵌高度可复用的测试脚本,测试团队无需复杂的代码编写即可开展低代码的自动化测试。 以一条简单的搜索场景为例,本文......