前言
首先声明。
以下建议并不会直接提高项目的性能。
只是方便更好的开发与维护，毕竟代码是人写的。
全局通用组件
位于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 更新 =====
最后附上目录图。
