Vue系列一—初识Vue

一、历史背景

VUE的历史背景跟VUE一样简单纯粹，开始它只是个人（尤雨溪）在2013年的一个兴趣项目，现在生态圈已经逐渐的完善，受到国内一致好评。

二、是什么

是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

三、要解决的问题

要解决的是数据驱动的问题，避免手动操作DOM。

四、特点

1、更加轻量 20kb min+gzip（开启gzip压缩后只有20kb）；
2、渐进式框架（不需要学习完VUE的所有知识，即可将VUE用于项目中，逐步学习）；
3、响应式的更新机制；
4、语法结构简单易上手，中文文档、社区发达，学习成本低。

五、版本记录

• Vue 3.x
• Vue 2.x
• Vue 1.0
• Vue 0.12
• Vue 0.11

六、Vue、Angular对比

共同点

1. 支持ES6语法
2. MVVM设计模式

• 定义：MVVM（Model-view-viewmodel）是一种软件架构模式。
• 好处：专注于数据及数据模型，根据数据模型编写逻辑，让页面模板对应地生成数据或表象或页面。
• 组成：模型、视图、视图模型
• 双向绑定原理：使用到Object.defineproperty
  3. 组件思想

不同点

1.TypeScript

Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的。TS 有很多好处——静态类型检查在大规模的应用中非常有用。
然而，并不是所有人都想用 TS——在中小型规模的项目中，引入 TS 可能并不会带来太多明显的优势。在这些情况下，用 Vue 会是更好的选择。

2.体积

在体积方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此，一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。

3.学习曲线

要学习 Vue，你只需要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就可以非常快速地通过阅读指南投入开发。
Angular 的学习曲线是非常陡峭的——作为一个框架，它的 API 面积比起 Vue 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。

七、目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的
node_modules	npm 加载的项目依赖模块
src	包含了几个目录及文件
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的
package.json	项目配置文件
README.md	项目的说明文档，markdown 格式