uniapp安装uview-ui踏坑

news2024/12/28 18:40:32

1. 安装uview-ui

npm install uview-ui -S

2. 创建vue.config.js

填写如下代码

module.exports = {
    transpileDependencies: ['uview-ui']
}

3. 配置main.js

在这里插入图片描述

//uview
import uView from "uview-ui"
Vue.use(uView)

4. App.vue中引入样式

在这里插入图片描述

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
</style>

5.配置page.json

在这里插入图片描述

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

6. 以上操作配置完成后,运行项目会发现报错,因为没有安装node-sass、sass-loader

这两个插件版本不能太高,太高不兼容
建议安装:
“node-sass”: “^4.14.1”,
“sass-loader”: “^10.1.1”,

7. 安装 node-sass@4.14.1报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\A5\AppData\Roaming\npm-cache\_logs\2021-04-02T03_16_26_869Z-debug.log

解决措施:

当前node版本为16,不兼容;
降低node版本,回到14版本就行。

8. 运行项目

在这里插入图片描述
在这里插入图片描述
如图则成功。

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

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

相关文章

文案智能改写-AI智能文章改写软件

随着人工智能技术的不断发展&#xff0c;越来越多的智能写作软件相继面世&#xff0c;其中&#xff0c;AI智能改写工具是一款非常有实用价值的工具。本文将从全自动批量改写、没有错别字和标准语法、支持图文模式改写、支持各种语言改写以及严格按照标准格式结构改写几个方面&a…

前端三剑客CSS篇——CSS选择器

初识CSS选择器 文章目录 初识CSS选择器CSS三大特征&#x1f44d;CSS的三种使用方法&#x1f44f;CSS常见选择器&#x1f440;标签选择器类选择器id选择器后代选择器属性选择器复合选择器 CSS代码风格&#x1f4dc; CSS是前端三剑客不可忽略的一部分&#xff0c;CSS对前端来说是…

知了汇智:坚持发展产教融合,做好高校、人才与企业之间的桥梁

6月将正式迎来高校毕业季&#xff0c;大学生就业是聚焦全社会关注的头等大事。5月9日&#xff0c;成都知了汇智科技有限公司&#xff08;以下简称“知了汇智”&#xff09;组织开展“深化产教融合、聚焦人才培养”的主题座谈会议&#xff0c;联动高校与合作企业参加&#xff0c…

天津专业python培训机构精选(犹豫不如学python)

说起python&#xff0c;有好多年轻开发者都学习过Python&#xff0c;而且到现在为止&#xff0c;还有好多人都在追着Python跑&#xff0c;即便其他语言也很优秀&#xff0c;但是对Python的爱真的是只增不减。接下来&#xff0c;小编就给大家浅说一下&#xff0c;为什么python这…

掌汇云创新鞋业会展,汇集专精特新企业,数字化连接上下游

国内&#xff1a;鞋业供需情况多变&#xff0c;对接难度较大。在一个基数庞大&#xff0c;且成长速度惊人的市场&#xff0c;要想快速地找到供应商显然不是一件简单的事&#xff1b; 国际&#xff1a;鞋业对于外贸的依赖程度很高&#xff0c;但是当前国际局势动荡&#xff0c;…

力扣 151. 反转字符串中的单词

一、题目描述 给你一个字符串 s&#xff0c;请你反转字符串中单词的顺序。 单词是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的单词分隔开。 返回单词顺序颠倒且单词之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符串 s 中可能会存在前导空格、…

内存分段详解

内存分段 1.1 分段机制概述 1.1.1 分段机制产生的原因 对于分段机制&#xff0c;要从Intel的微处理器的8086开始说起&#xff0c;刚开始内存空间比较小&#xff0c;内存寻址采用的是直接访问物理地址的方式。由于技术的发展&#xff0c;计算机做的事情越来越多&#xff0c;程…

Connection closed, EOF detected错误

生产遇到了这个问题 原因&#xff1a;两个http网址&#xff0c;即没有启用SSL 解决方案 在 weblogic的启动文件 bin里面 的 setDomainEnv.sh 这个文件 。 加上这一句 set JAVA_OPTIONS%JAVA_OPTIONS% -DUseSunHttpHandlertrue

IS230STAOH2A开关柜的基本特征是什么以及开关柜如何用于电力系统的保护

​ IS230STAOH2A开关柜的基本特征是什么以及开关柜如何用于电力系统的保护 什么是开关柜 开关设备是用于开关控制和保护电路和设备的装置&#xff0c;电力在我们现代文明中的重要性非常高&#xff0c;因此为了获得持续的电力&#xff0c;我们必须确保电力系统免受大故障的影响…

