管理后台项目3
├── build // 构建相关
│ ├── script // 脚本
│ └── vite // vite配置
├── public // 入口文件、图标等
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 图片 字体等静态资源
│ ├── components // 全局公用组件
│ ├── composition // 单文件方法
│ ├── config // 全局公用配置项
│ ├── enums // 全局公用枚举常量
│ ├── hooks // hooks 方法
│ ├── icons // svg图标
│ ├── layout // 侧边栏等页面布局组件
│ ├── model // 类型约束
│ ├── directive // 全局指令
│ ├── icons // 项目所有 svg icons
│ ├── router // 路由
│ ├── store // 全局状态管理pinia
│ ├── styles // 全局样式
│ ├── types // 类型文件
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.ts // 入口 加载组件 初始化等
│ └── permission.ts // 路由权限管理
├── static // 第三方不打包资源
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── eslintrc.js // eslint 配置项
├── .eslintrc-auto-import.json // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
├── vite.config.ts // vite配置文件
└── package.json // package.jsonfeat增加新的业务功能fix修复业务问题/BUGperf优化性能style更改代码风格, 不影响运行结果refactor重构代码revert撤销更改test测试相关, 不涉及业务代码的更改docs文档和注释相关chore更新依赖/修改脚手架配置等琐事workflow工作流改进ci更改 CI 配置文件和脚本types类型定义文件更改wip开发中
参考vue官方样例代码的结构，原因详见核心开发人员 知乎 回答
vue3 样例代码.png
<script setup lang="ts">
// 逻辑处理
</script>
<template>
<!- 模板语法 ->
</template>
<style lang="scss" scoped>
/** 样式 */
</style>尽量采用 unocss 配置，减少项目自定义公共样式类 样式命名:
- 名称间隔使用-符号
- 类名命名需要语义化，参考下面的示例：
.wrap{} //外层容器
.mod-box{} //模块容器
.btn-start{} //开始
.btn-head-nav1{} //头部导航链接1
.btn-news-more{} //更多新闻
.btn-play{} //播放视频
.btn-lottery{} //开始抽奖
.side-nav{} //侧栏导航
.side-nav-btn1{} //侧栏导航-链接1
.btn-more{} //更多文件结构保持就近原则，避免文件过分抽离导致维护成本增加，层级结构尽量保证三层以内。
├── views // view
│ ├── menus // 菜单文件
│ │ ├── composable // 组合式API
│ │ │ ├──logicA.ts // 抽象逻辑功能
│ │ │ ├──logicB.ts // 抽象逻辑功能
│ │ ├── components // 功能模块下子组件
│ │ │ ├──ComponentA // 子组件大驼峰方式命名
│ │ │ │ ├── composable // 组合式API
│ │ │ │ │ ├──logicA.ts // 抽象逻辑功能
│ │ │ │ │ ├──logicB.ts // 抽象逻辑功能
│ │ │ │ ├── index.vue // 入口文件
│ │ │ ├──ComponentB // 子组件大驼峰方式命名
│ │ │ ├──index.ts // 导出文件
│ │ ├── index.vue // 入口文件单文件组件的文件名以单词大写开头 (PascalCase)
单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。
components/
|- MyComponent.vue
components/
|- my-component.vue
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。
components/
|- TheHeading.vue
|- TheSidebar.vue
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
对于绝大多数项目来说，在单文件组件中组件名应该总是 PascalCase 的
PascalCase 相比 kebab-case 有一些优势：
- 编辑器可以在模板里自动补全组件名，因为 PascalCase 同样适用于 JavaScript。
- 视觉上比 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。
- 如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。
<MyComponent/>// 事件以 on 开头
function onDeleteRoleItem() {
...
}
// ajax 请求以 fetch 开头 避免与全局自动导入方法重名
function fetchListData() {
...
}
// 表 boolean，is 开头
const isDialogShow = false
// 表是否存在时，has 开头
const hasPropsInObject = computed(() => {})