Vue.js 开发环境搭建及实例运行简明教程

Vue和jQuery一样，是一个前端框架，如果你要问在过去的一年里，前端技术框架什么最火，那无疑就是前端三巨头：React、Angular和Vue。今天，我们就一起来简单了解一下什么是Vue，以及它的语法和运行环境搭建过程。本文将通过一个Demo案例，来说明如何使用这个优秀的前端框架。

什么是Vue.js

Vue是一套用来构建用户界面的渐进式JavaScript框架，其中心思想是数据驱动，以前我们使用jQuery写代码时常用$('.dom').text('我把值改变了')，这种写法先要获得结构，然后再修改数据更新结构，而Vue的做法是直接赋值this.msg="我改变了"，然后msg就会同步到某个结构上。视图管理抽象为数据管理，而不是管理dom结构。还有一点需要说明的是，Vue是国人写的，技术文档支持中文。

Vue.js官网    官方教学视频

环境搭建

工欲善其事，必先利其器，我们先从搭建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 
}

也可以指定二级路由，示例代码如下：

提取码：rcp1

测试

配置完路由，在地址栏输入：http://localhost:8080/#/demo，按下回车，就可以看到我们自定义的那个页面了，内容显示为：Boots are in stock。