├── /public            # 静态文件
├── /src               # 源码目录
│ ├── /assets          # 静态资源
│ ├── /components      # 公共组件
│ ├── /layouts         # 布局组件
│ ├── /mock            # 数据模拟
│ ├── /router          # 路由配置
│ ├── /services        # 数据接口
│ ├── /store           # vuex状态管理
│ ├── /utils           # 工具库
│ ├── /views           # 路由组件(页面维度)
│ ├── App.vue          # 组件入口
│ ├── config.js        # 应用配置
│ └── main.js          # 应用入口
├── .editorconfig      # 定义代码格式
├── .env.development   # 开发环境
├── .env.production    # 生产环境
├── .env.release       # 预生产环境
├── .env.test          # 测试环境
├── .gitignore         # git忽视
├── babel.config.js    # ES6语法编译配置
├── LICENSE            # 版权信息
├── package.json       # 依赖包
├── README.md          # 项目文档
└── vue.config.js      # 项目配置

<template>
  <Content id="test">
    <Spin v-if="loading" size="large" fix />
    <h2>This is a {{ title }}</h2>
  </Content>
</template>
<script>
import {
  _test // 测试接口
} from '@/services/test' // 接口文件
export default {
  name: 'Test', // 组件名称
  data: () => ({
    title: '',
    loading: false
  }),
  mounted() {
    this.$Loading.start()
    this.loading = true
    // 模拟异步请求
    setTimeout(() => {
      _test().then(res => {
        this.$Loading.finish()
        this.loading = false
        this.title = res.data
      }).catch(err => {
        this.$Loading.error()
        this.loading = false
        console.error(err)
      })
    }, 500)
  }
}
</script>
<style lang="postcss" scoped>
/* 样式使用 cssnext 预处理 */
:root {
  --bdColor: #ccc;
}
#test {
  & h2 {
    border-left: 4px solid var(--bdColor);
    padding-left: 12px;
  }
}
</style>

import Mock from "mockjs";

export default () => {
  Mock.mock(/\/menu/, {
    data: [
      {
        path: "/test", // 路由地址
        name: "Test", // 菜单名称
        icon: "md-document", // 菜单 Icon 图标
        compName: "Test", // 组件名称
        compPath: "/Test" // 组件地址（ 默认指向 src/views 路由组件目录
      }
    ]
  });
};

import ax from "@/utils/axios";

export const _test = () => ax.get("/test"); // 测试接口

import Mock from "mockjs";

export default () => {
  Mock.mock(/\/test/, () => ({
    data: "test page" // 测试数据
  }));
};

import test from "./test";

export default () => {
  test(); // 测试
};

# 安装依赖
yarn
# 或
npm i

yarn start
# 或
npm start

# 构建最小测试
yarn test
# 或
npm test

# 构建最小预发布
yarn release
# 或
npm run release

# 构建最小生产
yarn build
# 或
npm run build