当前位置: 首页 > 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;再到保持一…...

iOS内购避坑指南:从沙盒测试到正式上线的完整流程(附常见错误解决方案)

iOS内购全流程实战&#xff1a;从沙盒测试到生产环境的避坑手册 当你第一次集成iOS内购&#xff08;IAP&#xff09;时&#xff0c;是否遇到过这些场景&#xff1f;用户付款后商品迟迟未到账、沙盒测试时收据验证总是失败、审核阶段一切正常但上线后出现大量丢单...这些问题往往…...

利用快马AI平台,十分钟为小龙虾openclaw机械爪搭建可运行原型

最近在折腾一个开源机械爪项目——小龙虾openclaw&#xff0c;需要快速验证硬件设计和控制逻辑。传统开发流程从写代码到烧录测试至少半天起步&#xff0c;但这次尝试用InsCode(快马)平台做原型开发&#xff0c;居然十分钟就搞定了可运行版本&#xff01;记录下这个高效的工作流…...

qstock量化分析:3行代码实现多市场数据获取与可视化

qstock量化分析&#xff1a;3行代码实现多市场数据获取与可视化 【免费下载链接】qstock qstock由“Python金融量化”公众号开发&#xff0c;试图打造成个人量化投研分析包&#xff0c;目前包括数据获取&#xff08;data&#xff09;、可视化(plot)、选股(stock)和量化回测&…...

PID调参翻车实录:STM32驱动编码电机时,P值过大为何电机啸叫还振荡?

PID调参实战&#xff1a;STM32编码电机啸叫与振荡问题深度解析 当你在深夜实验室里第一次听到电机发出刺耳的啸叫声&#xff0c;同时观察到示波器上速度曲线像过山车一样上下震荡时&#xff0c;那种既困惑又兴奋的感觉&#xff0c;相信每个做过电机控制的工程师都深有体会。这不…...

终极指南:如何为Muzei Live Wallpaper配置GitHub Actions自动化构建与测试

终极指南&#xff1a;如何为Muzei Live Wallpaper配置GitHub Actions自动化构建与测试 【免费下载链接】muzei Muzei Live Wallpaper for Android 项目地址: https://gitcode.com/gh_mirrors/mu/muzei Muzei Live Wallpaper是一款备受欢迎的Android动态壁纸应用&#xf…...

AI赋能开发:让快马平台智能理解并生成产区标准图交互应用

AI赋能开发&#xff1a;让快马平台智能理解并生成产区标准图交互应用 最近在做一个农产品产区标准查询系统的项目&#xff0c;发现用传统方式开发这类需求特别费时。比如要处理用户自然语言查询、动态生成地图、实现智能推荐逻辑&#xff0c;光写基础代码就得花好几天。后来尝…...

暗黑破坏神3自动化工具:智能技能管理与效率提升解决方案

暗黑破坏神3自动化工具&#xff1a;智能技能管理与效率提升解决方案 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 在暗黑破坏神3的冒险旅程中&…...

别再死记硬背公式了!用Simulink玩转单相全桥逆变,从方波驱动到IGBT参数设置全解析

用Simulink玩转单相全桥逆变&#xff1a;从方波驱动到IGBT参数设置的实战指南 电力电子领域的学习常常陷入公式推导的泥潭&#xff0c;而Simulink提供的可视化仿真环境就像一盏明灯。想象一下&#xff0c;当你调整一个参数就能立即看到波形变化&#xff0c;比纸上推导要直观十倍…...

Java实现海康萤石摄像头实时监控与视频流获取全攻略

1. 海康萤石摄像头接入前的准备工作 第一次接触海康萤石摄像头开发时&#xff0c;我花了整整两天时间才搞明白整个接入流程。这里把踩过的坑都总结出来&#xff0c;让你少走弯路。首先需要明确的是&#xff0c;萤石开放平台提供了完整的API文档和SDK支持&#xff0c;但实际开发…...

如何3分钟制作专业证件照?HivisionIDPhotos免费AI工具全攻略

如何3分钟制作专业证件照&#xff1f;HivisionIDPhotos免费AI工具全攻略 【免费下载链接】HivisionIDPhotos ⚡️HivisionIDPhotos: a lightweight and efficient AI ID photos tools. 一个轻量级的AI证件照制作算法。 项目地址: https://gitcode.com/GitHub_Trending/hiv/Hi…...