vue经典入门系列

半年前系统的看完vue的资料，现在对它做一个入门级的分享。说实话vue的中文资料太多了，不做展开。讨论之前我们还是先复习一下之前章节《js模块化规约》

目录

前言-为何要选择VUE

1.  名称解释

1.1. MVVM

1.2. SPA

1.3. SSR

2.  vue-cli

3.  Vue-devtools

---

前言-为何要选择VUE

目前最火的MVVM前端框架，对比Angular，React有哪些优势？

• Vue.js更轻量，gzip后大小资源20k+
• Vue.js更容易上手，学习曲线平稳
•  吸取两家之长，借鉴啦angular的指令和react的组件化
• 想了解更多

1.  名称解释

1.1. MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：

l  低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

l  可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

l  独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码

l  可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

详细参考：https://cn.vuejs.org/v2/guide/reactivity.html

思考：前端框架为何会有辣么多流行MVVC框架？

1.2. SPA

SPA：就是俗称的单页应用（SinglePage Web Application）

在移动端，特别是hybrid方式的H5应用中，性能问题一直是痛点。使用SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验，说白了就是争夺前端渲染罢了。

1.3. SSR

服务器端渲染

https://ssr.vuejs.org/zh/

2.  vue-cli

vue-cli是vue.js的脚手架（命令行小工具），用于自动生成vue.js模板工程的。

$npm install -gvue       #全局安装vue

$npm install -gwebpack   #全局安装webpack

$npm install -gvue-cli   #全局安装vue-cli

$vue –help    #vue-cli命令帮助

$vue list   #vue支持的项目模板

$vue init webpackprojectName  #生成项目名为projectName的(webpack)模板

3.  Vue-devtools

Vue 的官方调试工具https://github.com/vuejs/vue-devtools

如何快速编写一款vue组件，请参阅另一篇《组件篇》