vue.js入门指南与安装（详细步骤图）

一、Vue.js 是什么

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

Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，易学易上手。

什么是渐进式框架

渐进式代表的含义是：主张最少。每个框架都有不同的特点，那么这些特点对于某些开发需求有一定的要求，那么这些要求就可以称为主张，主张的强弱直接回影响该框架在项目的使用方式.

渐进式框架的具体使用就是阶梯式的向前，“Progressive(渐进式的)”这个词在英文中定义是渐进，一步一步，什么时候需要使用就什么加载对应的内容，由简单到复杂的方式去实现整个项目的需求，比如项目需求确定后，可以根据不同的需求去加载不同的模块，用最小，最快的方式实现项目的开发。同时利用相对较完善的生态圈进行后期版本的迭代升级。

二、Vue.js的优点

1. 简单易用

(1) 只要掌握HTML+CSS+JavaScript就可以快速上手

2. 灵活渐进式

(1) 根据需求的不同加载不同的模块即可

3. 轻量、高效

(1) 压缩后只有20KB左右

(2) 利用虚拟DOM。什么是虚拟DOM，虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用diff算法对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM

4. 双向数据绑定

(1) 对应表单元素可以实现双向绑定，视图可以影响模型，同时模型又可以控制视图的展示

5. 生态丰富，学习成本低

(1) 目前已拥有完善的UI框架支持，配套的UI组件，可以快速实现项目的开发.

三、Vue.js 对比 Angular.js 、 React.js

1.Vue特点:

Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

2.Vue.js与Angular.js对比:

相同点：

1.都支持指令:基础指令以及自定义指令

2.都支持过滤器:内置过滤器和自定义过滤器

3.都支持双向数据绑定

4.都不支持低端浏览器,IE8以及以下均不支持

不同点：

1.学习成本

AngularJS的学习成本高，比如增加了Dependency Injection特性，而 Vue.js本身提供的API都比较简单、直观。

2. 更灵活

比起 Angular更少专制，它能让你按照自己想要的方式构建应用

3.性能方面

AngularJS依赖对数据做脏检查，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环(digest cycle)可能要运行多次。Vue依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。

3.Vue.js与React.js的对比

相同点：

1. 都是组件化开发

2. 都提供了合理的钩子函数

不同点：

1.性能方面

Vue性能上更有优势，因为 Vue 的虚拟DOM 实现相对更为轻量一些，整体大小比react.js更小更轻便

2.学习成本方面

Vue更容易上手，根据功能的不同可以先学习不同的模块，可以实现快速上手。而react的学习对于原生以及底层的应用更多，所以要求也就更高一些

3.优化方面

在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。 然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的负担。

使用MVVM好处:

1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。

3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

4. 可试性。可以针对ViewModel来对界面(View)进行测试。可以针对ViewModel来对界面(View)进行测试 。

四、Vue.js的核心思想

1. 数据驱动

ViewModel中有：DOM Listeners(监听) 和 Directives(指令)

View 对应的 DOM对象。

ViewModel是一个很好的设计，如果没有ViewModel，那么我们在View和Model之间的驱动是由手动触发DOM改变，是一个很繁琐的过程，如果我们使用了ViewModel之后，就省略了手动操作的步骤了，在Vue.js里面，我们我们只需要改变数据，Vue.js只需通过Directives指令去对DOM做一层封装，当数据发生变化，就会通知指令去修改DOM,数据是DOM的一种自然映射。Vue.js还会对操作做一层监听，当我们修改视图的时候，Vue.js会监听这些变化，从而改变Model。从而实现了双向绑定。

通过数据驱动界面更新, 无需操作DOM来更新界面。使用Vue我们只需要关心如何获取数据, 如何处理数据, 如何编写业务逻辑代码，我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)。

2. 组件化

概念:把代码重复的部分提取提炼出一个一个组件供给功能使用.

使用:toast弹框的实现，搭配UI框架实现样式，同时利用组件化的方式完成弹框功能的实现。

目的:功能的复用以及解耦，并且每个组件之间的既可以有依赖又是相互独立的

比如上图中的布局，header，left，right以及footer区域分别都是一个独立的组件，每个组件之间的功能又不会有影响，并且每个组件还可以引入公共的组件。

