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到新的知识点，看完记得点亮左下角的那颗心呦。