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')
相关推荐
sunbyte1 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常2 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常4 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10188 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28115 分钟前
Chrome插件开发
前端
前端 贾公子27 分钟前
Monorepo + vite 怎么热更新
前端
coding随想36 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#