小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

今天我们要说的就是封装我们的CSS components层，所以我们要做的首先分析我们的设计稿，找到相应的公共样式或者结构相似的内容，写成组件，在进行注册就可以了。接下来让我们看看具体的实现步骤。

实现UI组件并全局声明

如下我们有一个组件

// avatar.vue
<template>
  <div 
    class="avatar"
    :class="{'avatar--vertical': direction === 'vertical'}">
    <img
      :src="url"
      circle/>
  </div>
</template>
<script>
export default {
  name: 'Avatar',
  props: {
    direction: {
      validator(value){
        return ['horizontal', 'vertical'].indexOf(value) !== -1;
      }
    },
    url: {
      type: String,
      required: true
    },
  }
}
</script>
<style lang="scss" scoped>
@mixin box-center($justify:center, $align: center) {
  display:flex;

  @if($align !=false) {
    align-items: $align;
  }
  @if($justify !=false) {
    justify-content: $justify;
  }
}

.avatar {
  @include box-center($align: center);
  &--vertical {
    flex-direction: column;
  }
}
</style>

其中用了sass语法，mixin方法可以单独放在一个文件里，这里为了方便，所以放在一个文件下。

然后我们需要引入它并且全局声明。

// components/index.js
import Avatar from './avatar';

const components = {
  Avatar,
}

const install = (app) => {
  Object.keys(components).forEach(key => {
      app.component(components[key]['name'], components[key])
  });
}

const UI = {
  install
}

export default UI

在main.js中引用就可以了

// main.js
import UI from '@/components'

createApp(App).use(UI).use(router).use(store).mount('#app')

以上就是一个简单的例子，实际具体情况肯定比我写的复杂，需要根据特定情况进行相应的模块化处理，不要嫌麻烦，没有必要，良好的模块化，可以减少很多不必要的维护工作。

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！

CSS页面设计稿构思与实现（三）之UI组件

前言

实现UI组件并全局声明