这周开始学习vue，用的vue-cli脚手架做简单的登录页面。但在安装和使用时，还是遇到了一些坑，犯了不少低级错误，在这儿整理一下。
安装
- 问题：win10系统下，按文档创建vue-cli的项目，但在vue init webpack my-project时文件加载到一半就失败了。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
解决方法：
设置node的环境变量。
-
问题：基于webpack模板的项目，保存后可自动刷新页面（hot reload）。但实际使用无法自动刷新，手动刷新页面也无效，必须重启服务器npm run dev。
原因：更换编辑器发现可以刷新，编辑器webstorm2016中才有这个问题。
解决方法：
webstorm2016中，选择File->Setteing，在设置面版中搜索“safe”，将“safe write”的勾选取消，“自动保存”勾选上（可能是编辑器保存存在问题）。
组件名
- 问题：注册组件“header”,但页面显示空白
原因：组件名与H5标签重复，组件不起作用
解决方法：另起名字，如“app-header”
vue-resource
- 问题：vue-resource $http跨域发送post请求没有成功
解决过程：
- ping接口地址，可以连通。
-
postman发送请求到接口地址，没有响应。
-
端口没有设置，接口地址的端口8888，设置端口后，postman可以收到响应。
-
输入正确的用户名和密码，postman返回报错信息（code:0）。设置数据类型为application/x-www-form-urlencoded，即可返回正确信息（code:1）。
- 问题：vue-resource $http 设置application/x-www-form-urlencoded时，直接设置header没有效果
this.$http.post('http://...:8888', {...}, {header: {'ContentType': 'application/x-www-form-urlencoded'}})
.then((response) => {
...
}, (response) => {
...
})
原因：跨域时，设置头部失效
解决方法：
设置option中{emulateJSON:true}
this.$http.post('http://...:8888', {...}, {emulateJSON:true})
.then((response) => {
...
}, (response) => {
...
})
-
问题：端口、数据类型设置后，可以发送数据，但输入正确的用户名和密码仍登录失败
原因：检查“source”面板，发现传过去的数据都为undefined。
检查代码，发现传入数据错误，post的数据：<code>{username: this.username, password: this.password}</code>，组件中定义的数据：<code>user: {username: '',password: ''}</code>
解决方法：
更正post数据<code>{username: this.user.username, password: this.user.password}</code>
