使用VUE搭建单页应用(SPA）

今天我们学习的是如何用VUE构建一个简单的单页应用(SPA)，首先我们要学习这个的前提是要 ‘搭建好NodeJs环境，用vue-cli脚手架创建好项目’。

项目创建好之后，运行 ‘npm run dev’ ,当上面的命令运行起来的时候，用浏览器访问 http://localhost:8080 这个地址，我们会看到如下页面：

接下来就是路由的安装与配置：在我们正式开始配置我们的单页程序之前，还有一个东西必须安装，vue-router。vue-router 是VUE官方提供的一个路由组件，专门用来构建VUE的单页程序。我们使用vue-router的原因就是它可以使我们的页面在前端就完成切换，而不是每次切换页面都要向服务器重新请求数据，重载页面。

我们可以用下面的命令安装vue-router.

npm install vue-router --save

接下来让我们打开 src/main.js 文件夹把路由模块配置到我们的程序里.

复制下面的内容并替换原来的 src/main.js:

// 导入vue实例
import Vue from 'vue'
//导入 App 组件
import App from './App'
//导入 vue router
import VueRouter from 'vue-router'