├── /build/            # 项目构建(webpack)相关配置
├── /config/           # 项目开发环境配置
├── /src/              # 源码目录
│ ├── /assets/         # 组件静态资源(图片)
│ ├── /components/     # 公共组件
│ ├── /config/         # 项目配置
│ ├── /mock/           # 数据模拟
│ ├── /router/         # 路由配置
│ ├── /services/       # 数据接口
│ ├── /store/          # vuex状态管理
│ ├── /utils/          # 工具函数
│ ├── /views/          # 路由组件(页面维度)
│ ├── App.vue          # 组件入口
│ └── main.js          # 应用入口
├── /static/           # 非组件静态资源
├── .babelrc           # ES6语法编译配置
├── .editorconfig      # 定义代码格式
├── .eslintignore      # ES6规范忽略文件
├── .eslintrc.js       # ES6语法规范配置
├── .gitignore         # git忽略文件
├── .postcssrc         # PostCSS插件配置
├── index.html         # 页面入口
├── LICENSE            # 版权信息
├── package-lock.json  # 项目依赖包
├── package.json       # 项目依赖包
└── README.md          # 项目文档

<template>
<div id="test">
  <Spin v-if="loading" size="large" fix></Spin>
  <h2 v-else>This is a {{ title }}</h2>
</div>
</template>
<script>
import { test } from '@/services/test'
export default {
  name: 'Test',
  data: () => ({
    title: '',
    loading: false
  }),
  mounted() {
    this.loading = true
    // 模拟异步请求
    setTimeout(() => {
      test().then(res => {
        this.loading = false
        this.title = res.data
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    }, 500)
  }
}
</script>
<style lang="postcss" scoped>
/* 样式使用 cssnext 预处理 */
#test {
  & h2 {
    border-left: 2px solid #CCC;
    padding-left: 12px;
  }
}
</style>

export default[
  {
    path: '/',
    redirect: '/',
    name: 'SysLayout',
    component: resolve => {
      require(['@/views/common/layouts/Layout'], resolve)
    },
    children: [
      {
        // 添加路由(测试)
        path: '/test',
        name: 'Test',
        component: resolve => {
          require(['@/views/Test'], resolve)
        }
      }
    ]
  }
]

export default(Mock, qs) => {
  Mock.mock(/\/menu/, {
    data: [
      {
        // 添加临时菜单(测试)
        name: 'Test',
        path: '/test'
      }
    ]
  })
}

import ax from '@/config/axios'

export const test = () => ax.get('/test')

export default(Mock, qs) => {
  Mock.mock(/\/test/, () => ({
    data: 'test page',
    error: {
      code: 0,
      msg: 'Get test success'
    }
  }))
}

import Mock from 'mockjs'
import qs from 'qs'
import test from './test'

const mock = () => {
  test(Mock, qs)
}

export default {mock}

# 安装依赖
yarn
# 或
npm install

# 启用热加载到 localhost:8090
npm start
# 或
npm run dev

# 构建最小测试
npm run test

# 构建最小预发布
npm run release

# 构建最小生产
npm run build

# 构建最小生产并查看包分析器报告
npm run build --report