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.路由跳转与传参相关面试题】

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

模式识别 —— 第六章 支持向量机(SVM)与核(Kernel)

模式识别 —— 第六章 支持向量机(SVM)与核(Kernel) 文章目录模式识别 —— 第六章 支持向量机(SVM)与核(Kernel)硬间隔(Hard-Margin)软间隔(Soft…

52LeetCode刷题_LeetCode刷题手册

虽然刷题一直饱受诟病,不过不可否认刷题确实能锻炼我们的编程能力,相信每个认真刷题的人都会有体会。现在提供在线编程评测的平台有很多,比较有名的有 hihocoder,LintCode,以及这里我们关注的 LeetCode。 LeetCode收录…

Spring 注解和 XML 配置文件重复定义 Bean,会怎样?

作者:明明如月学长, CSDN 博客专家,蚂蚁集团高级 Java 工程师,《性能优化方法论》作者、《解锁大厂思维:剖析《阿里巴巴Java开发手册》》、《再学经典:《EffectiveJava》独家解析》专栏作者。 热门文章推荐…

iPhone屏幕适配(之屏幕尺寸)

Device screen size 各设备屏幕尺寸 DeviceDimensions (portrait)iPhone 14 Pro Max430x932 pt (1290x2796 px 3x)iPhone 14 Pro393x852 pt (1179x2556 px 3x)iPhone 14 Plus428x926 pt (1284x2778 px 3x)iPhone 14390x844 pt (1170x2532 px 3x)iPhone 13 Pro Max428x926 pt (…

Element Plus 实例详解(七)___Typography 排版

Element Plus 实例详解(七)___Typography 排版 目录 一、前言 二、搭建Element Plus试用环境 1、搭建Vue3项目(基于Vite Vue) 2、安装Element Plus 三、Element Plus Typography 排版功能试用 1、字号 2、行高 3、Font-fam…

C语言:位运算符----与(),或(|),非(~),异或(^),左移(<<)和右移(>>)

C语言 基础开发----目录 一、位运算符----简介 位运算符 就是按二进制位进行运算。 C语言中位运算符主要包括六种&#xff0c;具体如下&#xff1a; 与(&)&#xff0c;或(|)&#xff0c;非(~)&#xff0c;异或(^)&#xff0c;左移(<<)和右移(>>) 位运算符含…

【C++】类和对象(三)

类和对象&#xff08;三&#xff09; 拷贝构造函数&#xff1a; 当我们想要将一个已确定的类变量的值拷贝给另外一个相同类型的类变量&#xff0c;有什么快捷的方法吗&#xff1f; 就相当于定义了一个int类型的i10&#xff0c;想将i复制给一个刚初始化的遍历j&#xff0c;in…

2022国赛E题完整成品文章数据代码模型--小批量物料的生产安排

基于LSTM循环神经网络的小批量物料生产安排分析 摘要 某电子产品制造企业面临以下问题&#xff1a;在多品种小批量的物料生产中&#xff0c;事先无法知道物料的 实际需求量。企业希望运用数学方法&#xff0c;分析已有的历史数据&#xff0c;建立数学模型&#xff0c;帮助企业…

优化测试生命周期行之有效的三种方法

确保软件质量和按时交付产品的最有效方法是什么&#xff1f;对于公司来说&#xff0c;无缺陷地为客户带来价值是一件重要的事情。随着软件开发生命周期变得越来越复杂&#xff0c;测试可能成为拖慢整个过程的瓶颈。为了加速它&#xff0c;创建了组织可以采用的多种策略和方法。…

python面向对象编程

&#x1f42c;在本次的博客当中我们要学习的是在python语言当中的面向对象的编程。我们之前学过的C语言是面向对象的编程。面向过程&#xff0c;其实就是面向着具体的每一个步骤和过程&#xff0c;把每一个步骤和过程完成&#xff0c;然后由这些功能方法相互调用&#xff0c;完…

Go语言精修(尚硅谷笔记)第十七和十八章

十七、反射 17.1 基本介绍 1 ) 反射可以在运行时动态获取变量的各种信息, 比如变量的类型(type)&#xff0c;类别(kind) 2 ) 如果是结构体变量&#xff0c;还可以获取到结构体本身的信息(包括结构体的字段、方法) 3 ) 通过反射&#xff0c;可以修改变量的值&#xff0c;可以…

react脚手架

一、首先了解一下react脚手架 .xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 a.包含了所有需要的配置&#xff08;语法检查、jsx编译devServer…&#xff09; b.下载好了所有相关的依赖 c.可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库:…

LLaMA:Open and Efficient Foundation Language Models

LLaMA&#xff1a;Open and Efficient Foundation Language ModelsIntroductionApproachPre-training DataArchitectureIntroduction 在大规模数据下训练的大模型&#xff0c;已经展示了很好的表现&#xff0c;当模型足够大的时&#xff0c;模型会出现一个涌现的能力&#xff…

Chapter8.3:控制系统校正的根轨迹法

该系列博客主要讲述Matlab软件在自动控制方面的应用&#xff0c;如无自动控制理论基础&#xff0c;请先学习自动控制系列博文&#xff0c;该系列博客不再详细讲解自动控制理论知识。 自动控制理论基础相关链接&#xff1a;https://blog.csdn.net/qq_39032096/category_10287468…

区块链技术之密码学

密码学是研究编制密码和破译密码的技术科学&#xff0c;研究密码变化的客观规律&#xff0c;应用于编制密码以保守通信秘密的&#xff0c;成为编码学&#xff1b;应用于破译密码以获取通信情报的&#xff0c;称为破译学&#xff0c;总称密码学。在区块链中重要问题之一就是区块…

锁 一、锁的分类 1.1 可重入锁、不可重入锁 Java中提供的synchronized&#xff0c;ReentrantLock&#xff0c;ReentrantReadWriteLock都是可重入锁。 重入&#xff1a;当前线程获取到A锁&#xff0c;在获取之后尝试再次获取A锁是可以直接拿到的。 不可重入&#xff1a;当前…

Eclipse下载使用手册

Eclipse下载使用手册 目录Eclipse下载使用手册Eclipse的介绍与安装Eclipse简介Eclipse的下载Eclipse的解压Eclipse的介绍与安装 Eclipse简介 Eclipse 是一个开放源代码的&#xff0c;基于 Java 的可扩展开发平台。Eclipse官方版是一个集成开发环境(IDE)&#xff0c;可以通过安…

MySQL-自带工具介绍

目录 &#x1f341;mysql &#x1f341;mysqladmin &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;MySQL专栏&#xff1a;MySQL专栏地址 MySQL数据库不仅提供了数据库的服务器端应用程序&#xff0c;同时还提供了大量的客户端工具程序&#xff0c;如mysql&a…

Linux安装MySQL5.7MySQL8.0

Linux安装MySQL5.7一、设置yum源并安装1.1 配置rpm仓库1.1.1 更新密钥1.1.2 安装mysql yum库1.2 使用yum进行安装1.3 启动并配置开机启动二、配置MySQL2.1 获取初始密码2.2 登录MySQL2.3 修改root密码2.3.1 设置复杂密码(默认)2.3.2 设置简单的用户密码2.4 授权root用户远程登陆…

蓝桥杯第十四届校内赛(第三期) C/C++ B组

一、填空题 &#xff08;一&#xff09;最小的十六进制 问题描述   请找到一个大于 2022 的最小数&#xff0c;这个数转换成十六进制之后&#xff0c;所有的数位&#xff08;不含前导 0&#xff09;都为字母&#xff08;A 到 F&#xff09;。   请将这个数的十进制形式作…