学习

App.vue源码

<template>
    <div id="app" v-cloak>
        <loading></loading>
        <layout-header></layout-header>
        <layout-body></layout-body>
        <layout-footer></layout-footer>
    </div>
</template>
<script>
    import layoutHeader from '@/components/layout/layout-header'
    import layoutBody from '@/components/layout/layout-body'
    import layoutFooter from '@/components/layout/layout-footer'
    import Loading from '@/components/loading'
    export default {
        name: "app",
        components: {
            layoutHeader,
            layoutBody,
            layoutFooter,
            Loading
        }
    }
</script>
<style lang="less">
    #app {
        font-size: 17px;
        color: #6f6f6f;
    }
</style>

查漏补缺

路径中的@符号什么意思

博客切图

模仿

模仿源码

<template>
  <div id="app">
    <hzh-loading></hzh-loading>
    <hzh-header>黄子涵</hzh-header>
    <hzh-main>黄春钦</hzh-main>
    <hzh-footer>陈兰英</hzh-footer>
  </div>
</template>

<script>
import hzhHeader from "../src/components/layout/hzhHeader.vue";
import hzhFooter from "../src/components/layout/hzhFooter.vue";
import hzhMain from "../src/components/layout/hzhMain.vue";
import hzhLoading from "../src/components/hzhLoading.vue";

export default {
  name: "App",
  components: {
    hzhHeader,
    hzhFooter,
    hzhMain,
    hzhLoading
  },
};
</script>

<style>
#app {
  font-size: 17px;
  color: #6f6f6f;
}
</style>

新建项目

运行结果

控制台

控制台没有报错

Vue-tool工具

Vue-tool工具中组件也在