vue2通用架构目录

Climb Template for Vue 2.0

cdn-admin项目框架

Prerequisites

Node.js >= 8.x, Npm version 4+.

Demo

目录结构说明

├── build/                            // 构建脚本
├── config/                           // 项目环境变量
├── src/             
│  ├── assets/                        // 组件资源目录，这里的资源会被webpack构建
│  │  ├── icons/                      // svg 文件
│  │  ├── images/                     // 图片资源，可以按组件建立子文件夹  @see 图标命名规范
│  │  ├── styles/                       // 样式命名全部采用小写，不要使用拼音，用“-”号链接
│  │  │  ├── common                   // 通用的样式，包括reset/链接/表单/字体  准备删除
│  │  │  ├── mixins                   // sass中的混合，用于编写可复用的代码段
│  │  │  ├── variables                // sass中的变量，定义设计中通用的颜色/宽度 
│  │  │  └── theme-element            // 对element-ui组件样式的重写，实现自定义主题
│  ├── components/                    // 全局组件，公用的放在components目录，否则放在views里
│  │  ├── index.js                    // 配置全局组件
│  ├── utils/                        // 全局公用方法，会挂载到Vue.prototype
│  │  ├──request/                    // 所有请求
│  │  ├── vilidate.js                // 校验相关的js             
│  │  └── lodash.js                   // 按需引入
│  ├── mixins/                        // 
│  ├── mock/                          // mock数据目录
│  ├── router/                        // vue-router的路由目录
│  │  ├── routers/                    // 每个路由应该映射一个组件
│  │  ├── beforeEachHooks.js          // 全局拦截钩子
│  │  ├── commonRouters.js            // 通用router
│  │  └──index.js                     // router构造配置
│  ├── store/                         // vuex文件目录
│  │  ├── modules/                    // 可以创建不同的模块区
│  │  ├── actions.js                  // 提交mutation，可异步操作
│  │  ├── mutations.js                //
│  │  ├── getters.js                  //
│  │  └──index.js                     // 引入vuex，集中设置所有应用层级的stats状态
│  ├── views/                         // 具体业务页面组件，可以建立子目录
│  ├── App.vue                        // 根组件
│  └── main.js                        // 入口逻辑
├── index.ejs                         // index.html模板
├── public/                           // 非组件的资源文件，如图片、字体
├── test/             
│  ├── unit/                          // 单元测试
│  │  ├── specs                       // 测试用例的目录结构和被测试的文件保持一致，文件名以.spec.js结尾
│  └── e2e/
├── package.json

Dependency

• vue2
• vue-router
• vuex
• axios
• element-ui
• lodash
• dayjs
• js-cookie
• normalize.css
• vuex-persistedstate
• …

Dev Dependency

Todos

• permission
• test
• mock
• happypack
• service worker