vue封装公共的css样式

在Vue中封装公共的CSS样式可以通过以下几个步骤实现：

1. 创建一个新的CSS文件，在其中定义公共样式。可以使用任何命名约定，比如`common.css`或者`global.css`。

2. 在Vue项目中引入该CSS文件。有多种方式可以实现，最常见的是在入口文件（比如`main.js`）中引入该文件：

   import '@/assets/css/common.css';

这里假设你将公共CSS文件放在`src/assets/css/`目录下。

3. 在Vue组件中使用公共样式。你可以直接在组件的模板中使用CSS类名，这些类名在公共CSS文件中进行定义。例如：

   <template>
     <div class="my-component">
       <!-- 组件内容 -->
     </div>
   </template>
   
   <style>
   .my-component {
     /* 使用公共样式 */
     color: blue;
     font-size: 16px;
   }
   </style>

这里`.my-component`是公共CSS文件中定义的一个样式类名。

通过这种方式，你可以将公共的CSS样式封装到一个文件中，并在需要的地方引用和使用它。这样可以提高代码的可维护性和重用性，同时也能保持样式的一致性。

相关问题

vue全局css样式放在那里

引用\[3\]中提到，可以在Vue项目的src下的静态文件assets中新建一个css文件，并在文件中按照指定的格式自行封装需要的样式。然后将自定义的样式放到html中。这样可以实现全局的CSS样式。\[3\]
#### 引用[.reference_title]
- *1* [Vue前端css定义全局变量样式并使用](https://blog.csdn.net/m0_49714202/article/details/126265544)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue2.0_在vue中css样式的全局封装和引用](https://blog.csdn.net/QiuRenBB/article/details/122432912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue 封装 vue-video-player

对于封装 Vue Video Player，你可以按照以下步骤进行操作：

1. 首先，安装 Vue Video Player 插件。你可以使用 npm 或者 yarn 进行安装：

npm install vue-video-player --save

或者

yarn add vue-video-player

2. 接下来，在你的 Vue 项目中，创建一个新的组件，用于封装 Vue Video Player。可以将其命名为 `VideoPlayer.vue`。

3. 在 `VideoPlayer.vue` 文件中，引入 Vue Video Player 插件和样式，并注册组件：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>

<script>
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import VideoPlayer from 'vue-video-player'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerO