文章目录

前言
一、Vue 简介
二、MVVM 模式和 MVC 模式
- 2.1 MVC 模式
- 2.2 MVVM 模式
三、Vue 的渐进式
四、Vue 初体验
五、Vue 安装
六、独立版本方式
七、使用 NPM 方式
总结

前言

本文主要讲解 Vue 的介绍及安装进行简单讲解，要明确什么是渐进式 JavaScript 框架。

一、Vue 简介

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

按照官网所说，Vue.js 是一个渐进式框架。所谓的渐进式是指可以一步一步的自底层向上阶段性的使用 Vue.js，不必一开始就将整个 Vue.js 框架所有技能点都学会，可以用一部分就学一部分。这正是 Vue.js 易于上手的关键所在，也是开发者喜欢 Vue.js 的一个重要原因。

另外 Vue.js 和其他的前端框架有很好的兼容性，这就解决了多个前端框架共用于一个项目的问题，同时便于项目整合和原有项目的升级。

最后 Vue.js 为 Web 开发提供了强大的驱动支持，让 Web 开发变得更加简单。使用 Vue.js 可以轻松地实现 Web 前端开发中常见的高级功能。例如：解耦视图和数据、前端路由、状态控制、模块开发、虚拟 DOM 等。

总之，Vue.js 是一个优秀的 MVVM 模式框架。

二、MVVM 模式和 MVC 模式

2.1 MVC 模式

MVC（Model View Controller）是一种软件设计模式，是模型（Model）— 视图（View）— 控制器（Controller）的缩写。这种设计模式将软件分为三个独立的业务模型：
Model（模型）：是程序中用于处理数据逻辑的部分。模型对象负责在数据库中存取数据；
View（视图）：是程序中处理数据显示的部分。通常视图是依据模型数据创建的；
Controller（控制器）：是程序中处理用户交互的部分。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

斯坦福大学公开课上的这幅图是最经典和最规范的 MVC 标准。见下图：
在这里插入图片描述
可以用一句话来描述三者之间的关系，“ Controller 负责将 Model 的数据用 View 显示出来”，换句话说，就是在 Controller 里面把 Model 的数据赋值给 View 。

因为 MVC 模式出现的时间比较早，在 MVC 模式比较流行的时候前端技术还不成熟，此时很多业务逻辑代码都是在服务器端实现，因此对前端技术而言并没有真正意义上的 MVC 模式。近些年随着前端技术的发展和流行才出现了新的 MVVM 模式。

2.2 MVVM 模式

MVVM 是 Model-View-ViewModel 的简写，其本质就是 MVC 的改进版。但是需要注意的是，ViewModel 层并非是 Controller 层的替代，实际上 ViewModel 存在的目的在于抽离 Controller 层中用于展示的业务逻辑，其他视图操作的业务逻辑还是放在 Controller 层中实现。也就是说 MVVM 实现的是业务逻辑组件的部分重用。

正如前文讲解 MVC 是如何分配工作一样，早期的程序设计过程中，开发者需要存储数据所以有了 Model 层，开发者需要 UI 界面所以有了 View 层，开发者需要有一个地方把 Model 中的数据在 View 中显示所以有了 Controller 层，Controller 层负责的业务逻辑实现。

一方面，在过去的十几年中随着前端技术的发展，开发者已经将越来越多用于展示的业务逻辑代码由服务器端移植到前端中实现，这些代码写在前端，使得前端的控制层代码变得非常臃肿，代码的维护工作变得异常困难。另一方面，当年为了解决浏览器兼容性问题出现了很多类库，如 Prototype、jQuery 等，但是这些类库并没有实现控制层用于描述业务逻辑的功能。

综合以上两方面原因，才有了 MVVM 模式框架的出现，其中比较著名的有：Angular.js、 React.js、Vue.js。这些框架的出现极大提高了前端开发的效率。

MVVM 模式的核心是“将 View 的状态和行为抽象化，将视图 UI 和业务逻辑分离开”，这些工作由 ViewModel 模块来实现。ViewModel 可以取出 Model 中的数据，还可以处理 View 中因展示内容而涉及的业务逻辑。

MVVM 模式的结构如下图所示。
在这里插入图片描述

Vue.js 框架在设计上使用的 MVVM 模式，对应框架各部分的功能如下：

Model：JavaScript 中存储的数据，如对象、数组等。
View：页面视图展示部分，和 HTML、CSS 相关。
ViewModel：业务逻辑处理，比如 AJAX 请求等。

三、Vue 的渐进式

本节将通过三个场景详细描述 Vue.js 框架渐进式的含义。

