vue填坑笔记

这周开始学习vue，用的vue-cli脚手架做简单的登录页面。但在安装和使用时，还是遇到了一些坑，犯了不少低级错误，在这儿整理一下。

安装

---

1. 问题：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的环境变量。

2. 问题：基于webpack模板的项目，保存后可自动刷新页面（hot reload）。但实际使用无法自动刷新，手动刷新页面也无效，必须重启服务器npm run dev。
   原因：更换编辑器发现可以刷新，编辑器webstorm2016中才有这个问题。
   解决方法：
   webstorm2016中，选择File->Setteing，在设置面版中搜索“safe”，将“safe write”的勾选取消，“自动保存”勾选上（可能是编辑器保存存在问题）。

   
   

组件名

---

1. 问题：注册组件“header”,但页面显示空白
   原因：组件名与H5标签重复，组件不起作用
   解决方法：另起名字，如“app-header”

vue-resource

---

1. 问题：vue-resource $http跨域发送post请求没有成功
   解决过程：

1. ping接口地址，可以连通。

2. postman发送请求到接口地址，没有响应。

   
   

3. 端口没有设置，接口地址的端口8888，设置端口后，postman可以收到响应。

   
   

4. 输入正确的用户名和密码，postman返回报错信息（code:0）。设置数据类型为application/x-www-form-urlencoded，即可返回正确信息（code:1）。

   
   

2. 问题：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) => {
        ...
      })

3. 问题：端口、数据类型设置后，可以发送数据，但输入正确的用户名和密码仍登录失败
   原因：检查“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>