五.组件的设计原则：

页面上每个独立的可视/可交互区域都被视为一个组件。

每个组件对应一个工程目录，组件所需要的各个组件在这个目录下就近维护。这个就提现了前端的工程化思想，为前端开发提供了很好的分支策略，每个开发者都清楚地知道自己所开发维护的功能单元，代码必然存在于自己的组件目录中，在这个目录中就可以清楚知道自己的功能的内部逻辑以及资源，样式，功能都可以写在里面。在Vue.js中，可以通过.vue文件把组件依赖的模板，js，和css都写在一个文件中，这个就把就近维护思想发挥到极致。

页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

五、MVVM模式与MVC模式区别

MVVM 由 Model,View,ViewModel 三部分构成：

M： Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑

V： View 代表UI 组件，它负责将数据模型转化成UI 展现出来，也就是指DOM层 或用户界面

VM: ViewModel 是一个同步View 和 Model的对象，用于处理数据和界面的中间层

MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。其中ViewModel层，就是View和Model层的粘合剂，他是一个放置用户输入验证逻辑，视图显示逻辑，发起网络请求和其他各种各样的代码的极好的地方,最终就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层
MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。
View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈
六、Vue起步

1.安装

安装方式主要分以下几种方式：

1. 直接下载vue.js文件，并且在页面中使用

2.可以通过CND的方式引入vue，方法:

(1)生成环境的安装方法，避免发生不可以预期的问题所以建议使用添加版本号

(2)制作原型或者学习，可以引入一下这个版本

3.通过npm方式引入

# 最新稳定版 $ npm install vue

2.使用

1. 首先创建index.html文件

2. 其次在index.html文件中引入script链接，那么此时需要注意以上三种引入方式均可以

3. 再次需要定义一个vue实例对象，进行元素挂载，那么下面就用代码方式给大家展示页面的渲染以及效果图

HTML部分:

1. <div id="app"> 
2.      {{message}} 
3.  div> 

JS部分

1. let vm = new Vue({ 
2.        el:'#app', 
3.        data:{ 
4.            message:'hello Vue' 
5.        } 
6.    }) 

页面效果:

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的而且根据以上的操作就可以在浏览器中正常输出hello,vue，这也就完成了第一步的渲染，那接下来就看下每个参数的具体用法

2.1 el配置项

1. let vm = new Vue({ 
2.        el:'#app', 
3.  }) 

首先：页面需要使用vue那么首先要创建vue实例对象

其次：el 是挂载点 可以使用css的选择器

再次: 一个vue实例，只能挂载到一个节点上，如果满足el的节点有多个，那么挂载到满 足条件的第一个节点

最后: 一般情况下挂载到id选择器

注意: el不能设置为html或者body

2.2 Data配置项

1. let vm = new Vue({ 
2.        el:'#app', 
3.        data:{ 
4.            message:'hello Vue' 
5.        } 
6.  }) 

首先:data配置项的内容即将会被展示到浏览器中

其次:data在.html文件中的定义为对象的方式，之后会使用vue-cli(脚手架)，那么此时对于data将被定义为函数的方式(后面会做详细的介绍)

再次：在data中定义想要在页面中输出的内容的变量名(message)，同时把想要输出的内容赋值给当前定义的变量名即可.

最后：完成定义后直接运行html文件即可看到输出内容：hello Vue

以上是对vue中的数据想要渲染到页面上的一种方式，那么除了上述的方式，我们还有可以通过指令的方式进行绑定，那接下来的文章将会对vue中具体的指令以及其他vue的配置项做介绍。

七、搭建一个完整的vue项目

之前有在网上查看过很多vue项目的搭建,最终都很难搭建出一个完整的vue项目.尤其是对初学者来说.以下是鄙人经过千锤百炼,总结出来的,可供大家参考.

1.安装node环境

1. 下载地址为:https://nodejs.org/en/

2. 检查是否安装成功,输出版本号,表示安装成功.

3. 为了提高下载速度,我们可将安装路径改为使用淘宝镜像http://npm.taobao.org/

4. 输入:npm install -g cnpm -registry=https://registry.npm.taobao.org.

即可安装npm镜像,往后使用到npm的地方使用cnpm就行.

5. 检查cnpm是否安装成功

2.安装webpack打包工具

2.1介绍webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

其中包含四个核心概念

· 入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的

· 输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

· loader：让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)

· 插件(plugins)：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

2.2 webpack的作用

上面对webpack的介绍其目的就是使用webpack工具能很好快速的对象项目进行打包.

2.3 安装

(1) 运行CMD，安装命令如下所示，其中， -g是全局安装安装 cnpm i webpacki -g

(2) 运行CMD，安装命令如下所示，其中， -g是全局安装安装cnpm i webpack-cli -g

(3) 输入如下命令，若出现版本号, 检查是否安装成功

3. 搭建vue项目

1. 安装cnpm i vue-cli -g 全局安装

2. 新建一个目录(文件夹),例如:demo

3. 进入demo目录, cd demo

4.创建一个基于webpack模板的项目,

默认创建到demo目录下,输入Y即可

5.由于最后选择的是自己安装依赖项.所以解下来,我们可以通过cnpm i,来安装依赖项.

通过淘宝镜像下来依赖项会比npm快很多,所以建议大家使用cnpm i来进行安装

6. 安装成功之后,目录文件如下:

7. 目录介绍

在此说明下,-表示目录, .表示文件

-build webpack的打包配置文件

-config 项目的配置文件

-node_modules 安装依赖包等的相关模块

-src 你写的项目

-static 静态资源文件eg:css js img等

1.静态资源文件不参与压缩打包

2.在index.html文件引入static的静态资源文件

.babelrc es6转es5的配置项

.editorconfig: 编辑器的配置项

.gitignore 上传到github上要忽略的文件

.postcssrc.js css的配置文件

.index.html 项目唯一的页面

.package.json 存放项目的描述 依赖项的详细信息和相关版本

.read.me 有关项目的启动信息

8. src目录介绍

在此说明下,-表示目录, .表示文件

-assets 存放静态资源文件: eg:css js img

1.静态资源文件参与压缩打包

2.在main.js文件引入asstes的静态资源文件

-components: 局部组件

-common 全局组件

-utils 工具类

-filters 过滤

App.vue 唯一的根组件

main.js 唯一的入口文件

9. 启动项目

npm run dev

当看到此界面时,表示项目启动成功

10. 打开浏览器,运行:http://localhost:8080/#/

启动成功并访问

 

接下来就玩转你的vue项目吧.

4. 项目介绍

要想使用vue项目做一套属于自己的完成开发.在启动之前,我们需要一些清空工作.如下:

1.清空相关工作

App.vue 清空,只留vue模板

components 清空(删除helloWorld.vue)

assets 清空(删除logo.png)

Vue模板如下:

1.  
2.  
3.  
4.  
5.  
6.  
7.  

2.src目录中仅留下四个文件

assets(空的)

components(空的)

App.vue(只有vue模板)

main.js (唯一入口文件)

5. 使用项目

1. 在src/components目录下,新建一个如下几个文件:header.vue main.vue footer.vue left.vue right.vue

2. 在App.vue 中分别导入header.vue main.vue footer.vue这三个文件,如下所示:

1.  
2.  
3.  

1. style> 
2. /* 样式代码 */ 
3. .container{ 
4.   width:100vw; 
5.   height: 100vh; 
6.   background: grey; 
7.   display: flex; 
8.   flex-direction: column; 
9. } 
10.  

3. 在main.vue 文件中引入left.vue 和right.vue两个文件.代码如下:

1.  
2.  
3.  

1.  

4. header.vue和footer.vue代码如下所示:

Header.vue

2.   ="header"> 
3.     

   header

    
4.    
5.  
6.  
7.  

1.  

Footer.vue

2.   ="footer"> 
3.     

   footer

    
4.    
5.  
6.  
7.  
8.  
9.  

5. left.vue 和right.vue如下所示

Left.vue

2.   ="left"> 
3.     

   left

    
4.    
5.  
6.  
7.  

1.  

Right.vue

2.   ="right"> 
3.     

   right

    
4.    
5.  
6.  
7.  

1.  

6. 已上就做了一个网页布局的形式,通过:http://localhost:808/#/可访问网页布局

已上就是有关vue完整项目的介绍.