uniapp中导入uview或者uview plus

关于SCSS

uview-plus依赖SCSS,您必须要安装此插件,否则无法正常运行。

  • 如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可
  • 如果您的项目是由vue-cli创建的,请通过以下命令安装对sass(scss)的支持,如果已安装,请略过。
  • 上面是官网的描述,意思就是你用HBuilder X创建的项目的话你就去看一下有没有安装这个,这个插件只需要安装一次,安装之后后面再创建的项目里面都会被配置到里面。
  • 没有的话用npm安装就行了,注意版本号,高版本的有的不适用,建议适用低点的版本
// 安装sass
npm i sass@1.63.2 -D// 安装sass-loader
npm i sass-loader@10.4.1 -D

#准备工作

在进行配置之前,请确保您已经根据安装中的步骤对uview-plus进行了下载安装,如果没有,请先下载安装。

这个uview-plus适用npm安装也行,用uni_modules的方式安装也行,建议适用uni_modules的方式

在插件市场找到uview的插件

将其导入到对应的项目,导入成功之后在项目的uni_modules里面可以看到这个就是导入成功了

#配置步骤

#引入uview-plus主JS库

在项目根目录中的main.js中,引入并使用uview-plus的JS库,注意这两行要放在const app = createSSRApp(App)之后。

// main.js
import uviewPlus from '@/uni_modules/uview-plus'// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)app.use(uviewPlus)return {app}
}
// #endif
#在引入uview-plus的全局SCSS主题文件

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

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';
#引入uview-plus基础样式

注意!

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

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

#配置manifest

在项目的manifest.json中增加mergeVirtualHostAttributes配置

"mp-weixin" : {"appid" : "",..."mergeVirtualHostAttributes" : true
},
"mp-toutiao" : {"appid" : "",..."mergeVirtualHostAttributes" : true
}
#安装依赖库

一定要记得安装依赖库,要不然会报很多找不到文件的错误,我就是没有安装这两个依赖库导致搞了半天。

npm i dayjs
npm i clipboard
#配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示

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

uview-plus3.x配置