电脑死机的常用排查思路

在工作过程中难免会遇到死机的问题&#xff0c;排查起来并不是那么轻松&#xff0c;下面分享一下我排查死机问题的思路。 判断是软件还是硬件级别的故障 在死机时先尝试移动鼠标&#xff0c;按大小写切换键或数字键盘锁定键&#xff0c;看看光标是否可以移动&#xff0c;大小…

LabVIEWCompactRIO 开发指南15 托管和监控网络发布的共享变量

LabVIEWCompactRIO 开发指南15 托管和监控网络发布的共享变量 托管 要使用网络发布的共享变量&#xff0c;共享变量引擎必须在分布式系统中的至少一个节点上运行。网络上的任何节点都可以读取或写入共享变量引擎发布的共享变量。所有节点都可以在不安装共享变量引擎的情况下…

【C语言】有符号整型(int) 与 无符号整型(unsigned int)的运算

/*有符号整型(int) 与 无符号整型(unsigned int)的运算1.全局变量&#xff0c;静态变量都是放在静态区&#xff0c;不初始化的时候&#xff0c;默认值为0。局部变量&#xff0c;放在栈区&#xff0c;不初始化的时候&#xff0c;默认值是随机值,编译器会报错2.int 与 unsigned i…

Linux知识点 -- Linux权限

Linux知识点 – Linux权限 文章目录 Linux知识点 -- Linux权限一、shell命令及运行原理二、Linux权限1.概念2.文件类型和访问权限3.更改文件的权限4.没有权限的情况5.更改文件的拥有者和所属组6.添加用户到信任列表7.umask权限掩码8.粘滞位 一、shell命令及运行原理 Linux严格…

【头歌】数组-稀疏矩阵的转置

数组-稀疏矩阵的转置 第1关&#xff1a;一般转置算法 任务描述 本关任务&#xff1a;实现稀疏矩阵的转置操作&#xff08;采用一般转置算法&#xff0c;即按列序转置&#xff09;。 相关知识 为了完成本关任务&#xff0c;你需要理解&#xff1a;1. 矩阵的压缩存储&#x…

np读取txt、csv文件的数据

目录 1、基础参数 2、参数详解 3、应用参数示例 机器学习中使用np.loadtxt()可以高效的导入数据&#xff0c;np.loadtxt()适合.txt文件和.csv文件。但是它默认读取float类型的值。 1、基础参数 numpy.loadtxt(fname, dtype, comments#, delimiterNone, convertersNone, s…

11. 类的继承

一、为什么要用继承 一个简化的Student类 class Student { private:string name;string studentID; public:string getName(){ return name; }void setName(string newName) { name newName; }string getStudentID(){ return studentID; }void setStudentID(string newID) {…

操作系统基础知识介绍之内存技术和优化(一)(包含SRAM和DRAM、SDRAM、GDRAMs)

使用 SRAM 可以满足最小化高速缓存访​​问时间的需要。 然而&#xff0c;当缓存未命中时&#xff0c;我们需要尽快将数据从主存中移出&#xff0c;这就需要高带宽内存。 这种高内存带宽可以通过将构成主内存的许多 DRAM 芯片组织成多个内存条并使内存总线更宽来实现&#xff0…

数字孪生可视化开发工具在各行业中的应用

数字孪生就是指在信息化平台内模拟物理实体、流程或者系统&#xff0c;即打造一个现实场景的数字化孪生双胞胎。出于成本和周期考虑&#xff0c;快速低成本搭建数字孪生系统成为中小型企业的期望&#xff0c;深圳华锐视点研发的UE4数字孪生编辑器&#xff0c;是一种能够帮助用户…

【Shell脚本】Linux安装Nginx以及开机自启

目录 一、Linux安装Nginx脚本1、把编写好的安装Nginx脚本放置到nginx.sh文件中2、在检查网络的时候&#xff0c;这里的IP地址&#xff0c;填写的需要安装Nginx服务器的IP地址3、这里的端口号可按照自己的需要进行修改4、安装Nginx脚本 二、Nginx开机自启 一、Linux安装Nginx脚本…

API网关|JD|pinduoduoAPI接入

API网关是什么 在日常工作中&#xff0c;不同的场合下&#xff0c;我们可能听说过很多次网关这个名称&#xff0c;这里说的网关特指API网关&#xff08;API Gataway&#xff09;。字面意思是指将所有API的调用统一接入API网关层&#xff0c;由网关层负责接入和输出。 那么在什…