在Vue中，我们常常需要使用到一些公共组件，例如导航栏、侧边栏、弹窗、下拉框等等。如果每个组件都从头开始编写，无疑是一种重复劳动，同时也会造成代码的冗余。因此，我们需要抽取一些公共组件，以便多次复用，提高开发效率。

Vue的组件是可以复用的，所以我们可以将需要复用的组件抽取出来，放到一个单独的文件中。首先，我们需要在Vue项目中新建一个目录，例如component，用于存放抽取出来的公共组件。

├── /src
│   ├── /components
│   │   ├── /Navbar.vue
│   │   ├── /Sidebar.vue

在Navbar.vue中，我们可以使用Vue的模板语法来编写导航栏的代码。

< template >< /template >< script >export default {
name: 'Navbar'
}< /script >

在Sidebar.vue中，我们可以使用Vue的组件注册来编写侧边栏的代码。

< template >< /template >< script >export default {
name: 'Sidebar'
}< /script >

接下来，我们需要在Vue项目中注册这些组件，以便在其他地方使用。在main.js文件中，我们可以通过Vue.component()方法来注册组件。

import Vue from 'vue'
import Navbar from '@/components/Navbar.vue'
import Sidebar from '@/components/Sidebar.vue'
Vue.component('Navbar', Navbar)
Vue.component('Sidebar', Sidebar)

注册完毕后，我们便可以在其他地方使用这些公共组件。例如，在App.vue中，我们可以使用Navbar和Sidebar组件来构建一个简单的页面布局。

< template >
< /template >< script >import Navbar from '@/components/Navbar.vue'
import Sidebar from '@/components/Sidebar.vue'
export default {
name: 'App',
components: {
Navbar,
Sidebar
}
}< /script >

使用公共组件是Vue开发中的一种最佳实践，它可以减少代码的冗余，提高开发效率。在Vue中，抽取公共组件也非常简单，在多次使用某一组件时，我们只需将其抽取出来，并注册到Vue项目中即可。