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

vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】

在这里插入图片描述

文章目录

    • 4.完成非路由组件Header与Footer业务
      • 4.1使用组件的步骤(非路由组件)
  • 本人其他相关文章链接

4.完成非路由组件Header与Footer业务

在咱们项目开发中,不在以HTML + CSS 为主,主要搞业务、逻辑
开发项目的流程:
(1)书写静态页面(HTML + CSS)
(2)拆分组件
(3)通过axios获取服务器的数据,动态展示
(4)完成相应的动态业务逻辑

注意点1:创建组件的时候,组件结构+组件的样式+图片资源

注意点2:本项目采用的是less样式,浏览器不识别less样式,需要通过less、less-loader【安装5版本的】对less进行处理,把less样式变为css样式,浏览器才可以识别。另外引入的版本不宜过高,否则也会出现莫名奇妙的错误。

安装命令如下

cnpm install --save less less-loader@5
或者
npm install --save less less-loader@5

注意点3:如果想让组件识别less样式,需要在style标签的身上加上lang=less

报错场景

错误场景1:cnpm不是内外部命令

在这里插入图片描述

原因:那就说明不认识命令cnpm,可以采用npm命令进行安装;另外有些人在IDEA中的Terminal终端窗口进行命令安装也显示失败,那么请用管理员权限打开CMD黑色窗口,进行命令安装。

安装cnpm命令:
npm install cnpm -g --registry=https://registry.npm.taobao.org

错误场景2:已经安装less、less-loader的前提下,引入的css样式还是爆红,比如如图

在这里插入图片描述

原因:如果想让组件识别less样式,需要在style标签的身上加上lang=less

4.1使用组件的步骤(非路由组件)

  • 创建或者定义
  • 引入
  • 注册
  • 使用

本人其他相关文章链接

1.vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
2.vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
3.vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
4.vue尚品汇商城项目-day01【3.项目路由的分析】
5.vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
6.vue尚品汇商城项目-day01【5.路由组件的搭建】
7.vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
8.vue尚品汇商城项目-day01【7.路由传参】
9.vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】

相关文章:

vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】

文章目录4.完成非路由组件Header与Footer业务4.1使用组件的步骤(非路由组件)本人其他相关文章链接4.完成非路由组件Header与Footer业务 在咱们项目开发中,不在以HTML CSS 为主,主要搞业务、逻辑 开发项目的流程: (1)…...

IDEA安装教程(图文详解,一步搞定)

文章目录第一步:官网下载IDEA第二步:卸载旧的IDEA(没有则跳过)第二步:安装IDEA第一步:官网下载IDEA 地址:https://www.jetbrains.com/idea/download/other.html 第二步:卸载旧的I…...

【01 DualCam Porting】

1、配置camera_custom_stero_setting.h a、增加sensor配置 /vendor/mediatek/proprietary/custom/mt6765/hal/camera/camera_custom_stereo_setting.h注意: 1)IMGOYUV Size:在有FOV crop的情况下,不能配置为sensor full size,建议比full size 小或者配置为fov crop的值…...

redis --- string类型的使用

目录 一、string类型使用 1.1、set key value参数解析 1.2、同时设置/获取多个键值 1.3、获取/设置指定区间范围内的值 1.4、数值增减 1.5、获取字符串长度和内容追加 1.6、分布式锁 1.7、getset(先get再set) 一、string类型使用 1.1、set key value参数解析 SET key v…...

康耐视visionpro-机器视觉定位引导-经验总结-来自视觉人粉丝分享

1、机器人吸取电路板,移动到拍照位置,并在电路板上找一个标记点,并且,通过机器人示教把当前电路板能够准确的放入到目标位置。 2、机器人吸取电路板吸取电路板,在x,y方向进行移动,总共移动4个位置&#xff…...

包管理工具npm

