第六，vue组件及应用-创建头部组件

vue组件及应用-创建头部组件

①在components文件夹下面新建文件myHeader.vue组件，删掉留下来的helloworld.vue。

在myHeader.vue输入下面内容：

分析：myHeader.vue页面分成三个部分：

1，<template></template>里面放的是html代码，为结构部分。

2，<script></script>里面的js代码，为逻辑部分。

name:"myHeader",name设置了组件的名字。

data（）这个是必须函数。

3，<style></style>css样式代码。css就只会作用于这个组件、这个页面。

②在app.vue里面引入组件：

1，在import引入。

2，在export default {}里面的components属性注册组件

（命名规范：import后面要首字母大写，例如MyHeader。

template里面使用的时候用短横线连接，例如<my-header>）。

组件的复用：

复制粘贴一下就行，组件都是独立的。

打开谷歌浏览器按F12，切换到手机模式浏览，运行后效果：

③最后修改myHeader.vue的css，修改后内容如下：

⑤现在npm run dev运行项目，如果报错

* !!vue-style-loader!css-loader?{&quot;sourceMap&quot;:true}!

是因为使用设置css的时候引用了less文件，但是没有安装造成的。

<style lang="less">

现在开始安装less文件。

在cmd进入项目目录执行cnpm install --save-dev less-loader less，

安装完成之后再npm run dev 问题解决。