day01

Hm-Footer.vue

javascript 复制代码
<template>
    <div class="hm-footer">我是hm-footer</div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .hm-footer{
      height:100px;
      line-height:100px;
      text-align:center;
      font-size:30px;
      background-color:#4f81bd;
      color:white;
  }
  </style>

Hm-Main.vue

javascript 复制代码
<template>
  <div class="hm-Main">我是hm-Main</div>
</template>

<script>
export default {

}
</script>

<style>
.hm-Main{
    height:400px;
    line-height:400px;
    text-align:center;
    font-size:30px;
    background-color:#f79646;
    color:white;
    margin:20px 0;
}
</style>

Hm-Header.vue

javascript 复制代码
<template>
  <div class="hm-header">我是hm-header</div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header{
    height:100px;
    line-height:100px;
    text-align:center;
    font-size:30px;
    background-color:#8064a2;
    color:white;
}
</style>
javascript 复制代码
<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
     <!-- 底部组件 -->
    <HmFooter></HmFooter>
    

   
<!-- 创建组件、导入、注册使用 -->
    
  </div>
</template>


<script>
import HmHeader from './components/HmHeader.vue';
import HmFooter from './components/Hm-Footer.vue';
import HmMain from './components/Hm-Main.vue';
export default {
    components:{
      //'组件名':组件对象
      HmHeader:HmHeader,
      HmFooter,
      HmMain
    }
    
    
}
</script>

<style>
.App{
  width:600px;
  height:700px;
  background-color:#87ceed;
  margin:0 auto;
  padding: 20px;/* 内边距 */



}

</style>

main.js知识点

javascript 复制代码
//文件核心作用:导入App.vue,基于App.vue创建结构渲染index.html
//1.导入Vue核心包
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'


//提示:当前处于什么环境(生产环境/开发环境)
Vue.config.productionTip = false

//3.Vue实例化,提供render方法->基于App.vue创建结构渲染index.html
new Vue({
  //el:'#app',作用:和.$mount('选择器')作用一致,用于指定Vue所管理容器
  //render: h => h(App),
  render:(createElement)=>{
    //基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')
相关推荐
鱼樱前端23 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少1 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix1 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易1 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript