vue单文件组件开发1-搭建单文件开发环境

项目前提

需要了解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

到这里，我们已经完成了简单的单文件