vue饿了么学习--项目实战--组件拆分

5-1笔记
(1).static文件目录，加入reset.css重置css
(2).移动端meta;在index.html加

<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）eslintrc.js里的rules添加你自定义规则

  'semi': ['error', 'always'],  //没有分号
  'indent': 0,  //缩进
 'space-before-function-paren': 0

（4）main.js

/* eslint-disable no-new */    跳过规则
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5-2\3笔记

（1）文件-设置，编辑器-代码模板

<template>
</template>
<script type="text/ecmascript-6">  //编译器识别es6语法
</script>
<style lang="stylus" rel="stylesheet/stylus">  //编译器识别stylus语法
</style>

（2）将components里的header引入App.vue
header.vue

<template>
  <div class="header">
    我是header
  </div>
</template>
<script type="text/ecmascript-6">
  export default { }
</script>

App.vue

<template>
  <div id="app">
    <v-header></v-header> 
</div>
</template>

<script type="text/ecmascript-6">

import header from './components/header/header'   //引入
export default {     //导出
    components: {
     'v-header': header     //定义组件名字
    }
}

</script>

style-loader会自动兼容游览器， css只写一种就可以