文章目录
- 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使用组件的步骤（非路由组件）
- 创建或者定义
- 引入
- 注册
- 使用
