【UniApp开发小程序】项目创建+整合UI组件(FirstUI和uView)

创建项目

在这里插入图片描述
下图为初始化的项目的文件结构
在这里插入图片描述

引入组件

俗话说:“工欲善其事,必先利其器”,为了更加方便地开发出页面较为美观的小程序,我们先引入成熟的UI组件,再开始开发之旅。(如果你是前端高手,也可以选择手写样式,冲!!!)

FirstUI

npm安装

首先动动小手打开终端
在这里插入图片描述
输入一下命令,安装组件到项目中
在这里插入图片描述

配置

在pages.json添加配置,添加了这段配置之后,无需在页面中引入组件,直接使用组件即可。

"easycom": {"autoscan": true,"custom": {"fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue"}
}

在这里插入图片描述
测试
在这里插入图片描述
组件生效,引入组件完成
在这里插入图片描述

<fui-button style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="success" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="warning" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="danger" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="purple" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>

引入之后,发现有的组件需要vip,所以我决定换一套UI组件(富哥请直接开通vip,哈哈)
在这里插入图片描述

uView

npm安装

npm install uview-ui@2.0.36

在这里插入图片描述
uView依赖于SCSS,需要通过一下命令安装对sass(scss)的支持

// 安装sass
npm i sass -D// 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

在这里插入图片描述

配置

main.js中引入uView的JS库

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

注意:这两行要放在import Vue之后
在这里插入图片描述

uni.scss中引入uview的scss文件

@import 'uview-ui/theme.scss';

在这里插入图片描述

App.vue引入uView基础样式

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

在这里插入图片描述

pages.json中配置easycom组件模式

配置easycom之后,不需要在页面中import相应的组件,直接使用即可

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

注意点

  • page.json中只能有一个easycom字段
  • 配置之后,需要重启项目才能生效
    在这里插入图片描述

测试

在这里插入图片描述
在这里插入图片描述
组件引入成功,可以愉快地开始开发了

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

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

相关文章

移动端深度学习部署:TFlite

1.TFlite介绍 &#xff08;1&#xff09;TFlite概念 tflite是谷歌自己的一个轻量级推理库。主要用于移动端。 tflite使用的思路主要是从预训练的模型转换为tflite模型文件&#xff0c;拿到移动端部署。 tflite的源模型可以来自tensorflow的saved model或者frozen model,也可…

MotionBert论文解读及详细复现教程

MotionBert&#xff1a;统一视角学习人体运动表示 通过学习人体运动表征&#xff0c;论文原作者提出了处理以人为中心的视频任务的统一方法。使用双流时空transformer&#xff08;DSTformer&#xff09;网络实现运动编码器&#xff0c;能够全面、自适应地捕获骨骼关节之间的远…

在php中安装php_xlswriter扩展报错,找不到php_xlswriter.dll

前言&#xff1a;这里已经把下载的php_xlswriter.dll扩展放到了php安装目录的ext目录下&#xff0c;运行php -m还是报错找不到该扩展 原因&#xff1a;下载的扩展是nts的&#xff0c;而安装的php是ts的。查看当前php是nts还是ts&#xff1a; 在PHP中&#xff0c;可以利用phpin…

在线乞讨系统 Docker一键部署

begger乞讨网 在线乞讨 全球要饭系统前端界面后端界面H2 数据库 console运行命令访问信息支付平台 在线乞讨 全球要饭系统 在线乞讨全球要饭项目,支持docker一键部署&#xff0c;支持企业微信通知&#xff0c;支持文案编辑 前端界面 后端界面 H2 数据库 console 运行命令 项…

TCP/IP网络编程 第十六章:关于IO流分离的其他内容

分离I/O流 两次I/O流分离 我们之前通过2种方法分离过IO流&#xff0c;第一种是第十章的“TCPI/O过程&#xff08;Routine&#xff09;分离”。这种方法通过调用fork函数复制出1个文件描述符&#xff0c;以区分输入和输出中使用的文件描述符。虽然文件描述符本身不会根据输入和输…

Spring框架概述及核心设计思想

文章目录 一. Spring框架概述1. 什么是Spring框架2. 为什么要学习框架&#xff1f;3. Spring框架学习的难点 二. Spring核心设计思想1. 容器是什么&#xff1f;2. IoC是什么&#xff1f;3. Spring是IoC容器4. DI&#xff08;依赖注入&#xff09;5. DL&#xff08;依赖查找&…

数据结构_进阶(1):搜索二叉树

1.内容 建议再看这节之前能对C有一定了解 二叉树在前面C的数据结构阶段时有出过&#xff0c;现在我们对二叉树来学习一些更复杂的类型&#xff0c;也为之后C学习的 map 和 set 做铺垫 1. map和set特性需要先铺垫二叉搜索树&#xff0c;而二叉搜索树也是一种树形结构2. 二叉搜…

