11、组件入门及写个首页头部组件
前言：项目准备工作说了很久，不知道大家学会了没有？今天开始我们开始正式搭建页面，先从首页开始，在搭建页面的过程中，我也会将vue的知识点在其中穿插讲解，但是你最好是提前看看官方文档。ok，今天我们来讲下组件，然后搭个头部组件实现复用； GitHub：https://github.com/Ewall1106/mall
1、官方解读
（1）官方怎么说的啊？组件可以扩展HTML元素，封装可重用的代码，这句话中，记住可重用这几个字是很重要的，一般来说这就是答案——即到底什么时候应该把一部分的代码抽离出来构成组件？
来自官网
（2）关于组件的命名
组件的命名我在项目中统一用kebab-case （短横线）表示：
组件命名
（3）组件的复用 可以将组件进行任意次数的复用，举个栗子如下图，每次点击按钮，每个组件都会各自独自维护它的count；因为每用一次组件，就会有一个它的新实例被创建。
组件复用
（4）其它 还有很多关于组件使用的很重要的内容，如组件之间数据的传递，组件的事件等等，我们后面在项目中具体用到了再穿插。
2、组件的运用-创建头部组件
（1）新建一个myHeader头部组件
ok，我们进入components文件夹里面新建一个myHeader.vue组件，有helloworld.vue的删掉或者直接改个名直接用都是可以的，好了，代码敲完了以后变成了这幅模样：
myHeader.vue
仔细看看上图，一个myHeader.vue的页面分为了三个部分，<template></template>里面是放html代码的是为结构，<script></script>里面写js是为逻辑，<style></style>里些css是为样式，这就是vue里面的结构、样式、逻辑三者分离，我就不多说了，里面我序号标记了几个小要点，我说道一下：
- 这个
name大家应该明白，就是对这个组件的命名，具体表现在哪里，卖个关子，我们待会讲； data标记出来的意思就是记得data必须函数；- 第3点就是style里面这里有个
scoped，其实上面注释已经讲得很清楚了，我佛系翻译一下就是你加了css就只会作用于这个组件、这个页面，不会污染。
（2）组件的引入
- ok，我们在div里面加个helloworld便于展示：
往myHeader里面添加内容
- 然后在
home.vue里面引入:
home.vue
怎么引入的？import照着上图引入然后components属性里面注册一下，我这里讲下命名规范，import后面请使用首字母大写的形式MyHeader，template里面使用的时候用短横线连接法my-header 。
（3）组件的复用 组件的复用就很简单了，写复制粘贴一下就行，记住，组件都是独立的。
组件复用
localhost
（4）最后我们在回到第（1）点下面关于组件里面的name属性具体体现在哪里的问题
我们打开vue的插件，name属性的值就是组件的名字，你可以自己修改name属性看看效果：
vue devtools
3、然后，我修改myHeader.vue组件里面得内容，这就是我们的头部
加点样式：
Hxx-Luxury Store
4、题外话
（1）我有想了一会儿，到底这个小商场项目的场景是面向pc端还是手机端的运用呢？最后我觉得还是紧跟时代潮流，做成移动端的商场，有点webApp的意思，我觉得这样更具有实际意义，所以，以后看页面按完F12后请选取手机调试模式【抱拳】；
（2）里面很多小问题但也很重要的，比如import ... from后面为什么用@的问题，越到后面我就不会写的很细了，因为篇幅和文章侧重点的问题，所以，大家多培养自己自学google能力，也欢迎留言；
（3）如果有本章相关知识的学习链接欢迎留言分享，开源和分享精神我觉得是很重要的，感谢。