MainHeader组件实现

# 十一. MainHeader 组件实现

# 1 页面显示

示例

<template>
  <header class="main-header">
    <h1>TodoList</h1>
  </header>
</template>

1
2
3
4
5

# 2 样式

示例

<style lang="stylus" scoped>
.main-header
  text-align: center

  h1
    margin: 20px
    font-size: 100px
    font-weight: 100
    color: rgb(252, 157, 154)
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1)
</style>

1
2
3
4
5
6
7
8
9
10
11

# 3 优化

# 1) css 模块化

有一些样式, 我们需要反复的用到, 因此我们最好提取出来作为一个文件

示例

在 styles 目录下,创建 theme.styl, 将主题配色定义成变量

$red = rgb(254, 67, 101)
$lightred = rgb(252, 157, 154)
$yellow = rgb(249, 205, 173)
$green = rgb(131, 175, 155)
$lightgreen = rgb(200, 200, 169)

1
2
3
4
5

在需要用到的时候, 引入相关的文件

编写 MainHeader.vue

示例

<style lang="stylus" scoped>
@import '../assets/styles/theme.styl'

.main-header
  text-align: center

  h1
    margin: 20px
    font-size: 100px
    font-weight: 100
    color: $lightred
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1)
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2) 加入别名

在 webpack 的配置中, 可以指定别名

resolve: {
  alias: {
    'vue': 'vue/dist/vue.js',
    '@': path.resolve(__dirname, '../src'),
    'styles': path.resolve(__dirname, '../src/assets/styles')
  }
},

1
2
3
4
5
6
7

改造 stylus

<style lang="stylus" scoped>
  @import '~styles/theme.styl'

  .main-header
    text-align: center

    h1
      margin: 20px
      font-size: 100px
      font-weight: 100
      color: $lightred
      text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1)
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

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

#webpack4 #前端工程化

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

← 需求分析与设计 MainTodo组件实现→