在Vue项目中，公共样式的共享与复用是一个常见的需求。良好的样式管理可以减少代码冗余，提高开发效率。本文将详细介绍如何在Vue项目中实现公共样式的共享与复用。

一、使用全局样式

1.1 通过@import导入

在Vue项目中，可以通过@import指令在main.js或style.css中导入全局样式文件。这种方式适用于将一些通用的样式，如全局字体、颜色等定义在一个单独的样式文件中。

/* global.css */
body {
  font-family: 'Arial', sans-serif;
}

// main.js
import './assets/css/global.css';

1.2 通过Vue插件导入

除了@import，还可以通过Vue插件的方式实现全局样式导入。这种方式适用于将一些复杂的样式逻辑封装成插件。

// GlobalStylePlugin.js
export default {
  install(Vue) {
    const style = require('./assets/css/global.css');
    const styleLink = document.createElement('link');
    styleLink.href = URL.createObjectURL(new Blob([style]));
    styleLink.rel = 'stylesheet';
    document.head.appendChild(styleLink);
  }
};

// main.js
import Vue from 'vue';
import GlobalStylePlugin from './GlobalStylePlugin';

Vue.use(GlobalStylePlugin);

二、使用CSS模块

CSS模块提供了一种将CSS封装到组件内部的机制，使得每个组件都可以独立使用自己的样式，避免了全局样式冲突。

2.1 创建CSS模块

在组件的<style>标签中使用module属性，可以将样式封装到当前组件内部。

<template>
  <div class="my-component">Hello, Vue!</div>
</template>

<style module>
.my-component {
  color: red;
}
</style>

2.2 使用CSS模块

在模板中使用class绑定，可以将模块化的样式应用到组件上。

<template>
  <div class="my-component">Hello, Vue!</div>
</template>

<script>
export default {
  mounted() {
    this.$el.querySelector('.my-component').classList.add('active');
  }
};
</script>

三、使用Sass/Less等预处理器

Sass/Less等预处理器提供了一套丰富的功能，可以帮助开发者更好地组织和管理样式代码。

3.1 配置预处理器

在Vue项目中，可以通过配置vue.config.js文件来启用Sass/Less预处理器。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        data: `@import "@/assets/scss/mixins.scss";`
      },
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
};

3.2 使用预处理器

在组件的<style>标签中，可以使用预处理器语法编写样式代码。

<template>
  <div class="my-component">Hello, Vue!</div>
</template>

<style lang="scss">
.my-component {
  @mixin mixin-name {
    color: red;
  }
  .active {
    @extend .mixin-name;
  }
}
</style>

四、使用全局组件

将一些常用的UI组件封装成全局组件，可以方便地在项目中复用。

4.1 创建全局组件

在Vue项目中，可以通过创建一个全局组件来封装UI组件。

<template>
  <div class="my-button">Click me!</div>
</template>

<script>
export default {
  name: 'MyButton'
};
</script>

<style lang="scss">
.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

4.2 注册全局组件

在main.js中注册全局组件。

import MyButton from './components/MyButton.vue';

Vue.component('my-button', MyButton);

五、总结

在Vue项目中，实现公共样式的共享与复用有多种方法。通过使用全局样式、CSS模块、预处理器、全局组件等方式，可以有效地提高开发效率，避免代码冗余。在实际开发中，可以根据项目需求和团队习惯选择合适的方法。