VUE

vue官网：
Vue Devtools
run yarn run dev
A plain shell with a test app will be available at localhost:8100.

1 Vue基础
1.1 Vue简介
● 渐进式JavaScript框架
● 简化Dom操作
○ DOM（Document Object Model，简称DOM）是网页中用来表示文档中对象的标准模型，通过JavaScript可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。
● 响应式数据驱动
1.2 前端项目技术栈
Vue-router：路由
Element-UI：前端UI组件库
Axios：发起网络数据请求
Echarts：绘制图形报表

├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── components // 全局UI组件
│ ├── directives // 全局指令
│ ├── mock // mock数据
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── containers // 自适应布局组合
│ ├── vendor // UI组件依赖js
│ ├── views // views界面
│ │ ├── charts //图表组件
│ │ ├── components //首页组件
│ │ ├── login //登录界面
│ │ ├── pages //错误界面
│ │ └── permission //权限测试界面
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 静态资源
│ ├── bower_components //七牛SDK
│ ├── css //css
│ ├── js //js
│ └── Jquery.min.js // jq
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json

src/router/index.js

{ // juyunzhou
    path: '/int_detect',
    component: Layout,
    redirect: '/int_detect/data',
    name: '智能检测管控平台',
    meta: { title: 'Evnt', icon: 'case', roles: ['admin'] },
    children: 
    [
      { 
        path: 'data',
        name: '数据管理',
        component: () => import('@/views/int_detect/data/index'),
        meta: { title: '数据管理', icon: 'data', roles: ['admin'] }
      },
      { 
        path: 'anomaly_detect',
        name: '异常检测',
        component: () => import('@/views/int_detect/anomaly_detect/index'),
        meta: { title: '异常检测', icon: 'anomaly_detect', roles: ['admin'] }
      }
    ],
  hidden: false
  },