vue项目规范

技术栈

  • vue2
  • vuex
  • vue-router
  • webpack
  • ES6/7
  • axios
  • less/sass
  • vue-i18n
  • 等...

src目录布局

├── src
│   ├── assets
│   │   ├── image                               // 公共图片
│   │   ├── style                               // 公共样式
│   ├── components                              // 存放公共组件
│   │   ├── button                              // 公共按钮组件
│   │   ├── footer                              // 公共底部组件
│   │   └── header                              // 公共头部组件
│   ├── config                                  // 存放基本配置
│   ├── page                                    // 存放业务组件,内部按模块进行区分,如下:
│   │   ├── shop                                // 商店组件
│   │   │   ├── children                        // 只在该模块用到的一些公共组件
│   │   │   │   ├── foodDetail.vue 
│   │   │   │   └── shopDetail.vue 
│   │   │   └── shop.vue                        // 该模块入口文件
│   ├── plugins                                 // 存放引用的插件
│   ├── router
│   │   └── router.js                           // 路由配置
│   ├── service                                 // api接口统一管理
│   ├── store                                   // vuex的状态管理
│   │   ├── action                              // 配置actions
│   │   ├── getters                             // 配置getters
│   │   ├── index.js                            // 引用vuex,创建store
│   │   ├── mutationTypes                       // 定义常量muations名
│   │   └── mutations                           // 配置mutations
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件,加载各种公共组件

组件

1. 组件元素顺序保持一致,