现有一个项目已经存在一个现成的服务端应用，开发者可以将 Vue.js 作为前端开发工具嵌入到该项目当中，这样就可以使该项目具有更加丰富的交互体验；
如果开发者希望将更多业务逻辑放到前端中实现，那么 Vue.js 的核心库及其生态系统也可以满足这些需求（Core+Vuex+Vue-router）。同时和其它前端框架一样，Vue.js 允许开发者将一个网页分割成可复用的组件，每个组件都包含属于自己的 HTML、CSS、JavaScript 以用来渲染网页中相应的地方；
如果想要构建一个大型的应用，则需要将一个完整的功能分割成各自独立的组件，Vue.js 提供了一个命令行工具，使快速初始化一个多组件工程变得非常简单（vue init webpack my-project）。

以上这三个例子，是逐层递进的，也就是说对 Vue.js 的使用可大可小，不论需求如何它都会有相应的方式整合到项目当中，所以说它是一个渐进式的框架。

四、Vue 初体验

下面体检一下如何使用 Vue.js 开发项目，按照传统先写一个 “Hello World”。

首先新建一个 HTML 文件，在文件中引入 Vue.js 的支持。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者这样引入：

<!-- 生产环境版本，优化了文件大小和访问速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 有多种安装方式。不推荐新手直接使用 vue-cli 来完成安装，特别是在还不了解基于 Node.js 的构建工具时。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!--插值表达式用法：-->
      <!--1.将数据填充到 HTML 标签中-->
      <!--2.插值表达式支持基本的计算操作-->
      {
   
   { message }}
    </div>
    <script>
      var app = new Vue({
      
      
        // el:元素的挂载位置（值可以是 CSS 选择器或者 DOM 元素）
        el: "#app",
        // data:模型数据（值是一个对象）
        data: {
      
      
          message: "Hello Vue!",
        },
      });
    </script>
  </body>
</html>

变量 app 代表了一个 Vue 实例，在开发的过程中涉及到的所有代码都是一个对象，这些对象将被写入 Vue 实例中。其中必不可少的一个属性为 el 属性，该属性是 Vue 实例对象的第一个属性，作用是指定页面中一个已经存在的 DOM 元素来挂载 Vue 实例。挂载成功后就可以在实例中定义 data 数据和 methods 等属性，然后再通过各种指令等操作实现数据的双向绑定。上面示例代码的显示效果如下：
请添加图片描述

五、Vue 安装

Vue 的安装有两种方式：

独立版本方式：是 Vue 轻量级的使用，适用于在 SSM 等 Web 开源架构的基础上使用 Vue 实现前端数据的双向绑定等操作。
使用 NPM 方式：可以和 Node.js 整合实现大前端架构开发。不同的技术栈选择不同的安装方式安装。

六、独立版本方式

独立版本可以在官网直接下载 Vue.js 文件，在页面使用 <script> 标签引入后即可使用。Vue 分为开发版本和生产版本两种不同的版本。开发版可以提供未压缩的 js 源文件，用户可以看到 js 源代码这样可以对学习和理解 Vue 框架有所帮助。生产版是经过压缩后的版本，无法直接阅读但是文件体积小，便于页面引用。在学习的过程中可以根据情况选择对应的版本下载。

开发版本下载地址：Vue 开发版
生产版本下载地址：Vue 生产版

七、使用 NPM 方式

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。下面列出 NPM 安装方式所需要安装的文件列表：

在开始之前应先安装Node.js。
NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候，也安装好了 NPM。

安装 vue-cli 脚手架

vue-cli 是一个官方命令行工具，该工具可用于快速搭建大型单页应用。首先运行下面命令安装脚手架。

npm i @vue/cli -g

安装效果：
请添加图片描述

使用 vue-cli 快速搭建 vue 项目

使用 vue-cli 创建一个新项目。例如，我们创建一个名为 demo 的项目。首先使用命令执行：

vue create demo

在创建项目中，我们需要配置一下，过程如下所示：

第一步：选择 Default (Vue 3 Preview)。
请添加图片描述

第二步：选择 Use NPM。

请添加图片描述

显示下图内容，即创建成功。

请添加图片描述

进入刚才创建的项目：

cd demo

我们这里将在8080端口运行。我们在 demo 根目录下新建 vue.config.js，在该文件中写入以下内容。

const HOST = process.env.HOST;
module.exports = {
    
    
  devServer: {
    
    
    host: HOST || "0.0.0.0",
    port: 8080,
    disableHostCheck: true,
  },
};

配置成功后，运行项目代码：

npm run serve

执行结果：
请添加图片描述
然后即可在浏览器中输入locakhost:8080 进行访问：

至此使用 npm 安装并且使用 vue-cli 配置 vue 项目已经完成，可以后续的开发工作。

总结

学习到这里，我们要知道 Vue 优点：

易用：熟悉 HTML 、CSS、JavaScript 知识后，可快速上手 Vue；
灵活：在一个库和一套完整框架之间自由伸缩；
高效：20KB 运行大小，超快虚拟 DOM。

Vue 的介绍与安装