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

ゝ一纸荒年。 2024-03-24 12:25 37阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  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不是内外部命令

![在这里插入图片描述][5b5bc62d2b1449069d1e82bad6799aed.png_pic_center]

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

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

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

![在这里插入图片描述][abc4895483104d1490fb03cb0fa35812.png_pic_center]

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

#### 4.1使用组件的步骤（非路由组件） ####

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

## 本人其他相关文章链接 ##

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

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0c77bc8f11094c8f9369932a9c35ee00.png
[5b5bc62d2b1449069d1e82bad6799aed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e0930b3b7bb8467994aeb4a23494efcd.png
[abc4895483104d1490fb03cb0fa35812.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/41fbdac7b7ca4acf9671a5bb24725b82.png
[vue_-day00_vue2]: https://blog.csdn.net/a924382407/article/details/129880297
[vue_-day01_1.vue-cli]: https://blog.csdn.net/a924382407/article/details/129879169
[vue_-day01_2.vue-cli]: https://blog.csdn.net/a924382407/article/details/129879406
[vue_-day01_3.]: https://blog.csdn.net/a924382407/article/details/129881128
[vue_-day01_4._Header_Footer]: https://blog.csdn.net/a924382407/article/details/129881205
[vue_-day01_5.]: https://blog.csdn.net/a924382407/article/details/129881287
[vue_-day01_6.Footer]: https://blog.csdn.net/a924382407/article/details/129881425
[vue_-day01_7.]: https://blog.csdn.net/a924382407/article/details/129882067
[vue_-day01_8.]: https://blog.csdn.net/a924382407/article/details/129882108