在VueJs中使用自定义样式全局注册组件

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello',
      content: 'This is my custom component',
    };
  },
  // 可以在这里定义组件的样式
  // 例如使用CSS或者CSS预处理器编写样式
  // <style scoped>...</style> 可以使样式仅在当前组件中生效
  // <style>...</style> 可以使样式在全局生效
  // 也可以使用CSS模块化或CSS-in-JS等方式来管理样式
  // 这里只是示例，具体样式根据需求自行定义
  // 注意：这里不提供具体的样式代码，只是示例
  // 如果需要具体的样式代码，请参考Vue的官方文档或相关教程
  // https://vuejs.org/v2/guide/class-and-style.html
  // https://vue-loader.vuejs.org/guide/css-modules.html
  // https://emotion.sh/docs/introduction
  // https://styled-components.com/docs
};
</script>

<style scoped>
.my-component {
  /* 这里是组件的样式 */
}
</style>

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

Vue.component('my-component', MyComponent);

new Vue({
  // ...
}).$mount('#app');

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style>
/* 这里可以使用全局样式 */
</style>