项目前提
需要了解VUE的基础知识
需要了解部分后端知识
搭建node环境
首先需要有node运行环境，具体可以参看
http://www.jianshu.com/p/c28dc0a7b290
搭建VUE单文件组件环境
主要使用了vue的脚手架工具-vue-cli，具体教程可以参看github
https://github.com/vuejs/vue-cli
新建文件夹，按住shift同时点击右键，选择-在此处打开命令行，然后输入
cnpm install -g vue-cli
等待安装完成
命令行输入
vue init webpack 项目名称
此处，假设我的项目名称为 monitor
image.png
Project name：项目名称
Project description：项目描述
Author：作者
Vue build：（默认回车即可）
Install vue-router? 是否安装vue路由（需要）
Use ESLint to lint your code? 使用ESLint （暂时不需要）
Setup unit tests with Karma + Mocha? 设置单元测Karma + Mocha？（暂时不需要）
Setup e2e tests with Nightwatch? 设置端到端测试，Nightwatch？（暂时不需要）
启动
cd monitor
cnpm install
npm run dev
image.png
image.png
默认是自己打开浏览器的，端口为8080，我们可以在配置文件里面更改，具体位于
项目路径/config/index.js，修改完成重启项目即可（原来的命令行，按ctrl+c 关闭服务，然后重新输入 npm run dev）
image.png
image.png
这里我们改成了80端口，防止和后端的TOMCAT的8080端口冲突。
image.png
到这里，我们已经完成了简单的单文件
