Vue 项目结构与命名规范

Vue 项目结构与命名规范

统一命名规则

1. 普通文件夹：全小写（单单词 / 小驼峰双单词），统一、易读、兼容 URL
2. 页面/视图文件夹：大驼峰（PascalCase），明确标识路由页面
3. .vue 组件文件：大驼峰（PascalCase），官方推荐，与组件名保持一致
4. JS / 工具 / 样式文件：小驼峰（camelCase），遵循 JavaScript 通用规范

官方依据

• Vue 官方风格指南（组件 & 文件命名）
• Vue 3 官方项目结构推荐
• MDN JavaScript 代码风格指南

---

vue3-project/
├── .vscode/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image/
│   │   │   ├── logo.png
│   │   │   └── userAvatar.png
│   │   └── styleGlobal/
│   │       ├── base.css
│   │       └── commonStyle.css
│   ├── components/
│   │   ├── common/
│   │   │   ├── Button.vue
│   │   │   └── UserInfo.vue
│   │   └── userCommon/
│   │       ├── Card.vue
│   │       └── OrderList.vue
│   ├── views/
│   │   ├── Home/
│   │   │   ├── index.vue
│   │   │   ├── HomeBanner.vue
│   │   │   ├── banner/
│   │   │   │   ├── Item.vue
│   │   │   │   └── BannerItem.vue
│   │   │   └── homeSection/
│   │   │       ├── Block.vue
│   │   │       └── SectionBlock.vue
│   │   └── UserCenter/
│   │       ├── index.vue
│   │       └── UserOrder.vue
│   ├── router/
│   │   ├── index.js
│   │   └── routeGuard.js
│   ├── store/
│   │   ├── modules/
│   │   │   ├── user.js
│   │   │   └── userInfo.js
│   │   └── index.js
│   ├── api/
│   │   ├── request.js
│   │   └── orderList.js
│   ├── utils/
│   │   ├── time.js
│   │   └── formatDate.js
│   ├── composables/
│   │   ├── index.js
│   │   └── useUser.js
│   ├── App.vue
│   └── main.js
├── .env.development
├── .env.production
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md