# 组件目录内始终使用文件夹管理组件

在 components 目录下的通用组件始终使用文件夹管理组件，并通过 index.js 暴露组件，建议使用以下文件结构：

├── components
│   ├── componentA
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── componentB
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── index.js

在具体组件目录的 index.js 中，可以使用以下方式暴露组件：

import componentA from './componentA'

export { componentA }
export default componentA

如果，需要在 components/index.js 中暴露常用的组件，可以使用以下方式：

import componentA from './componentA'
import componentB from './componentB'

const components = [
  componentA,
  componentB
]

const install = Vue => {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

export default {
  install
}

在 src/main.js 通过 Vue.use 全局注册组件：

import Vue from 'vue'
import components from './components'
import App from './App'
import router from './router'
import store from './store'

Vue.use(components)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

← 简介开启路由懒加载 →