// pages.json
{"easycom": {"autoscan": true,// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"}},// 此为本身已有的内容"pages": [// ......]
}

uview-plus4.x配置(尚未发布)

// pages.json
{"easycom": {"autoscan": true,// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175"custom": {"^up-(.*)": "@/uni_modules/uview-plus/components/up-$1/up-$1.vue","^u-().*)": "@/uni_modules/uview-plus/components/up-$1/up-$1.vue"}},// 此为本身已有的内容"pages": [// ......]
}
#typescript支持

在tsconfig.json中参考如下配置增加"uni-modules/uview-plus/types"

{"compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": ["@dcloudio/types","uni-modules/uview-plus/types"]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/888875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度解析 Ansible:核心组件、配置、Playbook 全流程与 YAML 奥秘(上)

文章目录 一、ansible的主要组成部分二、安装三、相关文件四、ansible配置文件五、ansible 系列 一、ansible的主要组成部分 ansible playbook&#xff1a;任务剧本&#xff08;任务集&#xff09;&#xff0c;编排定义ansible任务集的配置文件&#xff0c;由ansible顺序依次执…

【CC2530开发基础篇】光敏和热敏传感器

一、前言 1.1 开发背景 本实验通过CC2530单片机接入光敏传感器和热敏传感器&#xff0c;进行数据采集与检测&#xff0c;并将检测结果通过串口终端输出。光敏传感器和热敏传感器是常见的环境感知设备&#xff0c;分别用于测量光强和温度。在实际应用中&#xff0c;这些传感器…

第6章:布局 --[CSS零基础入门]

CSS 布局是网页设计中至关重要的一个方面&#xff0c;它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术&#xff1a; 1. 浮动布局&#xff08;Float Layout&#xff09; 浮动布局&#xff08;Float Layout&#xff09;曾经是网页设计中创建多列布局…

设计模式:20、状态模式(状态对象)

目录 0、定义 1、状态模式的三种角色 2、状态模式的UML类图 3、示例代码 0、定义 允许一个对象在其内部状态改变时改变它的行为&#xff0c;对象看起来似乎修改了它的类。 1、状态模式的三种角色 环境&#xff08;Context&#xff09;&#xff1a;环境是一个类&#xff0…

【论文笔记】VisionZip: Longer is Better but Not Necessary in Vision Language Models

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: VisionZip: Longer is Bet…

flex: 1 display:flex 导致的宽度失效问题

flex: 1 & display:flex 导致的宽度失效问题 问题复现 有这样的一个业务场景&#xff0c;详情项每行三项分别占33%宽度&#xff0c;每项有label字数不固定所以宽度不固定&#xff0c;还有content 占满标签剩余宽度&#xff0c;文字过多显示省略号&#xff0c; 鼠标划入展示…

visual studio2019开发过程中遇到的问题和有帮助的插件

文章目录 1. 注释中有中文导致报错2. 打开一个vs2013或者vs2010等老的项目兼容性3. LNK2019 unresolved external symbol main referenced in function __tmainCRTStartup4. image watch插件/扩展使用 1. 注释中有中文导致报错 C4819 The file contains a character that cann…

存内架构IR-DROP问题详解-电容电导补偿

一、总述 电容、电导补偿作为大规模数字电路的关键设计理念&#xff0c;是 CIM 架构优化的核心技术。在 CIM 中&#xff0c;平衡电容或电导并实现计算的精准映射&#xff0c;对能效提升和计算精度保障具有关键作用。本文基于近期文献探讨电容、电导补偿在 CIM 中的具体补偿策…

HDR视频技术之六:色调映射

图像显示技术的最终目的就是使得显示的图像效果尽量接近人们在自然界中观察到的对应的场景。 HDR 图像与视频有着更高的亮度、更深的位深、更广的色域&#xff0c;因此它无法在常见的普通显示器上显示。 入门级的显示器与播放设备&#xff08;例如普通人家使用的电视&#xff0…

隐式神经网络实现低光照图像增强

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

深入浅出:SOME/IP-SD的工作原理与应用

目录 往期推荐 相关缩略语 SOME/IP 协议概述 协议介绍 SOME/IP TP 模块概述和 BSW 模块依赖性 原始 SOME/IP 消息的Header格式 SOME/IP-SD 模块概述 模块介绍 BSW modules依赖 客户端-服务器通信示例 Message 结构 用于SD服务的BSWM状态处理 往期推荐 ETAS工具…

【Docker】Linux与Windows系统安装Docker+Docker上简单安装MySQL

一、Windows安装Docker 由于我在许多平台搜索Windows下安装Docker的方法&#xff0c;都提到了Win10家庭版无法直接安装Docker。个人电脑就是Win10家庭版&#xff0c;本着实践出真知的想法&#xff0c;个人在本机Win10家庭版实验结果为需要采用下述传统手动安装的办法&#xff…

关于springBoot+vue项目中配置SSL证书问题

前端可以通过https进行访问 1.前端在访问后端接口时&#xff0c;使用https进行访问&#xff0c;在request.js配置文件中&#xff0c;这个文件是配置axios的基本请求的&#xff0c;在基础请求地址中改为https方式 2.需要在Linux中的nginx中配置ssl证书&#xff0c;具体请参考&…

rk3568之mpp开发笔记mpp移植到开发板

前言&#xff1a; 大家好&#xff0c;今天给大家介绍的内容是rk平台的mpp编解码这块的内容&#xff0c;在rk目前看到有三套框架涉及到编解码内容&#xff1a; 1、rkmedia 2、rockit 3、mpp 这三种不同形式的编解码方式&#xff0c;后面再做详细的框架对比&#xff0c;今天我…

如何利用Java爬虫获得商品类目

在当今数字化时代&#xff0c;数据已成为企业最宝贵的资产之一。获取和分析数据的能力对于任何希望在市场上保持竞争力的企业来说都是至关重要的。对于电子商务平台和市场研究公司而言&#xff0c;获取商品类目数据尤为重要&#xff0c;因为这些数据可以帮助他们更好地理解市场…

Scratch教学作品 | 3D飞行模拟器——体验飞行的无限乐趣! ✈️

今天为大家推荐一款令人惊叹的Scratch作品——《3D飞行模拟器》&#xff01;由BamBozzle制作&#xff0c;这款游戏完全用Scratch构建&#xff0c;带你体验开放世界飞行的自由与乐趣。从起飞到降落&#xff0c;每一步都需要你的精准操作&#xff01;更棒的是&#xff0c;这款游戏…

堆排序(建堆用向上还是向下?)、topK问题

目录 1.堆排序 思考&#xff1a;建堆用向上调整建堆还是向下调整建堆&#xff1f;调堆用向上调整还是向下调整&#xff1f; 1.3总结&#xff1a;升序用大堆&#xff0c;降序用小堆。用向下调整建堆。 2.topK 2.3总结&#xff1a;要前k大&#xff0c;建小堆。要前k小&#…

Spring Boot配置文件敏感信息加密

一&#xff0c;背景 Spring Boot应用中的数据库、Redis、Nacos、MQ等的用户名、连接地址、密码在配置文件中一般都是明文存储&#xff0c;如果系统被系统攻破或者配置文件所在的目录读权限被破解&#xff0c;又或者是动态配置文件被窃取&#xff0c;内部人员或者黑客很容易通过…

学生信息管理系统(简化版)

前端部分&#xff08;vue2&#xff09; &#xff01;&#xff01;前端采用vue2框架&#xff0c;下面只写出必要的代码文件&#xff0c;想要使用需自行先创建vue项目 部分截图 下面是目录结构 下面是public文件夹里面的html文件 <!DOCTYPE html> <html lang"&q…

【密码学】分组密码的工作模式

1.电码本模式&#xff08;ECB&#xff09; 优点: 每个数据块独立加密&#xff0c;可并行加密&#xff0c;实现简单。 缺点: 相同明文会产生相同密文&#xff0c;不具备数据完整保护性。 适用于短消息的加密传输 (如一个加密密钥)。 工作流程&#xff1a;用相同的密钥分别对…