Stable Diffusion生成图片参数查看与抹除

前几天分享了几张Stable Diffusion生成的艺术二维码&#xff0c;有同学反映不知道怎么查看图片的参数信息&#xff0c;还有的同学问怎么保护自己的图片生成参数不会泄露&#xff0c;这篇文章就来专门分享如何查看和抹除图片的参数。 查看图片的生成参数 1、打开Stable Diffus…

Ubuntu 安装 Docker

本文目录 1. 卸载旧版本 Docker2. 更新及安装工具软件2.1 更新软件包列表2.2 安装几个工具软件2.3 增加一个 docker 的官方 GPG key2.4 下载仓库文件 3. 安装 Docker3.1 再次更新系统3.2 安装 docker-ce 软件 4. 查看是否启动 Docker5. 验证是否安装成功 1. 卸载旧版本 Docker …

【iOS】—— 属性关键字及weak关键字底层原理

文章目录 先来看看常用的属性关键字有哪些&#xff1a;内存管理有关的的关键字&#xff1a;&#xff08;weak&#xff0c;assign&#xff0c;strong&#xff0c;retain&#xff0c;copy&#xff09;关键字weak关键字assignweak 和 assign 的区别&#xff1a;关键字strong&#…

React(3)

1.案例选项卡 import React, { Component } from reactexport default class App extends Component {state{tabList:[{id:1,text:"电影"},{id:2,text:"影院"},{id:3,text:"我的"}]}render() {return (<div><ul>{this.state.tabList…

【LocalSend】开源跨平台的局域网文件传输工具,支持IOS、Android、Mac、Windows、Linux

工作前提条件&#xff1a;设备使用相同的局域网。 LocalSend is a cross-platform app that enables secure communication between devices using a REST API and HTTPS encryption. Unlike other messaging apps that rely on external servers, LocalSend doesn’t require …

【经济调度】基于多目标宇宙优化算法优化人工神经网络环境经济调度研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码及数据 &#x1f4a5;1 概述 基于多目标宇宙优化算法&#xff08;Multi-Objective Universe Optimization Algorithm, MOUA&#xff09;优化人工神经网络环境经济调度是一…

预付费电表收费系统

预付费电表收费系统是一种先进的电表管理系统&#xff0c;它能够帮助电力公司更加高效地管理电表收费&#xff0c;提高用电效率&#xff0c;降低能源浪费。本文将从以下几个方面介绍预付费电表收费系统的特点和优势。 一、预付费电表收费系统的原理 预付费电表收费系统是指用户…

Hadoop集群启动常见错误

错误一 &#xff1a; 配置文件错误 解决方案&#xff1a;检查配置文件&#xff0c;修改错误。重新分发&#xff08;同步&#xff09; 常见错误二 &#xff1a; 重复格式化 DataNode NameNode 在格式化时如果发现下面的提示说明重复格式化了 datanode和namenode的集群id…

Spring Cloud 远程接口调用OpenFeign负载均衡实现原理详解

环境&#xff1a;Spring Cloud 2021.0.7 Spring Boot 2.7.12 配置依赖 maven依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId> </dependency> <dependency&…

一百三十、海豚调度器——用DolphinScheduler定时调度HiveSQL任务

一、目标 用海豚调度器对Hive数仓各层数据库的SQL任务进行定时调度。比如&#xff0c;DWD层脱敏清洗表的动态插入数据、DWS层指标表的动态插入数据 二、工具版本 1、海豚调度器&#xff1a;apache-dolphinscheduler-2.0.5-bin.tar.gz 2、Hive&#xff1a;apache-hive-3.1.2…

长短期记忆网络(LSTM)原理解析

长短期记忆网络&#xff08;Long Short-Term Memory&#xff0c;简称LSTM&#xff09;是一种常用于处理序列数据的深度学习模型。它在循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;的基础上进行了改进&#xff0c;旨在解决传统RNN中的梯度消失…

PyTorch训练RNN, GRU, LSTM:手写数字识别

文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集&#xff1a;MNIST 该数据集的内容是手写数字识别&#xff0c;其分为两部分&#xff0c;分别含有60000张训练图片和10000张测试图片 图片来源&#xff1a;https://tensornews.cn/mnist_intr…

Kafka消息监控管理工具Offset Explorer的使用教程

1、kafka监控管理工具 Offset Explorer是一款用于监控和管理Apache Kafka集群中消费者组偏移量的开源工具。它提供了一个简单直观的用户界面&#xff0c;用于查看和管理Kafka消费者组偏移量的详细信息。 Offset Explorer具有以下主要功能和特点&#xff1a; 实时监控&#x…