1 Vue.js概述
-
Vue.js（读音 /vjuː/，类似于 view） 是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是，它只关注视图层（View层），采用自底向上增量开发的设计。Vue.js的目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。它不仅容易上手，还非常容易与其他库或已有项目进行整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue .js也完全能够为复杂的单页应用提供驱动。
1.1 什么是Vue.js
-
Vue.js实际上是一个用于开发Web前端界面的库，其本身具有响应式编程和组件化的特点。所谓响应式编程，即保持状态和视图的同步。响应式编程允许将相关模型的变化自动反映到视图上，反之亦然。Vue.js采用的是MVVM（Model-View-ViewModel）的开发模式。与传统的MVC开发模式不同，MVVM将MVC中的Controller改成了ViewModel。在这种模式下，View的变化会自动更新到ViewModel，而ViewModel的变化也会自动同步到View上进行显示。
-
ViewModel模式的示意图如下图所示：
-
与ReactJS一样，Vue.js同样拥有”一切都是组件“的理念。应用组件化的特点，可以将任意封装好的代码注册成标签，这样就在很大程度上减少了重复开发，提高了开发效率和代码复用性。如果配合Vue.js的周边工具vue-loader，可以将一个组件的HTML、CSS、JavaScript代码都写在一个文件中，这样可以实现模块化的开发。
1.2 Vue.js的特性
2 Vue.js的安装
2.1 直接下载并使用 script 标签引入
-
Vue.js官网：https://cn.vuejs.org/v2/guide/
-
在Vue.js的官方网站中可以直接下载vue.js文件并使用 script标签引入。
1、下载Vue.js
Vue.js是一个开源的库，可以从它的官方网站中下载。下面介绍具体的下载步骤：
（1）打开Vue.js的官方网站，进入到Vue.js的下载页面，找到如下图1.2所示的内容。
（2）根据开发者的实际情况选择不同的版本进行下载。这里以下载开发版本为例，在”开发版本“按钮上单击鼠标右键，如下图1.3所示。
（3）在弹出的快捷菜单中单击“连接另存为”选项，弹出下载对话框，如下图1.4所示，单击对话框中的“保存”按钮，将Vue.js文件下载到本地计算机上。
此时下载的文件为完整不压缩的开发版本。如果在开发环境下，推荐使用该版本，因为该版本中包含所有常见错误相关的警告。如果在生产环境下，推荐使用压缩后的生产版本，因为使用生产版本可以带来比开发环境下更快的速度体验。
-
引入Vue.js
将Vue.js下载到本地计算机后，还需要在项目中引用Vue.js。即将下载后的vue.js文件放置到项目的指定文件夹中。通常文件放置在JS文件夹中，然后在需要应用vue.js文件的页面中使用下面的语句，将其引入到文件中。
<script type="text/javascript" src="JS/vue.js"></script>
注意：引入Vue.js的 script 标签,必须放在所有的自定义脚本文件的script 之前，否则在自定义的脚本代码中应用步到Vue.js。
2.2 使用CDN方法
-
在项目中使用Vue.js，还可以采用引用外部CDN文件的方式。在项目中直接通过 script 标签加载CDN文件，通过CDN文件引用Vue.js的代码如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
注意：为了防止出现外部CDN文件不可用的情况，还是建议用户将Vue.js下载到本地计算机中。
2.3 使用NPM方法
-
在使用Vue.js构建大型应用时，推荐使用NPM方法进行安装，执行命令如下：
npm install vue
注意：使用NPM方法安装Vue.js需要在计算机中安装node.js。
node;js官网：https://nodejs.org/en/，通过node.js官网下载之后，傻瓜式安装即可。
3 前端框架开发工具
