MainFooter组件实现

# 十三. MainFooter 组件实现

创建 MainFooter.vue 文件

示例

<template>
  <footer class="main-footer">Written By Brojie</footer>
</template>

<style lang="stylus" scoped>
.main-footer
  margin: 20px auto
  text-align: center
  color: #fff
  text-shadow: 5px 5px 5px #000
</style>

1
2
3
4
5
6
7
8
9
10
11

在 App.vue 中, 引入 MainFooter.vue

<template>
  <div>
    <main-header></main-header>
    <main-todo></main-todo>
    <main-footer></main-footer>
  </div>
</template>

<script>
import './assets/styles/global.styl'

import MainHeader from './components/MainHeader.vue'
import MainTodo from './components/MainTodo/MainTodo.vue'
import MainFooter from './components/MainFooter.vue'

export default {
  name: 'App',
  components: {
    // 组件名: 组件对象
    MainHeader: MainHeader,
    MainTodo,
    MainFooter,
  },
}
</script>

<style lang="stylus" scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#webpack4 #前端工程化

上次更新: 2021/09/03, 15:32:17

← MainTodo组件实现预编译→