Vue组件文件夹结构建议

前言

首先声明。

以下建议并不会直接提高项目的性能。

只是方便更好的开发与维护，毕竟代码是人写的。

全局通用组件

位于src/components。

注意与业务组件区分，全局通用组件更强调基础性。类似于一个UI框架里的各种Input、Button、Tab，只是在此处是你自己封装的。

建议风格

• 文件夹命名使用PascalBase风格
• 一个文件夹代表一个组件
• 组件使用index.vue导出

示例

目录结构

- src
  - components
    - SvgIcon
      - index.vue
复制代码

使用

import SvgIcon from '@/components/SvgIcon'
复制代码

页面

介绍

位于src/views。

建议风格

• 页面文件夹命名采用kebab-case风格
• 每个页面一个.vue文件，但是多个页面可以在一个文件夹下

如果此文件夹只有一个页面，那么该页面组件可用index.vue表示。

• 页面分割的业务组件存在./components目录下

• ./components目录最多拥有一层子目录（其实就是该业务组件需要再次进行分割）

• ./components目录的子目录命名使用PascalBase风格

• ./components目录下的组件使用index.js导出（便于页面文件import）

示例

- views
  - page-one
    - index.vue
  - page-two
    - components
      - PageComponent1
        - C1.vue
        - C2.vue
        - index.vue
      - PageComponent2.vue
      - index.js
    - Page1.vue
    - Page2.vue
  
复制代码

index.js

export { default as PageComponent1 } from './PageComponent1'
export { default as PageComponent2 } from './PageComponent2'
复制代码

Page1.vue引用

import { PageComponent1 } from './components'
复制代码

总结

看似建议很多，其实核心思路即。

1. 组件的文件夹与文件名都使用PascalBase命名，其余命名使用kebab-case风格。

2. 文件夹类型组件使用index.vue导出。

===== 2018-12-12 更新 =====

vue单文件组件，最外层样式，尽量与组件名字一样，方便父组件覆盖，但也要注意样式泄漏。例如：

<template>
    <div class="my-component"></div>
</template>
<script>
export default {
    name: 'my-component'
}
</script>
复制代码

===== 2018-12-12 更新 =====

最后附上目录图。

转载于:https://juejin.im/post/5c0a00da51882552755080e6