当前位置： 首页 > news >正文

带你用uniapp从零开发一个仿小米商场_2.创建空白项目及公共样式引入

news 2026/1/23 0:00:19

创建空白项目

  1. 打开uniapp 点击新建->项目
    在这里插入图片描述

如下,

  1. 是编辑你项目的名字的地方
  2. 是你项目存放地址,可以点击浏览器去文件管理里面选地址
  3. 是模板选择,这里选择默认模板就好
  4. 是一些其他选择比如uvue能让你项目在编译成软件时运行更快,unicloud能让你用js写后端,且直接就是云开发,gitcode就是一个类似于github的代码托管平台
    在这里插入图片描述

认识项目文件结构

创建完成后就是如下这个界面,
下
1.是你项目文件加名称,可以在此处右键到资源管理器打开
2.是pages页面,项目的各个页面一般放置在此处
3.是static文件夹,一些放前端服务器的静态资源将保存在此处,比如程序logo,字体样式,
4.是项目的各种配置文件或程序入口
在这里插入图片描述

公共样式引入

一共引入4个文件

  1. uni.css 官方ui库
  2. animate.css 一个经典的动画库,ps:可以去它的官网看看,这是一个很古老很经典的动画库
  3. icon.css 图标库
  4. common.css 自定义公共样式

ps: 我个人是更建议使用官方的库,因为第三方库的话更新会带来维护成本

1.引入uni.css

  1. 创建一个hello-app的项目
    在这里插入图片描述3. 将hello-app中common目录拷贝到自己项目的根目录下,你可以不创建,这个文件稍后会打包上传,
    在这里插入图片描述
    然后在自己的项目下创建common目录,并将uni.css放进去

在这里插入图片描述
在app.vue页面的style标签内引入uni.css

在这里插入图片描述
引入animate.css
可以直接去animate.css官网下载然后再引入,也可以直接用npm引入

animate.css官网http://www.animate.net.cn/
还可以直接用我提供的引入

在这里插入图片描述
唉,都在这里面了,就直接全部引入吧

在这里插入图片描述

运行uniapp项目

点击菜单栏的运行,然后选择运行到内置浏览器

tips;如果你是第一次运行,那么这里会让你安装插件,安装好后再次运行就好
在这里插入图片描述

注意,这里会有一个报错
在这里插入图片描述
这是uniapp的 uni.css 的报错,可以看报错的地方

在这里插入图片描述
在这个地方引入了一个字体图标库,但是我们static下面根本,没有这个字体,所以会报错

解决办法有两个,
1.去拿到uni.css库的项目里,把字体拿过来
2. 直接把这行删了,用默认字体

本人一向秉承着头痛砍头的原则,所以直接把这行代码删了

tips: 这里直接删是因为,这只是一个当作教学的项目,正式项目中可别这样

再次运行后就能看到项目正式启动了

在这里插入图片描述

相关文章：

带你用uniapp从零开发一个仿小米商场_2.创建空白项目及公共样式引入

创建空白项目 打开uniapp 点击新建->项目 如下, 是编辑你项目的名字的地方是你项目存放地址,可以点击浏览器去文件管理里面选地址是模板选择,这里选择默认模板就好是一些其他选择比如uvue能让你项目在编译成软件时运行更快,unicloud能让你用js写后端,且直接就是云开发,g…...

编程日记 2023/11/28 10:46:40

1144. 连接格点，Kruskal算法，二维矩阵压缩为一维

有一个 m 行 n 列的点阵，相邻两点可以相连。 一条纵向的连线花费一个单位，一条横向的连线花费两个单位。 某些点之间已经有连线了，试问至少还需要花费多少个单位才能使所有的点全部连通。 输入格式 第一行输入两个正整数 m 和 n。 以下若…...

编程日记 2023/11/28 10:45:38

C++ ： 友元（未完结）

不能从外部访问类的私有数据成员和方法，但这条规则不适用于友元类和友元函数。要声明友元 类或友元函数，可使用关键字 friend，通过让函数成为类的友元，可以赋予该函数与类的成员函数 同的访问权限。 生活中你的家有客厅 (Public)…...

编程日记 2023/11/28 10:43:37

Nginx 服务器 SSL 证书安装部署

操作场景 本文档以证书名称 menglinfeng.top 为例。 Nginx 版本以 nginx/1.18.0 为例。 当前服务器的操作系统为 CentOS 7，由于操作系统的版本不同，详细操作步骤略有区别。 安装 SSL 证书前，请您在 Nginx 服务器上开启 “443” 端口&#xf…...

编程日记 2023/11/28 10:42:36

GC9118S低压 5V 全桥驱动芯片，内置过温保护，低电流睡眠模式，可替代TMI8118

GC9118S 是一款低压 5V 全桥驱动芯 片，为摄像机、消费类产品、玩具和其他低 压或者电池供电的运动控制类应用提供了集 成的电机驱动解决方案。 GC9118S 能提供高达 1.1A 的持续输出 电流。可以工作在 2~6V 的电源电压上。 GC9118S 具有 PWM （ IN/…...

编程日记 2023/11/28 10:40:34

windows dockerdesktop 安装sqlserver2022

