前端开发规范

文件夹命名：小驼峰

homePage

页面命名: 小驼峰

homePage.vue

路由命名：

{
  path: '/homePage', // 小驼峰
  name: 'HomePage', // 大驼峰
  components: () => import('@/views/homePage'),
  meta: {
    title: '首页’
  }
}

css命名：用“-”分割字母
例：

<div class="home-header"></div>

引用组件
子组件：components/noData.vue

<template>
  <div class='no-data-wrapper' :style='{height: height}'>
    <div class='no-data-box'>暂无内容</div>
  </div>
</template>

<script>
export default {
  name: 'NoData', // 大驼峰
  data () {
    return {}
  },
  props: {
    height: {
      type: String,
      default: '398px'
    }
  }
}
</script>

<style lang="stylus" scoped>
.no-data-wrapper
  position relative
  .no-data-box
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    height 90px
    width 100px
    text-align center
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #646363;
    padded_box(border-box, 76px 0 0)
    background url('~assets/img/no_reslut@3x.png') no-repeat center top 0 / 66px 66px
</style>

父组件：

<template>
  <div class="main">
    <ul class="list">
      <li v-for="(info,i) in 5" :key="i" class="item">{{info}}</li>
      <!---组件名不需要用-分割-->
      <noData/>
    </ul>
  </div>
</template>
<script>
import noData from './components/noData'
export default {
  name: 'HomePage',
  components: {
    noData // 小驼峰
  },
  data () {
    return {}
  }
}
</script>
<style lang="stylus" scoped>

</style>