vue饿了么学习-第七篇（组件拆分）

1.刑部商家信息不变；横导航栏，控制下部的内容切换。

2.引入一个重置浏览器样式，static文件，放在主项目下面，在index.html中引入这个static文件下的reset.css。

这个网页开发为手机端使用，所以需要在index.html中通过meta标签配置一下视口内容。

<meta name="viewport" 

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">

3.有习惯在代码结尾添加分号的，运行文件时候会报错，所以需要在.eslintre.js中的rules数据里，添加一行，就不会报错了。（缩进报错也在这下面配置）

//如果经常使用分号，需要在这里配置
'semi':['error': 'always']

更多学习eslint可以去官网学习，具体的配置文件。

针对main.js文件中的一行

/* eslint-disable no-new */

是对规则进行校验，否则报错，这也是eslint的规范。

5.对app.vue进行操作：

删除components下面的hello组件，

在main.js中删除引入的hello组件，编写新的新的内容，看能不能正常运行，

<template>
  <div id="app">
    <!--<router-view></router-view>-->
    <div class="header">
      this is header!
    </div>
    <div class="tab">
      this is tab!
    </div>
    <div class="content">
      this is content!
    </div>
  </div>

</template>

在index.js中删除引入的hello组件，

6.新建组件：在component目录下，新增一个header组件并暴露出去使用。

<template>
  <div class="header">
    this is com-header!
  </div>
</template>

<script type="text/ecmascript-6">
  export default {}
</script>

同时在app.vue下面引入这个Header组件

<template>
  <div id="app">
    <!--<router-view></router-view>-->   
    <m-header></m-header>
  </div></template><script>
import mHeader from './components/header/header'
export default{
  components: {
    mHeader
  }
</script>

（值得一提：为了使每个新建的vue文件都能快捷生成固定框架码，可以在设置里面，对“文件和代码”进行添加一个vue样式的文件，设置好基础的代码片就可以了。）

（设置的代码片里面，如果把style的lang设置成了stylus-loader，则要检查项目是否安装了这个插件，不然报错。）

7.安装less，cnpm i less --save, 针对横条进行flex布局（这里暂时没有使用element-ui）.

static样式提取：链接: https://pan.baidu.com/s/1i5lAGCH 密码: qu3g