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