1.下载windows dockertop软件 下载连接 2.安装完成配置，下载源地址 {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"registry-mirrors": …...

编程日记 2023/11/28 10:39:32

在ubuntu系统安装SVN服务端,并通过客户端进行远程访问

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…...

编程日记 2023/11/28 10:38:32

STL函数对象-C++

1. 函数对象 1.1 函数对象概念 概念： 重载函数调用操作符的类，其对象常称为函数对象函数对象使用重载的 () 时，行为类似函数调用，也叫仿函数 本质： 函数对象（仿函数）是一个类，不…...

编程日记 2023/11/28 10:37:31

Ubuntu 设置Nginx开机自启

1.建立自启动服务文件 vim /usr/lib/systemd/system/nginx.service Descriptionnginx - high performance web server Afternetwork.target remote-fs.target nss-lookup.target [Service] Typeforking ExecStart/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx…...

编程日记 2023/11/28 10:36:30

npm中的npx命令

1.概念 npx是一个执行npm软件包的二进制文件&#xff0c;通俗的讲&#xff0c;他可以执行npm的一些指令。 2.示例 用babel将ES6语法转为ES5语法 npx babel src/js -d dist/js会执行babel的相关功能&#xff0c;如果没有安装&#xff0c;也会自动安装。 当在执行npx <co…...

编程日记 2023/11/28 10:35:28

python绘制Z形图 青少年电子学会等级考试 中小学生python编程等级考试一级真题答案解析2023年5月

目录 python绘制Z形图 一、题目要求 二、算法分析 三、程序代码...

编程日记 2023/11/28 10:34:27

conda环境下module ‘PIL.Image‘ has no attribute ‘ANTIALIAS‘

1 问题描述 在训练语音模型时&#xff0c;出现如下错误&#xff1a; Traceback (most recent call last):File "/opt/Bert-VITS2-2.0.2.1/train_ms.py", line 660, in <module>run()File "/opt/Bert-VITS2-2.0.2.1/train_ms.py", line 282, in run…...

编程日记 2023/11/28 10:33:26

蓝桥杯每日一题2023.11.26

题目描述 奖券数目 - 蓝桥云课 (lanqiao.cn) 将每一个数字进行一一枚举&#xff0c;如果检查时不带有数字4则答案可以加1 #include<bits/stdc.h> using namespace std; int ans; bool check(int n) {while(n){if(n % 10 4)return false;n / 10; }return true; } int m…...

编程日记 2023/11/28 10:31:23

Centos 7.9 Install Docker Insecure Registry

文章目录 1. 镜像存储规划2. 安装定制 docker3. 部署 registry4. 验证镜像仓库 1. 镜像存储规划 linux LVM /dev/sdb mount dir /data【linux LVM 磁盘挂载目录】 创建两个目录 一个 docker 数据存储目录 &#xff1a;/data/docker&#xff0c;默认一般为linux为 /var/lib/d…...

编程日记 2023/11/28 10:30:22

探秘网络通信：UDP与TCP/IP的奥秘

**> &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 探秘网络通信&#xff1a;UDP与TCP/IP的奥秘 前言第一&#xff1a;UDP基础概念UDP的基础概念&#xff1a;UDP的特点和优势UDP与TCP/IP的关系 工作原理1. 无连接性和面…...

编程日记 2023/11/28 10:29:21

Docker的学习笔记

1.1 docker的介绍 1.2 docker的一次安装 //如果是root用户&#xff0c;不加sudo也行curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian/gpg | sudo apt-key add -echo deb https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian/ buster stable…...

编程日记 2023/11/28 10:28:20

解析直播第三方美颜SDK：技术原理与应用

时下&#xff0c;直播平台和主播们纷纷引入美颜技术&#xff0c;以提升视觉效果和用户体验。而在众多美颜技术中&#xff0c;直播第三方美颜SDK成为许多开发者和平台的首选&#xff0c;因其灵活性和高效性而备受推崇。 一、技术原理&#xff1a;美颜算法的精髓 第三方美颜SDK…...

编程日记 2023/11/28 10:27:19

线程基本方法

1。设置线程名 继承Thread类的线程&#xff0c;可以直接使用.setName()方法&#xff0c;设置线程名。也可以使用构造方法&#xff0c;需要注意java默认不继承构造方法&#xff0c;所以需要自己调用下父类的构造方法。 public class Demo {public static void main(String[…...

编程日记 2023/11/28 10:25:17

Linux操作系统 1.初识Linux

一、Linux学习大致内容 二、操作系统概述 操作系统的作用&#xff1a; 常见操作系统&#xff1a; 1、pc&#xff08;电脑端&#xff09;&#xff1a;windows、Linux、MacOS 2、移动端&#xff1a;Android、ios、鸿蒙系统 总结 1.计算机由哪两个部分组成&#xff1f;、 硬件…...

编程日记 2023/11/28 10:24:14

分布式事务-两阶段提交2PC

2PC协议就是两阶段提交&#xff0c;用来解决分布式事务&#xff0c;分为两个阶段&#xff0c;分别为Prepare和Commit&#xff0c;也是PC由来。 第一阶段Prepare 提交事务请求 如图所示&#xff0c;主要流程有以下三个方面 询问&#xff1a;事务协调者(Manager)向所有的事务参与…...

编程日记 2023/11/28 10:23:14

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/22 18:50:47

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/14 19:06:08

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/1/20 23:25:54

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/22 10:49:56

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/15 5:26:58

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/22 8:08:31