本文主要是介绍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'
总结
看似建议很多,其实核心思路即。
-
组件的文件夹与文件名都使用PascalBase命名,其余命名使用kebab-case风格。
-
文件夹类型组件使用index.vue导出。
这篇关于Vue组件文件夹结构建议的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!