Part1: 关于学习资料
学习资料收集，需要链接请看评论第一条
Part2:关于开发机
VUE示例项目上手
本次尝试是基于element-ui 做了一些公用业务场景
先从开发机基础搭建项目开始：
npm源设置成淘宝源
nrm ls //查询源列表，以及当前选择了哪个源
nrm use taobao //指向淘宝源
克隆完项目之后 ，开始跑一遍 F8，介绍一下F8所干的事情 ：
1、初始化数据库
2、前端编译
前端编译包括：
1、npm install 根据 package.json 文件配置，安装依赖的npm包
2、npm run lib 根据 ddl.config.js 文件配置，编译前端公共类库
3、npm run watch 根据 webpack.config.js 文件配置，编译当前app业务代码
以watch模式运行，编译完成之后将会持续监听代码变更，对变更文件实时编译
接下来配置好本地HOST，就可以访问到页面了；
Part3:关于框架
前端框架在整个yaf框架中的位置
前端在YAF框架中的位置
前端框架目录结构
前端框架目录结构及注解
Part4:关于业务功能模块
基于饿了么UI做了2个DEMO页面，主要实现以下功能及交互。
业务模块 功能点
CRUD页面：
CRUD页面
其中：在初始化页面的时候就开始去请求数据列表 ，注入到已申明的sourceData中，这样首先可以渲染得到一个表，至于整体结构不做详解了，我用的饿了么的一套风格UI，整体用饿了么的theme 包括结构；
实例 created()
对于CRUD页面 其中其它增删改查的逻辑都是和之前传统的一样的，在对应的结构上加点击 @click事件，然后对应的方法写在实例的 methods 方法里边, 看代码（ajax封装采用Promise风格）：
增删改查方法
这里想多说一句，因为大部分的表格使用场景是需要带搜索以及带序号及选项，页码这些一系列的东西我认为做成可配置的会更方便，所以在饿了么的基础之上，把这一套做了一个组件的封装，VUE自己提供了一个叫"v-if"的属性，这里我们可以结合 props属性 , 通过它来判断是否需要该列 做一些配置开关，看下代码（以搜索为例）：
v-if
props
这里 return true；所以搜索这个部件是打开的状态，页面展示 （反之 如果你的业务场景不需要带搜索，那么这里你配置为false就可以）：
带搜索表格组件
报表页面：
报表页面
这里漂亮的UI 都来自饿了么，这个vchats插件记得要在入口处引入：
入口
上边的三个选项是一个三级联动，这个之前我没涉及到过，做起来费了些劲，最后得出思想原理并不复杂，这儿要用到VUE里的watch，这个很好用的，监听一级菜单，变更对应二级菜单，监听二级菜单，变更对应三级菜单，监听三级菜单，加载图表及内容数据；
首先默认进入页面也就是created()得到一个一级菜单，后端传来的数据一定会有一个默认值，这里也要拿到;
看下watch的部分：
watch 三级联动
因为VUE兼容性方面人家很傲娇，Vue.js 不支持IE8 及其以下版本，因为Vue.js 使用了IE8 不能模拟的ECMAScript 5 特性。它支持所有兼容ECMAScript 5 的浏览器。我争对我不想用的浏览器做了一个提示的交互，在页面加载之后立即执行一段onload事件，看图，文案是不是很文艺帅气，然而并不是我想的，是一个很有才华的男同事信手拈来的，此处该撒花；
兼容性提示
这套系统下来，我感觉 element 提供了很多很方便的东东，用起来很贴心，这个文章会根据得到的心得一点点的去修善，因为现在在孕晚期，有些时候心有余而力不足，写这篇文章都中断好几次，站起来活动几下生怕思路中断 又赶紧来写，（此处应该有一个表情才好，简书没有提供表情包么？）最近发现许多知识如果不是一直在用的话，过一段时间就真的会淡忘，所以用笔头记录下来还是非常好的，可以在你想要温故知新的时候拿出来，再次读不仅仅可以加深记忆而且一定会有不同的见解，要要求自己在最宽裕的时间里有所积累，希望孕期一样可以get到新的知识点，看完记得点亮左下角的那颗心呦。
