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')
相关推荐
小满zs1 小时前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon2 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
dualven_in_csdn5 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友5 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程6 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅6 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy7 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz7 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar7 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜7 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas