Vue和jQuery一样，是一个前端框架，如果你要问在过去的一年里，前端技术框架什么最火，那无疑就是前端三巨头：React、Angular和Vue。今天，我们就一起来简单了解一下什么是Vue，以及它的语法和运行环境搭建过程。本文将通过一个Demo案例，来说明如何使用这个优秀的前端框架。
什么是Vue.js
Vue是一套用来构建用户界面的渐进式JavaScript框架，其中心思想是数据驱动，以前我们使用jQuery写代码时常用$(‘.dom’).text(‘我把值改变了’)，这种写法先要获得结构，然后再修改数据更新结构，而Vue的做法是直接赋值this.msg=”我改变了”，然后msg就会同步到某个结构上。视图管理抽象为数据管理，而不是管理dom结构。还有一点需要说明的是，Vue是国人写的，技术文档支持中文。
环境搭建
工欲善其事，必先利其器，我们先从搭建Vue环境开始。Node和NPM的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程基础上做开发。
安装
在用 Vue 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如webpack或Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
执行命令：
$ npm install -g vue-cli
init的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入y确定跳过，完成之后即可。
构建项目
在桌面上创建一个目录demo，用来构建Vue项目。
执行命令∶
$ cd /Users/admin/Desktop/demo $ vue init webpack myProject
运行项目
进入根目录myProject，执行命令：
$ npm install $ npm run dev
npm install 是安装项目所需要的依赖，npm run dev 是运行项目。执行完成后控制台会提示：
Your application is running here: http://localhost:8080
在浏览器中输入http://localhost:8080，就可以看到项目首页了。
自定义开发
接下来，我们简单开发一个功能，用来动态显示Vue中预设的值。
创建Demo.vue文件
进入根目录，在/src/components下新建一个Demo.vue文件，内容如下：
<template>
<div id="app">
<h2>{{product}} are in stock.</h2>
</div>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
product: 'Boots'
}
}
}
</script>
提示：如果启动程序时报Newline required at end of file but not found错误，在这段代码最后一行后添加空行即可。
配置路由
修改/src/route目录下的index.js文件，添加代码：
import Demo from '@/components/Demo'
然后指定路由规则：
{
path: '/demo',
name: 'Demo',
component: Demo
}
也可以指定二级路由，示例代码如下：
[url href=https://pan.baidu.com/s/1Bv5UixE7L1I92TJ6iLCDeQ]文件下载[/url]
提取码：rcp1
测试
配置完路由，在地址栏输入：http://localhost:8080/#/demo，按下回车，就可以看到我们自定义的那个页面了，内容显示为：Boots are in stock。
