vue如何将公共组件独立写在一个模块里边

Vue中可以将公共组件独立写在一个模块里。主要有以下几个步骤：

1. 创建一个公共组件的模块，可以在项目根目录下创建一个`components`的目录，然后在该目录下创建一个`common`的目录，用于存放公共组件。

2. 在`common`目录下创建一个公共组件，例如`Header.vue`。

3. 在`Header.vue`组件中定义组件的模板、样式和逻辑。

4. 在需要使用该公共组件的Vue组件中，使用`import`语句引入该公共组件。例如，在`App.vue`组件中使用`Header.vue`组件，可以在`App.vue`组件中添加以下代码：

   <template>
     <div>
       <Header/> // 使用Header组件
       <router-view/> // 路由组件
     </div>
   </template>
   
   <script>
   import Header from '@/components/common/Header.vue'; // 引入Header组件
   
   export default {
     name: 'App',
     components: {
       Header // 注册Header组件
     }
   }
   </script>

在上面的代码中，`@`符号代表项目根目录。`components/common/Header.vue`表示引入位于项目根目录下的`components/common/Header.vue`文件。然后，将`Header`组件注册到`App.vue`组件中，即可在模板中使用该组件。

通过将公共组件独立写在一个模块中，可以提高代码的复用性和可维护性。如果多个组件需要使用该公共组件，只需要在模板中引入即可，不需要重复编写代码。