一:package.json 在某个文件路径下,执行 npm init。就会生成package.json文件。大致如下: {"name": "test","version": "1.0.0","description": "测试","main": &q…...

ChatGPT正进军各行各业,抓住机遇,拥有无限的可能性。

每一个新技术的出现都会对各行各业产生冲击,但关键在于如何抓住这个机遇。ChatGPT是一项非常具有前途的技术,它可以在许多领域为人们提供更好的服务和体验。这项技术的优势之一是它可以快速而准确地理解和解释自然语言,从而使人们可以更轻松地…...

Maven 多模块管理

多模块管理简单地理解就是一个 Java 工程项目中不止有一个 pom.xml 文件,会在不同的目录中有多个这样的文件,进而实现 Maven 的多模块管理 在多人使用Maven协作开发项目时,尤其是稍微上点规模的项目,每个RD的工作都细分到具体功能…...

crash 内核调试工具 ps 指令 显示的进程状态 RU, IN, UN, ZO, ST, TR, DE, SW, WA, PA 什么意思

crash> help ps | grep "the task state" 5. the task state (RU, IN, UN, ZO ,ST, TR, DE, SW, WA, PA, ID, NE) 参考linux-4.19.113内核源码(include/linux/sched.h),有如下定义 /** Task state bitmask. NOTE! These bits…...

Spring《二》bean的实例化与生命周期

🍎道阻且长,行则将至。🍓 上一篇:Spring《一》快速入门 下一篇:Spring《三》DI依赖注入 目录一、bean实例化🍍1.构造方法 ***2.静态工厂 *使用工厂创建对象实例化bean3.实例工厂 ***使用示例工厂创建对象实…...

java与kotlin 写法区别

原文链接:https://gitcode.net/mirrors/mindorksopensource/from-java-to-kotlin?utm_sourcecsdn_github_accelerator#assigning-the-null-value Print to Console 打印到控制台 Java System.out.print("Amit Shekhar"); System.out.println("Amit…...

服务器运行深度学习代码使用指南

该内容配置均在九天毕昇下配置。 当前系统使用的linux版本为:Ubuntu 18.04 LTS。 当前版本安装的是:cuda10.1。 九天毕昇平台:https://jiutian.10086.cn/edu/#/home 一、linux下运行python的操作 ls 为列出当前目录中的文件 cd 文件名 进入…...

计算机组成原理 - 2. 数据的表示和运算

整理自天勤高分笔记,购书链接: 24 天勤高分笔记 要记住的几个数字 📓: 215327682^{15} 3276821532768 216655362^{16} 6553621665536 23121474836482^{31} 21474836482312147483648 23242949672962^{32} 4294967296232429496…...

【js】基础知识点--语句,break和continue,switch,with,for..in,do-while,while

一、break和continue语句&#xff0c;常用 break 语句会立即退出循环&#xff0c;强制继续执行循环后面的语句。而 continue 语句虽然也是立即退出循环&#xff0c;但退出循环后会从循环的顶部继续执行 var num 0; for (var i1; i < 10; i) {if (i % 5 0) {break;}num; …...

【C++】迭代器

内容来自《C Primer&#xff08;第5版&#xff09;》9.2.1 迭代器、9.2.3 begin和end成员、9.3.6 容器操作可能使迭代器失效、10.4.3 反向迭代器 目录 1. 迭代器 1.1 迭代器范围 1.2 使用左闭合范围蕴含的编程假定 2. begin和end成员 3. 容器操作可能使迭代器失效 3.1 编…...

数据可视化在前端中的应用

前端开发中,数据可视化是一种非常重要的技术。它可以将复杂的数据以图形化的方式展示出来,让用户更容易理解和分析数据。在前端中,VUE是一种非常流行的JavaScript框架,可以用来实现各种数据可视化效果。 首先,让我们来看看一些常见的数据可视化方式: 表格:表格是数据可…...

FFmpeg 合并视频文件没声音,不同步原因

查了不少帖子也没搞明白&#xff0c;可能懂的人不会遇到吧。 1 没声音是因为我几个视频文件中&#xff0c;有的没音轨&#xff0c;就是用文字生成了个视频&#xff0c;需要先给它加个dummy的音轨才行。 2 视频不同步是因为各个视频格式不一样&#xff0c;参数挺多我也不知道具…...

绕不开的“定位”

绕开“定位”这个词谈企业战略和品牌 相当于揪住头发离开地球 定位这个词&#xff0c;已经进入商业界的心智中去了 发明这个词的特劳特和里斯的思想有啥差异&#xff1f; 《定位屋》刨析的很到位 趣讲大白话&#xff1a;把握概念的源头&#xff0c;就理解对了大部分 【趣讲信息…...

《Effective Objective-C 2.0 》 阅读笔记 item12

第12条&#xff1a;理解消息转发机制 1. 消息转发机制 当对象接收到无法解读的消息后&#xff0c;就会启动“消息转发”机制&#xff0c;开发者可经由此过程告诉对象应该如何处理未知消息。 消息转发分为两大阶段 第一阶段&#xff1a;先征询接收者所属的类&#xff0c;看其…...

云原生计算能消除技术债务吗?

云原生计算可以将行业领域驱动的设计、GitOps和其他现代软件最佳实践汇总起来&#xff0c;如果企业实施得当&#xff0c;可以减少技术债务。 云原生计算是企业IT的一种新范式&#xff0c;它涉及现代技术的方方面面&#xff0c;从应用程序开发到软件架构&#xff0c;再到保持一…...

ClickHouse连接避坑指南:Python开发者常遇到的5个问题及解决方案

ClickHouse连接避坑指南&#xff1a;Python开发者常遇到的5个问题及解决方案 当Python开发者初次尝试与ClickHouse建立连接时&#xff0c;往往会遇到各种意料之外的障碍。这些看似简单的连接问题&#xff0c;实际上可能隐藏着深层次的配置陷阱或性能瓶颈。本文将深入剖析五个最…...

告别复杂配置!OSHI+JNA五分钟搞定Windows/Linux/macOS硬件信息采集

五分钟极简指南&#xff1a;用OSHIJNA实现全平台硬件监控零门槛接入 运维工程师小张最近接手了公司混合云环境下的服务器监控任务。当他面对Windows服务器、Linux虚拟机、macOS开发机三种不同系统时&#xff0c;传统方案需要分别调用WMI、/proc文件系统和system_profiler&#…...

Qt属性动画进阶:QPropertyAnimation在自定义控件动态效果中的应用

1. QPropertyAnimation基础入门 第一次接触Qt动画框架时&#xff0c;我被QPropertyAnimation的简洁API惊艳到了。这个看似简单的类&#xff0c;却能创造出丝滑流畅的界面动效。先来看个最基础的例子&#xff1a;让按钮从左向右滑动。你只需要5行核心代码&#xff1a; QProperty…...

CosyVoice语音克隆实战:如何用300M轻量级模型实现跨语种音色复制

CosyVoice语音克隆实战&#xff1a;如何用300M轻量级模型实现跨语种音色复制 在数字内容创作领域&#xff0c;语音合成技术正经历着从机械朗读到情感化表达的质变。CosyVoice-300M作为一款轻量级语音克隆模型&#xff0c;以其仅300MB的体量实现了专业级的音色复制与跨语种转换能…...

告别轮询!GD32F407 ADC+DMA+定时器触发,实现多通道自动采集与存储

GD32F407 ADCDMA定时器触发&#xff1a;多通道自动采集系统设计指南 在物联网节点和工业监测设备开发中&#xff0c;高效稳定的数据采集系统是核心基础。传统轮询式ADC采集不仅占用大量CPU资源&#xff0c;还难以满足多通道同步、高精度定时采集的需求。本文将深入讲解基于GD32…...

Phi-4-reasoning-vision-15B多场景落地:OCR/图表分析/GUI理解三类任务统一部署

Phi-4-reasoning-vision-15B多场景落地&#xff1a;OCR/图表分析/GUI理解三类任务统一部署 1. 模型介绍 Phi-4-reasoning-vision-15B是微软推出的视觉多模态推理模型&#xff0c;能够处理多种视觉理解任务。这个模型特别擅长从图像中提取和理解信息&#xff0c;无论是文档文字…...

IndexTTS 2.0优化指南:如何选择参考音频,获得最佳克隆效果

IndexTTS 2.0优化指南&#xff1a;如何选择参考音频&#xff0c;获得最佳克隆效果 1. 引言&#xff1a;为什么参考音频如此重要&#xff1f; 在语音合成领域&#xff0c;参考音频就像是一把钥匙&#xff0c;决定了最终生成声音的质量和相似度。IndexTTS 2.0作为一款零样本音色…...

Aurix/Tricore实验解析:从链接脚本到汇编指令的Trap向量表构建

1. 理解Trap机制与向量表基础 在Aurix/Tricore架构中&#xff0c;Trap&#xff08;陷阱&#xff09;是处理器响应异常事件的硬件机制&#xff0c;相当于汽车的安全气囊——平时看不见&#xff0c;但遇到碰撞时会立即触发保护。与中断不同&#xff0c;Trap是同步触发的&#xff…...

Agent的决策模糊

文章目录Langchian Agent内部记忆:信息过载LLM注意力有限的解释&#xff1a;上下文窗口长度很大&#xff0c;会有这种问题么对比langGraphLangchian Agent内部记忆: 官方 ReAct 内部机制&#xff08;铁律&#xff09; LangChain 的 AgentExecutor 在一次 invoke () 内部&#…...

别再只会看原理图了!用Multisim仿真带你深入理解运放的“虚短虚断”与反馈

用Multisim仿真破解运放"虚短虚断"的底层逻辑 在电子电路设计中&#xff0c;运算放大器就像一位沉默的魔术师&#xff0c;用"虚短"和"虚断"两个基本概念演绎着各种精妙的信号处理戏法。但很多工程师在学习阶段只是机械记忆这两个术语&#xff0c…...