Vue

1.概念

vueapp开发定制是一套用于构建用户界面的app开发定制渐进式框架，发布于2014年2月。app开发定制与其他大型不同的是，vueapp开发定制被设计为可以自底向上逐层应用。Vueapp开发定制的核心库只关注视图层。

Soc：app开发定制关注度分离原则

HTML+CSS+JS：视图：给用户看，app开发定制刷新后台给的数据

支持，

网络通信：

页面跳转：vue-router

2.app开发定制前端知识体系

2.1app开发定制前端三要素

• HTML（结构）：超文本标记语言（Hyper Text Markup Language）,决定网页的结构和内容
• CSS（表现）：层叠样式表（Cascading Style Sheets）,设定网页的表现样式
• JavaScript（行为）：使用中弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。

2.2结构层（HTML）

略

2.3表现层（CSS）

CSS层叠样式层表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，他的缺陷如下：

• 语法不够强大，无法嵌套书写，导致模块化开发中需要书写很多重复的选择器
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

用CSS预处理器这个工具为CSS确实的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

什么是CSS预处理器

“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”

常用的CSS预处理器：

• SASS：基于Ruby，需要学习Ruby语言
• LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也地狱SASS但是实际开发够用

2.4行为层（JavaScript）

JS弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

Native 原生 JS 开发

按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。

• ES6（常用，当前的主流版本）

JavaScript框架

• JQuery：优点是简化了DOM操作，缺点是DOM操作频繁，影响前端性能；前端使用仅仅为了兼容IE6/7/8
• Angular：由java程序员开发，特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；最大缺点是版本迭代不合理。
• React：Facebook出品，一款高性能的JS前端框架；特点提出了**【虚拟DOM】**用于减少真实的DOM操作，在内存中模拟DOM操作，提升了前端渲染效率，缺点是复杂，需要额外学习【JSX】语言
• Vue：渐进式JavaScript框架，渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。特点是综合Angela（模块化）和React（虚拟DOM）的优点
• Axios：前端通信框架；因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用JQuery提供的AJAX通信功能。

UI框架

• Ant-Design：阿里巴巴，基于React
• ElementUI、iview、ice：饿了么，基于Vue
• Bootstrap：Twitter，用于前端开发的开源工具包
• AmazeUI：HTML5跨屏前端框架

JavaScript构建工具

• Babel：JS编译工具，主要用于浏览器不支持的ES新特性，
• WebPack：模块打包工具

2.5三端同一

混合开发（Hybrid App）

PC、Android、IOS

2.6后端技术

NodeJS框架及项目管理工具：

• Express：NodeJS框架
• Koa：Express简化版
• NPM：项目综合管理工具，类似于Maven
• YARN：NPM的替代方案，类似于Maven和Gredle的关系

2.7主流前端框架

Vue.js

iView

属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

ElementUI

属于前端主流框架，选型时可以考虑使用，主要特点是桌面端支持较多

3.了解前后端分离的演变史

3.1后端为主的MVC时代

3.2基于AJAX带来的SPA时代

3.3前端为主的MV*时代

• MVC（同步通信为主）：Model、View、Controller
• MVP（异步通信为主）：Model、View、Presenter
• MVVM（异步通信为主）：Model、View、ViewModel

3.4NodeJS带来的全栈时代

在这种模式下实现了真正的前后端分离。前后端的职责更加清晰

3.5总结

综上所述，模式、技术没有好坏优劣之分，只有适合和不适合；前后分离的开发思想主要是基于Soc（关注度分离原则），上面种种模式，都是让前后端的职责更清晰，分工更合理高效。