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')
相关推荐
萌萌哒草头将军几秒前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆17 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo19 分钟前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
coding随想24 分钟前
深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”
javascript
Watermelo61728 分钟前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验
Auscy36 分钟前
JavaScript 数组学习总结
开发语言·javascript·学习
zhaoyang03013 小时前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
开开心心就好3 小时前
免费PDF转图片软件
javascript·智能手机·pdf·flask·word·excel·scikit-learn
珎珎啊3 小时前
CSS3 常用功能详细使用指南
前端·css·css3