項(xiàng)目前提
需要了解VUE的基礎(chǔ)知識(shí)
需要了解部分后端知識(shí)
搭建node環(huán)境
首先需要有node運(yùn)行環(huán)境富腊，具體可以參看
http://www.reibang.com/p/c28dc0a7b290
搭建VUE單文件組件環(huán)境
主要使用了vue的腳手架工具-vue-cli，具體教程可以參看github
https://github.com/vuejs/vue-cli
新建文件夾域帐，按住shift同時(shí)點(diǎn)擊右鍵赘被，選擇-在此處打開命令行，然后輸入
cnpm install -g vue-cli
等待安裝完成
命令行輸入
vue init webpack 項(xiàng)目名稱
此處肖揣，假設(shè)我的項(xiàng)目名稱為 monitor
Project name：項(xiàng)目名稱
Project description：項(xiàng)目描述
Author：作者
Vue build：（默認(rèn)回車即可）
Install vue-router? 是否安裝vue路由（需要）
Use ESLint to lint your code? 使用ESLint （暫時(shí)不需要）
Setup unit tests with Karma + Mocha? 設(shè)置單元測(cè)Karma + Mocha民假？（暫時(shí)不需要）
Setup e2e tests with Nightwatch? 設(shè)置端到端測(cè)試，Nightwatch龙优？（暫時(shí)不需要）
啟動(dòng)
cd monitor
cnpm install
npm run dev
默認(rèn)是自己打開瀏覽器的羊异，端口為8080，我們可以在配置文件里面更改彤断，具體位于
項(xiàng)目路徑/config/index.js野舶，修改完成重啟項(xiàng)目即可（原來的命令行，按ctrl+c 關(guān)閉服務(wù)宰衙，然后重新輸入 npm run dev）
這里我們改成了80端口平道，防止和后端的TOMCAT的8080端口沖突。
到這里供炼，我們已經(jīng)完成了簡單的單文件
